dev_in 개발 블로그

주요 활동오전멀티 핸들 슬라이더가 초기화 이후에 maximum update depth exceeded 오류를 일으키며 요동 치던 문제를 해결해보려 했습니다.초기화 시 기존에는 없던 초기값으로 상태가 바꾸는데 이걸 반영하는 useEffect가 없어서 생긴 문제라고 생각됩니다. 오후키보드 목록 페이지 필터 기능 구현을 계속 이어갔습니다.필터 초기화 시 체크 되었던 필터값이 초기화 되도록 하였고 api 연동을 통해 필터 적용하기 버튼으로 실제 아이템들이 필터링되어 보이도록 기능을 추가했습니다. 수정사항swagger api상 타입의 중복 체크가 불가능해서 타입 체크 박스 부분을 단일 체크만 가능하도록 수정했습니다.필터링 결과가 없을 시 EmptyList 컴포넌트를 활용한 '선택한 필터 조건에 맞는 키보드가 없습..

주요 활동오전카테고리 필터 작업을 시작하였습니다.반응형에 따라 렌더링 유뮤가 달라지고 기능 및 레이아웃이 조금씩 달라져서 고민할 필요가 있었습니다.Filter (폴더)│├─ FilterFooterButton.tsx 모달 하단의 '초기화' & '필터 적용하기' 버튼을 담은 컴포넌트│├─ FilterOpenButton.tsx 모바일/태블릿에서 필터 모달을 열기 위한 버튼 컴포넌트│├─ FilterSidebar.tsx 데스크탑에서 좌측에 상시 노출되는 필터 영역 컴포넌트│└─ UseFilter.ts 필터 로직(상태관리, 핸들러 등)을 모아둔 커스텀 훅이전 처럼 작업 계획이 부족하여 스파게티 코드를 짜서 고생하는 일이 없도록 최대한 작업 계획에서 기능 별로 컴포넌트를 세분화 하였습니다.이후 반응형에 따라 필터 ..

주요 활동오전무한 스크롤 훅을 제거했습니다. (용도가 확실해 질 시 다시 추가)무한 스크롤이 같은 아이템 10개만 지속적으로 로딩하는 문제를 알아봤습니다.원인 추정fetchNext 함수가 nextCursor 값을 잘 받아오지 못하는 구조여서 fetchNext 함수가 최신 cursor를 안 보고 처음 클로저 상태를 보고 있을 수 있습니다.백엔드가 cursor값을 잘못 보내고 있을 수도 있습니다.1에 집중해보고const fetchNext = useCallback(async () => { if (loading || !hasMore) return; setLoading(true); try { const res = await axios.get( `https://winerevie..

주요 활동오전별점 5점 표시 컴포넌트 제작코드 리뷰오후pr후 수정 사항 적용목록 페이지 작업무한 스크롤 컴포넌트 확인느낀점디자이너가 의도한 바에 맞게 아이콘이나 이미지를 가져와야 한다는 걸 느꼈습니다.공통 컴포넌트는 활용도가 높도록 디자인해야 한다는 점을 느꼈습니다.팀 전체에서 타입을 통일하기 위한 “Single Source of Truth”개념에 대해 배웠습니다.공통 타입 파일을 만들어 두고 모두가 import 해서 사용하면타입 중복 정의를 막을 수 있고,한 곳에서만 변경해도 프로젝트 전체에 반영된다는 장점이 있습니다.

주요 활동오전팀원분들 pr 확인코드 리뷰피그마 도안을 보며 페이지 구성 짜보기오후코드리뷰 받은 사안들 정리하고 수정하기키보드 목록 페이지에서 카드 부분 제작 시작코드리뷰멘토링 참가멘토링때 들은 개선 사항에 대해 알아보기 느낀점코드 리뷰가 익숙하지 않아서 자세한 리뷰를 해드리지 못해 아쉬웠습니다. 모달창은 전역으로 관리하기 위해선 제가 생각하는 것보다 훨씬 복잡한 로직이 필요한 것 같습니다.

주요 활동오전진행사항 확인모달창 아이콘 작업 (LCP 문제를 해결하려면?)transition 애니메이션 속도가 너무 느린 문제 테스트 오후컨펌 모달창 작업 시작 (로직 분리가 필요해서 따로 ConfirmModal 컴포넌트화)컨펌 모달창 스타일링모달창 pr 올리기 onConfirm: () => void 가 의미하는 것. void 타입 지정의 이해onConfirm은 함수를 받을 거다.그 함수는 매개변수를 받지 않는다. ( () )그 함수는 아무 값도 반환하지 않는다. ( void )그래서 onConfirm: () => void느낀점테일윈드 css 를 다룰 때 []를 써야하는 부분이 있다는 걸 깨달았요 활동오전진행사항 확인모달창 아이콘 작업 (LCP 문제를 해결하려면?)transition 애니메이션 속도가 너..

7/19주요 활동오전공용 모달창 컴포넌트 테스트빌드오류 경험 및 해결You cannot have two parallel pages that resolve to the same path. Please check /(global)/page and /(modal-test)/page. Refer to the route group docs for more information: https://nextjs.org/docs/app/building-your-application/routing/route-groupsglobal)도 ()로 묶여 있고, (modal-test)도 ()로 묶여 있어서 둘 다 최종적으로 URL 경로상으로는 / 로 해석되어서 발생하는 문제 였음.폴더명으로도 빌드 오류가 날 수 있다는 것을 배우고 ..

주요 활동오전사용한 기술들 정보 검색라이브러리 알아보기 오후공용 모달 컴포넌트 제작 Transition을 사용하여 애니메이션 효과를 주되 tailwind 좀 더 써봐서 익숙해지기 모달 사이즈 조절 기능을 넣어 각각의 모달창 크기에 맞출 수 있도록 해보기 모달 내부 내용은 children으로 처리사용할 라이브러리 관해서 팀원분들과 회의 멘토링 참가**느낀 점사용할 기술에는 그에 합당한 이유가 있어야 한다는 것을 배웠습니다.팀 프로젝트에서 사용하고 싶은 기술이 있다면 팀원분들과 잘 협의해야 한다는 것을 배웠습니다.

7/17주요 활동오전tailwindcss 공식문서를 참고하거나 구글링을 통해 tailwind css에 대해 공부함.오후코어 타임 회의를 통해 팀원분들과 시작 레포지토리 세팅을 진행함.4시에 이루어진 중급 프로젝트 팁 설명회 청강.프로젝트 진행 전 마지막 스터디 자료를 정리함. 배운점PR 사항은 리뷰하는 사람이 머지하지 말고 올린 분이 하도록 할것. 브랜치 및 다른 요소도 잘 살펴볼 것.

서론5월 29일에서 6월 13일까지 약 2주간의 기간 동안 코드잇 부트캠프 프론트엔드 과정에서 진행하는 기초 팀 프로젝트를 진행하였습니다. 개발을 공부하기 시작하고 처음으로 해보는 팀 프로젝트였기에 기술적 어려움은 물론이고 초기에는 소통이나 정보 공유에 있어서도 어려움을 겪었습니다. 하지만 프로젝트 기간동안 팀원분들과 매일같이 작업을 하고 의견을 나누며 기술적 문제는 서로 알아보며 해결을 하였고 소통의 문제는 회의때 규칙을 정하거나 따라야할 컨밴션 등을 정하며 해결해 나갔습니다. 팀장으로서 회의를 이끌거나 팀원분들을 격려해주는 일이 많았는데 그때마다 잘 따라와 주시고 적극적으로 협력해 주신 8팀 팀원 분들 덕분에 이런 문제점을 끝까지 가져가지 않고 프로젝트 도중에 해결한 것 같습니다. 우리 8팀은 최종 ..