FrontEnd
-
부모에서 자식까지 일일이 Prop전달하기 싫을 때?FrontEnd/React 2022. 10. 2. 13:50
가끔 React로 코딩하다보면 부모의 state나 함수를 자식의 자식의 자식...에게 전달해야 할 때가 있다. 그러면 코드도 복잡해지고 가독성이 떨어지는데 이를 해결할 수 있는게 바로 Context이다. context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 리액트 공식 홈페이지에 Context란에 가보면 이렇게 설명해준다. 우리는 언제 Context를 쓸 지(일일이 전달하기 번거로울 떄)를 정했으니 어떻게 쓰는지 알아보자. Context 생성하고 사용해보기 Context를 생성하려면 React.createContext API를 사용하면 끝이다. const MyContext = React.createContext(defaultValue) ..
-
[CSS]CSS Grid가 뭘까? 이 글로 종결한다 - CodeHan의 코딩공부FrontEnd/CSS 2022. 8. 17. 16:03
CSS Grid Flex는 한 방향 레이아웃 시스템이고 Grid는 두 방향(가로 - 세로) 레이아웃 시스템이다. Grid의 기본적인 구조 A B 부모 요소인 div.container를 Grid컨테이너라고 부르고, 자식 요소인 div.item들을 Gid Item이라고 부른다. Grid Track : grid의 행 또는 열 Grid Cell : 그리드의 한 칸을 가리킨다 Grid Line : 셀을 구분하는 선(세로선) Grid Number : Grid라인의 각 번호(가로선) Grid Gap : Grid 셀 사이 간격 Grid Area : Grid라인으로 둘러싸인 사각형 영역으로, 셀의 집합이다. grid-templete-row, grid-templete-columns : 그리드 형태 정의 columns와 r..
-
[CSS]CSS 꿀팁 정리! - CodeHan의 코딩공부FrontEnd/CSS 2022. 8. 3. 05:22
독후감인데 유용한 팁들을 적었다. 책에서 본 내용을 간략하게 요약해놨으니 유용하게 사용하길 바란다. 책에서 알게된 새로운 내용들을 많이 옮겨놨다.! img width와 max-width 차이 - width속성이 사용되면 자신의 크기에 상관없이 지정된 width로 표시된다. 따라서 이미지를 포함하는 컨테이너가 이미지보다 클 경우 이미지를 본래 크기보다 더 크게 확대시킨다는 점이 있다. 브레이크 포인트는 인기있는 디스플레이에 맞추기보다 콘텐츠와 디자인에 따라 적당한 브레이크 포인트를 결정하자. flex : 0 0 auto 첫번째 숫자는 flexbox사이에서 비율을 의미한다 1 1이면 같은 비율 2 1이면 첫번째 박스가 2번째 박스보다 2배로 크다. 두번째 숫자는 shrink로 여유 공간이 없을때 항목이 수축..
-
11장 원시 값과 객체의 비교FrontEnd/JavaScript 2021. 12. 30. 16:20
원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 이에 비해 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수에는 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 값에 의한 전달이라 한다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달되며 이를 참조에 의한 전달이라 한다 11.1 원시 값 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 변경불가능하다는 것은 변수가 아니라 값에 대한 진술이다. 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 ..