TIL152 230210 오전에는 코드를 리팩터링하는 방법에 대해서 배웠다. 페이지에서는 해당 페이지에서 보여주어야하는 데이터를 불러오는 것 처럼 페이지가 해야 할 일만 보여주고 분리해야 한다는 것을 알았다. 컴포넌트를 나눌 때에도 에딧올로 예를 들면 컴포넌트를 선택하는 것, 카테고리를 선택하는 것 두 가지 일이 있다면 이 두 가지 일을 나누어 주는 것이 좋다. 상태관리하는 파일도 너무 복잡해서 리팩터링을 했는데 이름을 기준으로 수정해주었다. templateSlice인데 component에 대한 상태가 있다면 이를 componentSlice로 분리해주었다. 리팩터링을 어떻게 해야되는 것인지에 대해서 잘 몰랐었는데 짝 프로그래밍을 하면서 직접 해보니까 이해도 쉬웠고 많이 배울 수 있었다. 요즘 코테 풀이 정체기에 와서 어떻게 문제.. 2023. 2. 10. 230205 오늘은 어제 하던 과제 이어서 진행했다. 카테고리 nav 바를 계속 화면 상단에 고정시켜두고 싶었는데 nextjs에 layouts이라는게 있어서 사용해보았다. Layouts는 페이지간에 재사용되는 컴포넌트들을 관리(?)해준다. 그래서 Layouts 컴포넌트를 따로 만들고 props로 children을 넘겨준다음에 여기에 navbar나 footer를 같이 사용해주면 된다. 그리고 map을 사용할 때 key 값을 넣어주어야하는걸 계속 깜빡해서 오늘 map 사용하는 부분에 key 값을 다 넣어주었다. nextjs에는 404 페이지를 커스텀 할 수가 있다는 걸 알게되었다. 그래서 404 페이지에 진입하게 된 경우 5초 후에 메인페이지로 이동하는 기능을 추가해주었다. 모달 팝업에서 close 버튼을 오른쪽 상단으.. 2023. 2. 5. 230204 오늘은 다른 기업의 과제를 시작했다. 기능 구현하는건 한번씩은 해봤던 것들이어서 마음이 편안했다,, 근데 아직 css가 많이 부족하다는 것을 알았다. 특히 grid에 대한 지식이 많이 부족한 것 같다. display: grid를 할 수 있다는 것도 알게 되었다... grid-gap을 사용하면 margin, padding 비스무리하게 사용할 수 있는 것도 알았다. margin이나 padding을 사용할 때에도 아래와 같이 활용할 수 있는데 이걸 항상 까먹어서 mdn을 찾아보게된다. 아직은 관심사를 분리하는것도 어려운것같다. 보통 관심사를 분리해두고 코드를 작성하나..? 난 아직은 코드를 먼저 다 짜고 동작하는지 확인하면 그 후에 관심사 분리를 하는 것 같다. 그리고 onClick을 계속 svg에 넣어두고 .. 2023. 2. 5. 230203 오늘은 회고 겸 TIL 일주일동안 한 기업의 과제를했다. 필수 요구 조건은 별로 없었는데 한번도 안해본 기능들이라 조금 헤맸었던 것 같다. 캐러셀 구현을 했는데 이건 라이브러리를 사용해서 구현했다,, 무한 스크롤 기능은 라이브러리를 사용 안하고 직접 만들어서 했는데 잘 몰라서 시간을 좀 오래 사용한 것 같다. intersection observer API를 사용했다. intersection observer를 사용하면 target이 화면에 노출되었는지 여부를 간단하게 확인할 수 있다. 관심사 분리를 하는데 hook과 util함수 구분에 대해서 잘 몰랐던 것을 깨달았다. hook으로 분리할 수 있는것은 react의 훅을 사용해야하는 것들이고 util 함수로 분리할 수 있는 것들은 순수 자바스크립트만을 사용해.. 2023. 2. 3. 이전 1 2 3 4 ··· 38 다음
