빌드하기, 실행하기
기존 리액트에서는 JSX 문법으로 코드를 작성하는데
JSX는 웹 브라우저에서 그대로 실행할 수 없기때문에트랜스파일(Transpile)과정을 거쳐서 JS파일로 바꾸어
웹 브라우저가 실행시킬 수 있게 바꾸는 과정이 필요하다그래서 Next.js도 빌드과정이 필요하다.
빌드
- 리액트 코드를 브라우저가 실행할 수 있게 변환
- 서버 실행에 필요한 코드들 생성
- npm run build
빌드하면 .next 폴더 안에 빌드한 파일들이 들어가있다.
- 서버 시작하기
npm run start
주의!)
빌드가 된 상태에서만 실행가능하다.여기서 나온 주소가 "Next.js서버"이다.
Next.js의 역할
웹 브라우저로 사이트에 접속했을 때
그 주소에 해당하는 페이지에 html을 보내주는 일을 한다.
그럼 웹브라우저는 페이지를 보여준다.
웹 브라우저에서 API서버로 리퀘스트를 보냈는데
데이터를 받아오면 이것으로 화면을 업데이트해서 보여줬었다.
이미지 컴포넌트를 사용하는 경우
웹 브라우저는 Next.js서버 주소로 이미지를 요청하고
Next.js서버는 쿼리 문자열에 적혀있는
원본 이미지 주소로 가서 이미지를 받아온 다음
웹 브라우저에 최적화한 파일을 보내주게 된다.
npm run dev >>> 개발 모드(웹 사이트를 운영할 때는 이런 기능이 필요없다.)
npm run start >>> 빌드 후에 프로덕션(운영)모드로 실행
최종적으로는 실행 명령어를 내 컴퓨터에서 입력하는 것이 아니라
별도의 서버를 마련해서
빌드와 실행을 하도록 만든다.
이 과정을 배포(Deployment)라고 한다.
Github에 레포를 만들고
vercel 홈페이지에 들어가 import를 누르고
deployment해주면 배포가 된다.코드를 수정하고 다시 git add . git commit git push origin main 해주면
다시 새로운 배포가 생성되는 것을 확인할 수 있다.GitHub 리포지토리와 연동해 놓으면,
리포지토리가 업데이트될 때마다 빌드와 실행 과정을 Vercel이 알아서 수행한다.
