Land of Joe

참 다사다난한 10월이었다. 5일만에 NEXT 진도를 나가고 (~10/11) 프론트엔드 심화 평가문제 기간이 있었으며 (10/14 ~ 10/16) 그와 더불에 평가기간 직후에 있을 프로젝트를 위한 준비와, 프로젝트 기간, 그리고 중간발표까지 숨가쁘게 달렸다. (10/17 ~ 10/30) 나는 중간에 교통사고가 나서 며칠 쉬었지만 말이다....ㅎ 현직자 상담이 있고 나서 수업 교재에 대한 피드백에 따라 실제 책을 나눠주시기 시작했다. 자바/스프링 알못에게 적합한 책은 아닌 것 같지만....감사 또 감사~ 10/01 첫째주 러닝 광진즈가 아닌 I햄과 D가 처음 조인한 날 중랑천으로 들어가 한양대 방향으로 달렸다. 6시 퇴근 직후의 노을 지는 뷰가 참 아름다웠다. (나는 죽을 것 같았지만) 달리고 난 후엔 예..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

보호되어 있는 글입니다.

오늘의 학습 NEXT.js에서 api 통신으로 fetch를 사용하는 이유리액트에서 많이 쓰이는 fetch와 axios는 모두 CSR 기반의 애플리케이션에서만 사용 가능한 Web API 임리액트의 fetch API를 기반으로 wrapping해서(알맞게 가공해서) NEXT.js에서도 사용가능한 fetch API를 만듦결론: NEXT.js의 fetch와 리액트의 fetch는 서로 다르다API Route HandlerNEXT.js 자체적으로 RESTful한 API 를 제공하기 위한 방법api method와 path만으로 그 api 의 역할을 유추할 수 있게 개발한 것 == ‘restful 하게 개발했다’무한스크롤 구현무한스크롤을 적용하는 페이지의 기준: 해당 페이지에 보이는 데이터가 하나의 종류일 때npm 패키..

학습 내용RSC와 RCCNEXT의 컴포넌트 트리 설계 전략시스템 파일: page, layout, not-found, loading, errorlayout.tsx페이지에 따라 metadata title 다르게 설정하기모든 페이지마다 유지하고 싶은 메타데이터 타이틀 일부not-found.tsxerror.tsxroot 경로에서 에러 헨들링하기: global-error.tsxloading.tsx컴포넌트 로딩시간 단축을 위한 방법Promise.all을 이용한 병렬요청컴포넌트 분리를 통한 소요시간 단축  태그 사용fallback 속성: 로딩되는 동안 보여줄 것 (컴포넌트 사용도 가능)먼저 패칭된 것이 먼저 보인다.가장 오래 걸리는 컴포넌트가 끝나야 전체가 끝남Dynamic HTML Streaming: 컴포넌트의 로..

학습 내용 NEXT와 리액트와의 차이점(SSR, CSR) SSR 외에 NEXT만이 가진 특징 : 하이드레이션(hydration) 서버 사이드 랜더링의 과정을 두 단계로 분리하여 구분하였음 첫 응답으로는 정적 페이지를 보여주고, js 요청이 들어오면 그때 보내준다!