fpzmfks 님의 블로그

오늘은 프로젝트 세팅을 하며 시간을 보냈다. 몇 가지 기억에 남는 일이라면 폴더 구조 확정, 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)기능과 이미지 크기를 자..

오늘은 개인과제에 집중해서 과제를 반 정도 해내었다. 3개의 데이터 목록을 완성하고, 1개의 상세페이지를 불러올 수 있게 되었으므로 이로써 3.5/6를 완성한 것이다. 앞으로 2개의 상세페이지 데이터를 불러오고 상세페이지 css를 가다듬으면 과제가 일단락된다. (또 저번에 겪었던 route handler 문제는 client컴포넌트에서 사용하니까 정상적으로 작동했다. 역시 server컴포넌트에서는 route handler를 사용하면 안 되는 것이었던 모양이다.) 이번 과제는 get 요청으로 페이지를 구성하는 단순한 것이라서 과제 진척 자체는 빨랐다. 만약 javascript로 만드는 것이었으면 오늘 하루만에 끝낼 수도 있었을 것 같다. 다만 typescript환경에서 api 통신으로 데이터를 받아와서 활용..

오늘은 모든 강의를 완강하고 본격적으로 개인 과제를 시작했다. 이번 과제는 lol 게임 정보 사이트를 만드는 것으로, 이전에 라우터 처리는 해두었기 때문에 오늘은 fetch에 집중했다.   첫번째 난관은 가져오는 데이터의 형태가 객체 안의 객체의 형태라서 map을 돌리기가 난감했던 것이다.  이전에는 가져오는 데이터의 형태가 [{},{},{}]의 객체 배열 형태라서 map을 통해 쉽게 배열 요소의 각 객체 데이터를 빼내올 수 있었는데 이번에는 { name:{}, name:{}, name:{} }의 객체 속 객체의 형태라서 map으로 데이터를 바로 빼내올 수 없었다.  그래서 이번에는 Object.value()로 객체 속의 한 단계 아래 요소들을 뽑아와서 객체 배열로 바꾸어줄 필요가 있었다.  그래서 친숙..

오늘은 zustand에서 발목이 잡혀서 한참을 zustand과제를 하는 데에 사용했다. 강의 들으면서 코드를 봤을 때도 느꼈는데, 이전에는 간단했던 zustand가 Next.js로 오면서 많이 어려워진 것 같다. 특히 type script로 값의 타입을 설정해두어야 한다는 것이 너무 큰 난관이었다.  아래는 우여곡절 끝에 완성한 zustand store 코드이다. 보다시피 타입 선언만 3번을 하고, 처음쓰는 주제에 이렇게 선언한 타입을 어떻게 줄일 수 없을까하다가 크게 코드가 꼬여서 튜터님의 안내를 받아 type 정리를 다시 할 수 있었다. export interface CountProps { count: number;}export interface CountState extends CountProps..

오늘도 열심히 강의를 들으면서 Next.js의 사용법을 배웠다. 한 번에 배운 내용이 많아서 채 다 정리하지는 못할 것 같아서, 두 가지를 추려서 여기에 정리하고자 한다.  fetch먼저 fetch이다. 어쩐지 이전에 쓰던 fetch와는 쓰는 법이 좀 다르다 싶었는데, Next.js에서 사용하는 fetch는 Next.js에서 독자적으로 만들어진 것이라고 한다. 그래서 fetch의 옵션에 cache:"no-store"과 같은 것들을 넣을 수 있었던 것 같다.  또 Next.js의 특징은 서버의 기능을 할 수 있다는 것이다. Next.js는 프론트엔드에 치중되어 있으면서도 서버의 기능도 발휘할 수 있어서, router handler라고 부르는 기능을 이용하여 간단하게 서버를 만들 수도 있다. 라우터 핸들러의..