jhdev-code 님의 블로그 jhdev-code 님의 블로그

시작하기에 앞서, Section04 강의를 모두 수강하고 정리를 완료 했으나, 메모장이 삭제가 되어 강의를 다시 수강하며 간략하게 내용을 정리 했습니다. MSW세팅과 .env백엔드 개발자가 아직 API를 완성하지 못한 경우, 프론트엔드 개발자는 MSW(Mock Service Work)를 이용하여 API 요청을 테스트할 수 있다.  MSW란? 백엔드 API가 없어도 프론트엔드 개발자가 API 요청을 보내고 응답을 받을 수 있도록 도와주는 라이브러리이다.대신, 요청에 대한 응답을 직접 만들어줘야 하고, 실제 데이터베이스는 다루지 않고, 요청을 보내면 어떤 데이터가 올 것이다 이런식으로 코딩을 해놓는거다.  MSW 동작 방식 :MSW 설정을 하면, API 요청이 실제 서버로 보내지는 것이 아닌, MSW가 요청..

레이아웃 클론하기 엑스 닷컴에 들어가서 개발자 도구 들어가면, 어떻게 코딩을 했는지 알 수 있고 그거를 똑같이 만들어서 학습을 하면 된다.  가운데 정렬 flex-grow1 사용하면 균현을 맞춰준다. (왼쪽, 오른쪽 사이즈가 서로 다를 때에도 가운데 정렬을 할 수 있는 방법이여서 알아두면 좋다.) useSelectedLayoutSegment로 ActiveLink 만들기 Next에 useSelectedLayoutSegment 훅을 제공을 해주는데, 이 훅은 URL의 특정 레이아웃 segment를 가져오기 위해 사용하는 훅이고, 자식들만 나오게 하고 싶을 때 사용 하면 된다.  useSelectedLayoutSegments 이 훅은 손주까지 필요할 때 사용하면 된다.  홈탭 만들면서 Context API  ..

Next 프로젝트 시작하기클론 코딩의 장점은 억찌로 따라 해야 해서, 기획사가 없기 때문에 분석 하면서 해야 한다. 새로고침을 하면 어떻게 변하는지 그런것도 고려 해야 한다. public 폴더에는 Next 서버에서 누구나 접근할 수 있다. 사이트에서 사용될 이미지들은 전부 다 public 폴더에 넣어두면 된다. Next15 부터는 next.conif.ts가 생성이 되었다.  브라우저 주소 app 폴더에 반영하기페이지가 바뀌는데 안바뀌는 부분이 레이아웃이다. 다이나믹 라우팅을 제공한다. [username] / [id] 라우트 그룹로그인 후 로그인 전을 구별해 주면 된다. (afterLogin/beforeLogin) 소괄호는 주소창에 관여를 안하지만 그룹을 만들 수 있다.  template.tsx / Lin..

제로초님의 Next + React Query로 SNS 서비스 만들기로 공부를 하고자 한다.   # Chapter 01Next13 이후 주요 변화 : React 18 도입 및 서버 컴포넌트 활용  서버 컴포넌트란? 서버에서 리액트 컴포넌트를 미리 렌더링하고 완성된 HTML을 클라이언트로 보내주는 방식이다. 클라이언트가 데이터를 받아 화면을 구성하는 대신, 이미 렌더링된 HTML을 받아오기 때문에 초기 로딩 속도가 빨라진다.  서버 컴포넌트로 하면 Next 서버에 무리가 많이 가기 때문에, 서버 최적화(캐쉬 등) 필요하다. 그래서 Next에서는 서버 캐시를 적극적으로 활용하기 시작했다. 캐시는 동일한 요청이 반복될 때, 서버가 새로 데이터를 가져오지 않고 저장된 데이터를 재활용하도록 한다.  App Rot..