fpzmfks 님의 블로그

오늘은 프로젝트를 종료하며(그리고 부족한 시간으로 인해 발표 직전까지 계속 코드를 고치며) 프로젝트를 회고하고 지적받은 점들을 기록해두려고 한다.  우선 아래는 팀에서 작성한 회고이다. Keep - 현재 만족하고 있는 부분필수 구현 사항을 기한 내에 구현해서 프로젝트를 잘 마무리할 수 있었다.팀 내에서 의논할 것이 있으면 의사소통을 통해 문제를 해결할 수 있었다.다양한 상황에 맞춰 유연하게 문제를 해결하고 대처할 수 있어서 좋았다.Problem - 불편하게 느끼는 부분의사소통 과정에서 이야기가 너무 길어지는 경우가 있었다.팀원들과의 기획 단계에서 어떤 기술을 사용할 것인지에 대한 내용을 미리 더 생각했으면 좋았을 것 같다.Try - Problem에 대한 해결책, 당장 실행 가능한 것되도록 사실 관계를 확..

오늘은 어제 얼추 마무리한 프로젝트를 최종 병합한 것을 붙들고 트러블 슈팅을 한 후에 배포를 했다.  여태껏 테스트가 충분하지 않아서 부족함을 느꼈던 부분이 이번에 확실히 드러났는데, 마이페이지에서 새로고침을 하면 zustand에서 받아오는 userId가 빈 문자열 ' ' 이 되었다가 제대로된 userId 'dfasofiasoeijfwoeif'로 받아와지는 현상이 있었다. 이로 인해userId로 불러와지는 post 데이터들이 리렌더링을 해주지 않으면 반드시 보이지 않는 상태가 되어버렸다.  이를 해결하기 위해서 나는 처음에 zustand에서 초기값 설정을 잘 해주면  userId가 빈 문자열 ' ' 이 되었다가 제대로된 userId 'dfasofiasoeijfwoeif'로 받아와지는 현상 이 일어나지 않..

오늘은 그동안 한 것들을 그러모으고 트러블 슈팅하면서 내가 맡은 모든 기능을 완성했다.  스크랩 기능(supabase 정책)먼저 지난번에 status:204는 뜨는데 실질적으로 supabase에는 반영되지 않던 오류는 예상대로 supabase 테이블 정책을 설정해주지 않았기 때문이었다.  스크랩 기능(ERD 구조 변경)이렇게 delete 정책을 설정해주니 CRUD가 잘 되는 것을 확인할 수 있었다. 또한 이렇게 스크랩 기능으로 고생하는 중에 로직을 단순화시키자 싶어서 ERD 구조를 바꾸었다. 북마크된 게시글을 배열varchar[]로 관리하려던 것을 1:1 관계를 가지도록 변경한 것이다. 아직 잘은 모르겠지만 튜터님은 이렇게 변경한 것을 보시더니 이게 정석적인 스크랩 기능 ERD 구조라고 하셨다.  필터 ..

주말 동안 잠깐잠깐씩 프로젝트를 진행하고, 오늘에 이르러 본격적으로 프로젝트를 시작했다. 좀 더 정확하게 말하자면 이전까지는 데이터를 받아와서 뿌려주는 것까지만 했고, 오늘부터 업데이트, 삭제, 필터링 기능을 구현하기 시작한 것이다.  그런데 본격적으로 '좋아요' 기능을 구현하려고 하니 자꾸만 state:204가 뜨면서도 supabase에는 반영이 되지 않는 오류가 생겼다. 튜터님께 문의해봐도 원인을 찾지 못해서 한참 이것저것 테스트를 해보다가 supabase 강의를 다시 보게 되었는데, 애초부터 supabase 세팅을 잘못했다는 것을 알게 되었다. next.js에서 supabase를 사용하려면 server컴포넌트와 client컴포넌트에서 각각 다른 supabase를 사용해야 하고, middleware ..

오늘은 프로젝트 세팅을 하며 시간을 보냈다. 몇 가지 기억에 남는 일이라면 폴더 구조 확정, github default branch push 제한, 그리고 typescript에서의 supabase이다.  프로젝트 폴더 구조먼저 프로젝트의 폴더 구조를 짜는 데에서 약간 고민할 거리가 있었는데, Link를 타고 여러 곳에서 접근해야하는 게시물 디테일 페이지를 어느 폴더에 만들어야 하는지가 고민이었다.  (detail)폴더로 페이지를 묶으려고 해도 다른 라우터 폴더를 거치지 않고 [id] 폴더를 생성하면 '~~.com/123'과 같이 유효하지 않은 세그먼트가 생겨버린다.  테스트를 통해 이러한 경우 404 not found 오류가 발생하는 것을 확인했다. 때문에 결국 기존에 하던 대로 list 폴더 하위에 [..

오늘은 최종 프로젝트 직전 심화 프로젝트를 시작했다. 프로젝트 기획은 회의를 통해 진행하다가 피그마를 통해 와이어프레임을 작성하면서 자세한 사항을 논의했다.  우리 팀이 기획한 프로젝트는 패션 커뮤니티로, 주요 기능은 오늘의 패션을 간편하게 추천받을 수 있는 페이지이다.  위치기반 날씨 API와 zustand, tanstack-query를 사용하고,이를 기반으로 날씨와 온도로 게시글 필터링, 마이페이지 즐겨찾기 게시글/내 게시글, 게시글 CRUD, 코디 추천 테스트 기능들을 구현한다. 나는 이 중에서 마이페이지를 맡게 되었다.  또 다른 팀원 분 한 명과 함께 ERD를 구성하는 것도 했는데, 처음 하는 것이라 좀 헤매긴 했어도 저번에 db구조를 짜던 것과 크게 다르지 않다보니 생각보다 쉽게 해낼 수 있었..

오늘은 과제 풀이 영상과 함께 개인과제 재제출 기간이 찾아왔다. 재제출을 하지는 않겠지만 이왕 시간이 난 김에 내가 한 과제와 영상을 비교하며 코드를 더 살펴보았는데, 몇 가지 기록해둘 만하다고 생각한 것들이 있어서 오늘의 TIL로 남기기로 했다.  첫번째는 use client를 사용한 클라이언트 컴포넌트가 static으로 빌드된 것이다.기존에는 아래와 같이 직접적으로 페이지에 use client를 쓰지 않고 하위 클라이언트 컴포넌트를 만들어서 가져왔기 때문에 어련히 기본 모드인 ssg로 빌드되었겠거니 했는데, 아래와 같이 페이지에 직접적으로 use clinet를 사용해도 static으로 빌드된 모습을 확인할 수 있었다. 튜터님께 문의해보니 이게 의아하게 느껴지는 것은 서버 컴포넌트와 서버사이드렌더링을 ..

라우트 핸들러원하는 response값이 아니라 request값만 불러와지는 문제알고보니 라우트 핸들러는 서버 컴포넌트에서는 사용하면 안 되고 클라이언트 컴포넌트에서만 사용할 수 있었다. use client를 사용한 컴포넌트에서 불러오니 정상적으로 request값이 불러와졌다.  "use client"환경 const [rotation, setRotation] = useState([]); const getRotation = async () => { const { data }: { data: Champion[] } = await fetch("/api/lolAPI").then( (res) => res.json() ); console.log(data); setRotation(da..

오늘은 다크모드를 구현해보고(비록 디자인은 각이 안 나왔지만) 챌린지반 기술면접 시험을 보았다.  먼저 기술면접을 짚고 넘어가자면, 리액트 훅이나 useContext, zustand의 차이 같은 것들은 잘 대답할 수 있었지만, 풀라우트 캐시나 cjs, esm, 이벤트 루프에 대해서는 대답하기가 좀 힘들었다. 요즘 과제나 강의의 난이도가 점점 올라가다보니 예전에 깊이 공부하던 것과는 달리 따로 공부하지 않았던 것도 한 몫 했던 것 같다. 사실 지금 최적화나 배포 환경 테스트, 반응형 구현, 에러 핸들링 같은 것들을 하는 것도 힘들어서 공부할 시간을 더 낼 수 있을지 모르겠지만, 오늘 면접하면서 배우기도 했으니 열심히 해보아야겠다.   다크모드 구현다크모드/라이트모드 구현을 위해선 아래 3가지를 고려해야 한..

오늘은 무사히 과제 필수 요건을 완수하고 최적화를 어느 정도 진행했다.  다만 한 가지 아쉬웠던 것은 item 상세페이지를 구성할 때, API 요청 시 특정 아이템만 지정하는 방법을 끝내 찾지 못해서 item을 다 불러온 후에 filter를 돌려야 했던 것이다. 하지만 Next.js의 리퀘스트 메모이제이션(같은 요청은 통합)과 데이터 캐시 기능(응답 데이터 캐싱)을 통해서 자동으로 최적화가 되었으리라고 믿는다.  최적화로는 필수 요건을 충족하면서 사용한 next/image의 Image 컴포넌트, loading.tsx, error.tsx, suspense를 일단 사용해보았다. Image컴포넌트는 이름 그대로 img를 최적화하는 것으로 보이는 것을 먼저 가져오는 뷰포트(혹은 lazy)기능과 이미지 크기를 자..