설정하기
기본 npm init 부터 기본설정을 해보려 한다. 나는 리액트 공부를 할때 주로 CRA를 썼었는데 필요없는 것들이 많이 들어있어 무겁기도 하고 처음부터 제대로 설정하는 법을 인지하는 것과 못한 것의 차이는 크다고 생각이 든다.
- front와 back 폴더를 구분하여 만들어 주고 먼저 front 폴더 안에서 npm init을 해준다.
npm i next react react-dom을 설치해준다.
- package.json에서 scripts안에 test를 지우고
"dev": "next"으로 바꿔준다.
스크립트를 실행하는 명령어는npm run이고npm run dev를 치면npm run next가 실행되는 것이다.
- next는 정확히 pages라는 폴더를 만들고 그 안에 페이지들을 정의해야한다. next가 pages를 인식해서 다 개별적인 폴더로 인식한다. 쉽게 말하면 코드 스플리팅된 컴포넌트로 만들어 준다.
기존에 next를 쓰지않은 리액트는 react-router-dom으로 페이지 라우터를 해줬었는데 그냥 pages폴더 안에 컴포넌트별로 작성만 하면 페이지 이름이 리소스 이름인 페이지 인것이다!
ESlint 및 Prettier
이 프로젝트에서도 코드 컨벤션을 잡기 위해 ESlint 와 Prettier를 사용한다.
관련 내용은 따로 포스팅해놨으니 참고하도록 하자 !
=> 참고 사이트
추가사항
next에선 import React from 'react'는 굳이 안써도 된다
next에서 _app.js는 초기에 기본 페이지들의 component로 사용된다. 꼭 기억하자
CORS 에러라는 것은 브라우저에서 domain 주소가 다르면 요청을 막아버리는 것이다.
=> 참고 사이트
브라우저가 리액트면, 프론트 서버는 노드, 백엔드 서버에 노드가 하나 더있는 것이다. (서버를 두개로 구축한다. 노드가 두개)
여기서 프론트서버란 웹팩 데브서버나 클라우드서버를 말한다. 프론트서버에서 백엔드서버로 요청을 보내는 것
즉, 서버 끼리 통신을 할 때는 cors에러가 발생 안된다는것도 기억하자.
=> 프론트 서버 / 백엔드 서버 의 개념
필요한 것은 노력과 선택과 치킨