fpzmfks 님의 블로그

오늘은 과제 풀이 영상과 함께 개인과제 재제출 기간이 찾아왔다. 재제출을 하지는 않겠지만 이왕 시간이 난 김에 내가 한 과제와 영상을 비교하며 코드를 더 살펴보았는데, 몇 가지 기록해둘 만하다고 생각한 것들이 있어서 오늘의 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라고 부르는 기능을 이용하여 간단하게 서버를 만들 수도 있다. 라우터 핸들러의..

오늘은 하루종일 강의를 보면서 약간씩 실습을 하며 Next.js를 익혔다.  오늘 배운 것은 Next.js 중에서도 라우팅, 렌더링, assets최적화에 대한 것인데, 난이도로 따지자면라우팅  라우팅라우팅은 폴더 단위라는 것만 빼면 이전에 react-router-dom에서 사용하던 것과 거의 비슷해서 크게 어렵지 않았는데, 몇몇 편의 기능들이 흥미로웠다. layout, error, loading과 같은 tsx파일을 생성하면 따로 임포트해서 적용하지 않아도 파일의 위치에 따라 자동적으로 해당 기능들이 사용되는 것이다.  다만 메타데이터(브라우저 탭에 적힌 제목 같은 것)를 다루는 것은 좀 번거로웠는데, 그냥 string과 같은 하드코딩을 하는 데에는 어려움이 없지만, `${id}`같이 내가 원하는 값을 넣..

오늘과 어제 남는 시간에는 타입스크립트로 과제를 하고 Next.js 라우팅 부분만 가볍게 들어보았다. 오늘은 이에 대해 가볍게 정리해볼 것이다.  타입스크립트타입 스크립트는 동작할 때가 되면 적당히 타입을 추론해주는 자바 스크립트와 달리, 작성할 때 타입 스크립트 => 자바스크립트로 변환하며 타입을 확정하게 하는 정적 언어이다. 이러한 타입 스크립트는 변수 등의 데이터를 항상 정확하게 넣도록 해서 안전한 프로그래밍 환경을 제공한다. 사용해보니 확실히 로컬 환경에서 일일이 console을 찍지 않아도 데이터의 잘못된 부분을 짚어줘서 편하게 코드를 작성할 수 있었다. 아래의 그림과 같이 타입스크립트 환경에서는 프로그램을 실행하기 전에 오류를 잡아줄 수 있으니 혹시라도 백엔드와의 통신에서 중대한 오류 같은 것..