NextJS

이 Framework 는 풀스택 웹앱을 개발하기 위한 최선의 Framework 라고 한다. 이 코스가 끝날 때에는 모든 프로그램을 NextJS로 만들고 싶어질거라 한다.React Framework 중에 1등이라 하는 NextJS최신 업데이트로 많이 발전했다고 한다.(1

Routing, Navigation, Layout, client, server components 등에 대해 배울 예정이다.client, server 는 NextJS에서 나온 개념이라고 한다.NextJS는 프레임워크라서, 올바른 폴더에 정확한 이름의 파일이 들어가 있으

단순 HTML을 React applaction으로 초기화 하는 작업이다.예를 들어 React 를 Initialize하여 onClick를 부착해 여기서 작성 가능 한 기능을 수행하도록 하는 것이다./aout-us 접근 => <button>0</button> =

layout.tsx 라는 파일을 만들면그 하위에 적용된다.이렇게 있는 경우 루트의 layout 에서 컴포넌트를 임포트 하여 그것이 제일 상단으로, 그리고 아채 children이 추가된다.그리고 about-us라는 루트 하위의 폴더에서 layout을 만들고 하위 url로

layout, not-found 는 꼭 루트 폴더에 있어야 한다.그룹을 만들고 싶으면 (home) 처럼 폴더 이름을 괄호로 묶어줘야 한다.폴더 이름을 지정해주면 url이 바뀌지 않고, 프레임 워크에서만 보인다.그래서 루트에 있던 홈 컴포넌트를 (home) 폴더로 옮길

변수가 라우터에 들어갈 때 사용한다.파일시스템으로 동작한다.\[id] 이런 식으로 동작한다.콘솔로 찍어보면이렇게 나온다.id, sesarchParams을 얻게 되는데, searchParams는 url 뒤에 ? 데 대한 내용이다..15 버전 이상 부터는 params 와

Data Fetching fetch, streaming, suspense, boundary 등을 배울것이다. 쉽고 멋지다고 한다. NextJS 의 fetching을 위해 영화 상세보기 API를 이용하자. > [출처-노마드코더] : https://nomad-movie

업로드중..이렇게 하면 start fetching 이 출력되고 end fetching이 순차적으로 출력되며총 10초 넘게 걸리게 된다. 병렬 요청으로 바꿔줘야 한다.promise.all을 사용하면 결과값이 동시에 나올 것이다.이렇게 요청을 보내면동시에 시작하게 된다.순

API 요청이 안되거나네트워크가 끊기는 등에러가 생긴 경우의 핸들링은error.tsx 파일을 만들면 된다.프레임워크 특성상 파일 위치는 페이지 대상이 되는 폴더 안에 넣어야 한다.

Css Module application 전체에 적용할 global style 을 만든다. 전체 웹사디트의 bg color 나 폰트를 적용하도록 한다. app/layout 에서 import global css를 한다. 공통 디자인을 적용해준다. 특정 디자인에 적

git에 push 를 마쳤다면,Vercel이 호출할 수 있도록 package.json 에 명령어를 수정한다vercel 은 그냥 deploy 버튼만 누르고 기다리면 된다.그리고 나타나는 오류들을 해결하면 dashboard에 보인다.