Land of Joe

오늘의 학습 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 요청이 들어오면 그때 보내준다!

4L : 학습한 내용의 생각/경험을 회고하는 템플릿1. 이번주 수업에서 좋았던 점은? (Liked)2. 이번주에 새롭게 배운 점은? (Learned)3. 배운 것에 관해서 내가 부족했던 부분은? (Lacked)4. 앞으로 뭘 더 하면 좋을까? (Longed for)    본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 과정(B-log) 리뷰로 작성 되었습니다. #유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프 #Next.js #프론트엔드개발자양성과정 #개발자교육과정

학습 내용 Zustand  전역상태관리 라이브러리useEffect 리액트 컴포넌트의 생성/ 업데이트/ 제거되는 시점에 특정 작업을 수행할 수 있도록 하는 훅useEffect를 이용한 API 통신리액트 라우터동적 라우팅useParams 파라미터 값 가져오기useSearchParams 쿼리스트링 값 가져오기useNavigate 함수를 통한 이동 useLocation 현재 페이지 url 알기 블로그 만들기 실습 Zustand를 이용한 블로그 글 목록 전역상태관리검색창 입력 및 결과값 출력하기 -> 드바운스 Debounce 기술   어려운 건 어제가 레전드였던 듯.. 직접 블로그 만들어보며 zustand도 써보고, 이것저것 직접 구현해나가니차곡차곡 완성해나간다는 기분이 들어 너무 재밌고 행복한 기분이었당 수업..

학습 내용리액트의 불변성데이터 변화를 감지할 때 원본데이터의 참조값이 변경되지 않았다면 값이 업데이트되지 않았다고 생각함주소값 내부가 바뀌었더라도 주소값이 바뀌지 않으면 업데이트되지 않았다고 생각함기본자료형은 상관없는데 (값이 바뀔 때마다 새로운 데이터라고 인식하기 때문)배열이나 객체(참조자료형)를 바꿀 때엔 항상 새로운 배열, 객체로 생성할 것!랜더링 최적화 메모이제이션특정값, 데이터를 기억하도록 보관하는 작업훅 useCallback(() => {}, [])훅 useMemo(() => {}, [])함수 React.memo()언제 다시 메모이제이션 되고 풀리는가에 대해 알기useReducer하나의 상태값을 단 하나의 함수에서 관리하는 것이 목적Context APIprops drilling데이터를 관리하고..

오늘의 학습체크박스 컴포넌트 만들기두 가지 방법 : 1. label태그로 input태그 감싸기 2. input태그와 label태그 따로 쓰기label태그의 글자 클릭해도 체크박스가 동작하게 하는 방법 : input태그의 id속성값과 label태그의 for(리액트: htmlFor)값이 같으면 함께 동작함(테일윈드) appearence-none : 의 기본 디자인 제거조건부 랜더링반복 랜더링

어제 개인 사정으로 수업에 빠져서 6일차 기록은 없당...ㅠ 오늘의 학습 (핵심 내용 & 인사이트)프로젝트 생성테일윈드 설치폰트import 및 css 파일 설정하기컴포넌트 생성 기준에 대하여컴포넌트의 이벤트: onClick, onDoubleClick, onChange 등..form태그를 이용한 로그인 처리props를 이용한 데이터 전달같은 변수 props로 받는 컴포넌트가 여러 개라면??interface / type으로 정의된 것을 따로 모아둔 파일 (index.d.ts)에서 import 해서 쓰기위 방법을 이용하는 3가지 상황props의 타입이 여러 군데에서 사용되는 건 아닌데, props가 너무 많아서 코드의 가독성을 해칠 때복잡 유무를 떠나서 그냥 여러 군데에서 사용되는 경우그냥ㅋ 하고싶어서ㅋ (원..