yOu gOOd ?!

* 개인 공부를 정리한 포스트입니다. * 잘못된 정보는 댓글로 알려주세요. * 위키북스의 정재남 코어자바스크립트를 참고하였습니다. 리액트에서 불변성이란? 리액트를 공부하다보면 상태를 불변하게 업데이트 해야한다고 배웠을 것이다. 이게 과연 무엇일까? 앞서 객체는 가변(내부의 프로퍼티 값이 변함)이라고 하였다. 리액트의 상태(변수)의 값으로 객체를 할당하였을때 사용자는 객체에 접근하여 값을 바꾸는 것이 가능하다. 이것은 불변하다는 것에 반하는 것이 된다. 따라서 새로운 객체를 만들어 재설정 하는 방식으로 값을 업데이트 해줘야 한다. 이러한 것을 불변성을 지키는 것이라고 한다. 또한 리액트의 set은 이전값의 값과 같을때 값이 변하지 않고 상태가 유지 된다. 내부 프로퍼티로 접근해서 값을 변경한 경우 주소를 ..

* 개인 공부를 정리한 포스트입니다. * 잘못된 정보는 댓글로 알려주세요. * 위키북스의 정재남 코어자바스크립트를 참고하였습니다. 상수는 불변값인가? 기본형 참조형 가변값 불변값 각각의 정의를 살펴보자. 상수란 변경될 수 없는 값이다. 불변값이란 값이 변하지 않는 것이다. 얼핏 들으면 같은 말처럼 들린다. 하지만 자바스크립트에서는 다르다. 변수와 상수의 구분은 변수 영역 메모리에 따라, 불변값의 여부는 데이터 영역 메모리에 따라 구분된다. 불변값으로는 기본형 데이터(숫자, 문자열, null 등)가 있다. 값을 바꿀 때 마다 기존값을 수정하는 것이 아니라 새로운 변수를 만들어낸다. 고로 기존에 저장된 데이터는 변하지 않는다. 참조형 데이터의 기본적인 성질은 가변값이다. 변수에 객체를 할당할때 객체의 프로퍼..

한 달 뒤의 내가 이 포스팅을 다시 봤을때 저 간단한걸 왜 몰라 할 수 있기를 바라며 ...  문제상황 : 습관성 width: 100% 로 인한 이슈가 발생하였다.자식 요소가 부모요소 밖으로 튀어나올때!! 어떻게 해결을 보면 좋을까!!뭐가 문제여서 그런걸까!! 을 알자보자 싶어 그냥 이것저것 해보고 기록하는 글이다.  0. 실험 기본 상태0. box-sizing은 기본값이다.1. body의 가로크기는 800px 이다. 2. 부모는 body의 가로크기를 100%으로 받고 패딩 50을 가지고 있다. 3. 자식은 부모의 가로크기를 100%으로 받는다. 여기서도 이슈 발생. 엄마가 오른쪽으로 치우쳤다. 이것은 body의 가로가 800에서 마진이 오토값으로 중앙정렬 되어 있는 상태에서 엄마의 패딩이 50으로 설정..

마진이 겹치는 부분은 값이 큰 마진으로 해결 본다는 것. 배치 시 이웃하는 요소간, 부모 자식 요소간, 적용이 됨. 부모 요소에 overflow: hidden 을 주면, 자식요소가 부모 밖으로 나가지 못함. 부모 요소에 display: inline-block 값을 주면, 자식 요소의 마진값을 적용할 수 있음. 부모 콘테이너에 패딩을 주는게 가장 이상적인듯, ,, 하지만 박스 사이징을 보더 박스로 하는 경우에는 부모에 패딩주는 순간 마음이 안 좋아질수도 ,, 아니면 애초에 디자이너한테 정확한 값을 받아와서 챡챡챡.. 잘 하던가.. 말던가.. 겹치는 부분은 같은 값으로 마진을 줘서 나중에 봐도 의도적으로 마진을 줬음을 알게 하는 것도 좋은듯.. 아니면 마진은 아래로만 주는 형식으로 해결하던가.. 말던가.. ..

static은 기본값. relative 는 자기 자리에서 삐져나온다. 다른 요소들이 relative요소가 원래 있던 자리를 그대로 둔다. 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용. 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같다. absolute은 다른 친구들이 원래 그 차리를 침범 한다. -> 띨롱 나와서 엄마 곁에서 떨어진다. 부모의 relative요소를 찾아서 그 요소에 절대적인 값으로 위치를 조절할 수 있다. sticky는 자기 자리에 잘 있다가 사용자 눈에 띌라고 아주 발악을 한다 fixed는 문서에서 띨롱 떨어져 나와 고정되어 있다. absolute과 fixed는 원래 있던 자..

stacking context css 포지셔닝 등으로 인하여 요소가 겹쳐 졌을 경우 요소의 쌓임 순서(stacking context)를 정의할 수 있다. 자주 쓰이는 쌓임 맥락의 영향을 받는 요소는 다음과 같다. 문서의 루트 요소 () position이 absolute 또는 relative이고, z-index가 auto가 아닌 요소 position이 fixed 또는 sticky인 요소 flexbox 컨테이너의 자식 중 z-index가 auto가 아닌 요소 grid 컨테이너의 자식 중 z-index가 auto가 아닌 요소 opacity가 1보다 작은 요소 z-index 속성의 값 auto 새로운 쌓임 맥락을 생성하지 않고 현재 쌓임 맥락에서의 위치는 부모 요소와 동일하다. 상수 한 자신만의 쌓임 맥락을 생..

다음은 속성의 "값"으로 쓰이는 것들임. 기본적으로 상속이 되지 않는 속성들 : backgound-color, backgound-image, background-repeat, border, display 등 주로 박스모델과 관련됨. 자연스럽게 상속이 되는 것들은 대체적으로 텍스트와 관련이 있음. 상속 inherit : 하위 요소가 상위 요소의 스타일 속성값을 물려받겠다는 것을 의미함. 부모 요소가 포함(containing) 블록이 아니더라도, 항상 문서 트리 내 부모 요소로부터 상속받게 됨. 초깃값 initial : 속성의 초깃값을 요소에 적용시킴. unset : 부모로부터 상속할 수 있는 값이 있으면 상속값을, 없으면 초깃값을 적용시킴.

backgrund-size 속성은 backgound-img 속성으로 지정한 이미지의 크기를 조절 할 수 있는 속성이다. 사용자 지정 값으로 설정 할수도 있고 키워드 값을 사용하면 편하게 설정할 수 있다. div 의 크키를 800px의 정사각형으로 만들고, 배경사진을 불러온 상태에서 backgound-size 속성을 키워드로 설정해보자. 설정한 원본이미지는 다음과 같다. auto (기본값) " 문서상으론 고유한 비율이 유지되도록 해당 방향으로 배경 이미지의 크기를 조정합니다. " 라고 되어있다. 이미지 자체에는 리사이징이 되어있지 않지만 컨테이너 크기에 맞게 조정되었다. contain 이미지를 자르지 않고, 부모의 크기 안에서 최대한 커진다. backgound-repeat 속성의 디폴트가 반복 이기 때문에..

인라인 요소 필요한 부분만 공간 차지. 연속 배치시 기본적으로 가로로 나란히 배치됨. 예) , 등 블록 요소 가로로 모두 차지. 연속 배치시 기본적으로 아래에 배치됨. margin, padding, width, height 설정가능. 예) , 등 요약 인라인 요소는 자기부분 조금만 이런 느낌 블록 요소는 가로로 꽉차는 직사각형 느낌이라 보면 된다. 인라인 요소는 기본적으로 크기를 지정할 수 없는데, display: inline-block 을 지정해주면 크기를 설정할 수 있다. 블록 요소 안에 인라인 요소를 삽입하여 인라인 요소를 관리 할 수 있다. 참고 Inline-level content - MDN Web Docs Glossary: Definitions of Web-related terms | MDN ..

🔗 참고글 🔥 주어지는 것 1) 일의 중요도가 표시된 배열 2) 출력 순서가 궁금한 요소의 인덱스 넘버(로케이션) 🔥 요구하는 것 배열의 순서대로 출력하되, 요소의 중요도가 뒤에 있는 것 보다 낮으면 맨 뒤로 넘길 것(한번에 정렬X) [2, 1, 3, 2] 로 배열이 주어지고 로케이션이 2인(중요도 3인 요소) 경우, 1, 3, 2, 2 (답 ++!) 3, 2, 2, 1 (답 ++1) 로 결과는 2 이런식으로 나오게 해야함. 🔥 어려웠던 것 1. 문제 가독성이 에바 2. 반복문을 어떻게 제어 해야하는가, ---------- 1. 자기 자리의 인덱스 번호와 중요도를 묶어주기 위해 map 으로 배열을 변화 시켜줌 이렇게 됩니다. function solution1(priorities, location) { v..

🔗(문제) 🔗(코드제공) 0. 사전 지식 1. records로 부터 차량 번호를 키로 두고 시간 , 출차 시간 정리 function getParkingTable(records) { const parkingTable = {}; records.forEach((val) => { const info = val.split(" "); if (Object.keys(parkingTable).includes(info[1])) { parkingTable[info[1]].push([info[0], info[2]]); } else { parkingTable[info[1]] = [[info[0], info[2]]]; } }); // 콘솔 확인용 코드 console.log(parkingTable); return parkingTa..

배열의 마지막 요소를 들고올때 length-1 로 들고왔는데 걍 pop() 으로 들고오면 됐구나 ,, 🔗 1, 2, 4 인 경우가 있기 때문에 등비수열일 경우 공비를 나눗셈으로 다시 구했다 function solution(arr) { var f = arr[1] - arr[0]; //차이 var f2 = arr[2] - arr[1]; if (f === f2) { // return arr[arr.length - 1] + f; return arr.pop() + f; } else { // return arr[arr.length - 1] * (arr[1] / arr[0]); return arr.pop() * (arr[1] / arr[0]); } } console.log(solution([2, 4, 8]));