FE/코딩일기

🌳7월5일 TIL🎶

상태 관리와 Context API💡 상태 관리의 필요성props drilling 방지상태 관리 라이브러리를 사용함으로써 props drilling을 방지할 수 있다.props drilling 은 컴포넌트가 특정값을 사용하기 위해 여러 상위 컴포넌트에서 props를 정의하고 전달받는 과정을 말한다. 이는 여러 컴포넌트에서 사용하지도 않는 props를 정의해야하고 필요없는 코드를 증가시킬 수 있다.때문에 이러한 필요없는 코드를 줄이고 해당 데이터를 사용하는 컴포넌트에서만 끌어와서 쓸 수 있도록 할 수 있는 역할이 상태 관리 라이브러리이다. 상태 관리 라이브러리에서는 store라는 state 저장소에서 사용하고 싶은 state만 끌어와 사용할 수 있기 때문에 props drilling을 피할 수 있다. 💡..

🌳7월4일 TIL🎶

🎁 선물 랭킹과 필터링필터링 기능 구현시 발생한 문제점❓ 현재까지 내가 짠 폴더 구조다.📦section ┣ 📂Ranking ┃ ┣ 📂Categories ┃ ┃ ┣ 📜GiftCategories.tsx ┃ ┃ ┗ 📜WhoCategories.tsx ┃ ┣ 📜RankingItems.tsx ┃ ┗ 📜RankingSection.tsxRankingSection을 가장 상위 컴포넌트로 지정하고 카테고리와 상품 목록을 보여주는 부분을 분리해서 컴포넌트화 한 뒤에, RankingSection에 import 해주는 방식으로 작성했다. 코드의 가독성을 위해 채택한 방법이였으나, categories에서 선택한 값으로 필터링 기능을 구현하지 못하는 문제가 발생했다. 😟문제를 해결하기 위해 리팩터링을 ..

🌳7월3일 TIL🎶

❓ Route 세팅 BrowerRouter를 사용하여 경로별로 route를 세팅해주었다.//App.tsx }> }> item을 클릭하면 onItemClick 함수를 통해 /theme/:themeKey 로 페이지 이동 {items.map((item, index) => ( onItemClick('life_small_gift')}> {item.category} ))}이때, 중복된 타입을 가진 아이템들이 여러 개 존재하므로 items.ts 에 별도로 타입을 정의했다. 현재 주어진 요구사항에서는 각 카테고리 아이템의 이미지가 동일하지만 추후에 각 카테고리에 따른 이미지가 달라진다면, 하나의 파일에서 편리하게 관리할 수 있을 것 같다.import itemIm..

🌳7월2일 TIL🎶

Emotion 라이브러리 설치📌 Emotion: 대표적인 CSS in JS 라이브러리 JS 안에서 CSS를 만들기 때문에 State에 맞게 동적으로 CSS를 변경할 수 있다.emotion/styled?The @emotion/styled package is for those who prefer to use the styled.div style API for creating components.styled.div사용을 선호하는 경우에 style API를 사용하면 된다. 나같은 경우도 div 태그를 자주 사용하게 될 것 같아서 emotion/styled 설치를 바로 진행했다. $npm i --save @emotion/react @emotion/styled Reset CSS란?📌 Reset CSS란 브라우저..

🌳7월1일 TIL🎶

🚀CRA를 사용한 프로젝트 세팅저번 주차 과제로 CRA(Create React App)을 사용하여 프로젝트를 세팅했다.출국을 코앞에 두고 급하게 진행했던터라, 여러 에러들을 마주했지만 차근차근 해결하지 못해 아쉬움이 남았다.오늘 코딩일기는 멘토님께 받은 피드백 위주로 기록을 해보려한다.📍dependencies와 devDependencies에는 어떤 차이가 있을까?dependencies에는 애플리케이션 동작과 직접적으로 연관된 라이브러리를 설치한다.npm install 라이브러리명devDependencies에는 프로그램 동작과 직접적인 연관은 없지만, 개발할 때 필요한 라이브러리를 설치한다. devDependencies에 설치된 라이브러리는 배포할 때 포함되지 않는다. eslint와 prettier와 ..