React프로젝트 만들기

리액트 프로젝트 만드는 방법 : create-react-app 사용(CRA)

Node.js 오픈소스 라이브러리 쉽게 설치하는법 : node pakage manager (npx) 사용

 

npx create-react-app 프로젝트명 --template typescript를 터미널에 입력하면, 프로젝트가 새로 생긴다.

리액트 프로젝트의 기본구조.

 

package.json에 scripts 항목을 보면, start와 build에 대한 정의가 되어있다. 

npm run start -- 개발모드

npm run build -- 빌드모드

 

빌드모드 : 웹팩이 프로젝트 디렉터리 파일을 모두 모아 이름에 main이나 chunk라는 단어가 들어있는 번들 파일을 만듦.

번들 파일이란 ; 웹팩이 다양한 입력모듈(이미지,css,html파일 등)을 모아 단순한 형태의 모듈로 바꾸어 준 결과물

빌드를 입력해주었더니, 다음과 같은 build내의 js에 번들 파일이 실행되었다. 

 

서버 설치

install -g serve

serve -s build

 

* 서버 중단) 터미널에서 Ctrl + C 

local로 들어가보면?!

짜잔

 

이렇게 만든 build를 nginx나 아파치 서버와 같은 웹서버에 올리면 바로 서비스가 가능하다. 

 

 

빌드모드가 아닌 개발모드로 실행하면, 웹팩이 서버로 동작하여 출력된다. (터미널 내용이 조금 다름)

개발모드로 실행할 경우, react-scripts start가 내부적으로 웹팩을 서버 형태로 구동하기 때문에 명령이 종료되지 않고 계속 동작한다. 

 

개발모드에서는 "핫 모듈 교체" 기능이 있는데, 핫 리로딩이라고도 한다. 저장만 하면 개발 결과를 바로 바꾸어 보여주게 된다. (안될경우 새로고침) 

 

완전편하잖아...?

 

 프로젝트 파일 내, package.json에도 프리티어가 필요하므로, touch .prettierrc.js를 터미널에 입력하여 설치해준다. 

프리티어 내의 기본 설정을 마친다. 

module.exports = {
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'none',
  arrowParens: 'avoid',
  semi: false,
  printWidth: 90,
}

 

 

src/App.tsx에 아래 내용을 입력해주고, 실행해본다. 

export default function App() {
  return <h1>Hello React!</h1>
}

드디어 헬로 월드(리액트) 출력 완료!

시작이 반이라고,,, 벌써 뭔가 해낸기분 ㅎㅎㅎㅎ

 

 

 

Node.js용 외부 패키지 설치

npm i + ~~~를 입력할건데,

--save 는 실행에 필요한 패키지로 package.json 파일의 "dependencies"에 등록되고 (단축키 : -S)

--save-dev 는 개발에 필요한 패키지로 package.json 파일의 "devDependencies"에 등록된다. (단축키 : -D)

터미널에 다음과 같이 입력

 npm i chance luxon
 npm i -D @types/chance @types/luxon

참고로 개발 패키지를 타입스크립트에서 사용하기위해서는 @types/로 시작하는 라이브러리를 추가 설치해야 한다 !

 

책을 보고 따라해서 랜덤 데이터 송출 성공!

 

 

 

 

 

* 참고로 협업을 할 때는 node_modules를 빼고 올린다고 한다. (파일 용량도 크고... 디스크 정리를 위해!)

rm -r -force node_modules
rm package-lock.json

터미널에 이와 같이 입력하고 두개 파일을 지워주자. 

(지우면 App.tsx에 오류가 발생하는데, 무시해도 된다!)

 

 

 

 

 

 

다음장부터는 리액트의 동작 원리를 알아본다고 한다 :) 기대기대