[리액트-신입]1일차 - 개발환경설정- II편( ver 22.07.01)

<웹개발자>

1. 프로젝트 생성 및 실행

1) 프로젝트 생성 - docker 기본

$ mkdir <project명>
$ cd <project명>
$ mkdir home
$ mkdir project

→ /home  /project ⇒ 권한 755

 

[필수 하위 디렉토리]

docker 컨테이너용 환경변수 경로	/home
소스코드 프로젝트 경로	/project

[결과화면-예시]

<프로젝트 구조>

2) docker image 생성

- 개발에 필요한  node 버전 선택 후 docker 빌드 수행

https://hub.docker.com/_/node 에서 node버전에 맞는 DockerFile 내용 복사

[참고] stretch : Debian 9 buster  : Debian 10 bullseye : Debian 11

- DockerFile 생성 

Dockerfile

… https://hub.docker.com/_/node 버전 내용… 복사  아래는 부분 은 주석 # COPY docker-entrypoint.sh /usr/local/bin/ # ENTRYPOINT ["docker-entrypoint.sh"] # CMD [ "node" ] 아래부분은 추가 # react install in Docker env RUN npm install -g react@version 또는  latest → version 은 최신보다 lts를 다운로드함 ( 다른 라이브러리와의 연계 위해서) → version은 짝수로 설치 (홀수는 대부분 신규기능 테스트용 ) # My workspace path in Docker RUN mkdir -p /www CMD [ "bash" ]

3) Docker Image 빌드

$ docker build –t react:[버전]  .

→ 명령 마지막에 .(dot) →현재 폴더의 Dockerfile를 나타냄

 

4) 컨테이너의 생성 및 실행

$docker run -it --rm -p 3000:3000 --name react-cli -v "$PWD/home":/root -v "$PWD/project":/www

                                                                                                                                   -w /www node:[버전]

⇒ 이명령어를 배치파일로 만들어서 편하게 사용가능

* react-cli → 컨테이너 이름→ 임의로 가능하지만 팀 표준으로 react-cli로 지정

* $PWD → 현재 host OS 의 경로

* -w ⇒ docker 컨테이너 내부에서 사용하는 기본  work directory 경로

배치
윈도우	1) 기본 버전 : react-cli.bat @echo off docker run -it --rm -p 3000:3000 --name react-cli -v $PWD\home:/root -v $PWD\project:/www -w /www react:[버전] → 윈도우의 경우 -v $PWD\home 와 같이 “(double quotation) 사용하지 않음  2) 파라미터 받기 @echo off docker run -it --rm -p 3000:3000 --name react-cli -v $PWD\home:/root -v $PWD\project:/www -w /www react:%1
리눅스/맥	1) 기본버전 react-cli.sh #!/bin/bash docker run –it –rm –p 3000:3000 –name react-cli -v "$(PWD)\home":/root -v "$(PWD)\project":/www  –w /www node:[버전] 2) 파라미터 받기 #!/bin/bash docker run –it –rm –p 3000:3000 –name react-cli -v "$(PWD)\home":/root -v "$(PWD)\project":/www  –w /www node:$1

5) docker 명령어 해석

docker 빌드

→ docker build : docker의 이미지를 만듬

-t, --tag :  저장소 이름, 이미지 이름, 태그 설정 <저장소 이름>/<이미지 이름>:<태그>

docker  실행

docker run –it --rm p 3000:3000 --name [container-name] –v “$PWD/home”:/root –v “$PWD/project”:/www –w /www [name]  → docker run : docker 컨테이너를 만듬 → 윈도우의 경우 -v $PWD\home 와 같이 “(double quotation) 사용하지 않음

-it : -i와 –t를 합친 것으로 터미널환경에서 컨테이너와 상호작용 --rm : 커맨드 실행 완료 후 컨테이너를 삭제시키는 옵션 -p[hostport]:{containerport] : 컨테이너 포트를 개방한 뒤 호스트 포트와 연결 --name : 컨테이너의 이름 설정 -v : 경로 마운트에 쓰임 -w : 기본 workspace를 변경 할 때 쓰임

 

2. Docker 컨테이너에서 react  프로젝트 시작

1) CSR ( Client Side Rendering )

- SEO가 필요없는 프로젝트 

- 예) 관리자용 앱

[필수 라이브러리]

1) redux : https://redux.js.org/ https://redux.js.org/introduction/getting-started 2) redux-thunk : https://github.com/reduxjs/redux-thunk 3) react router : https://reactrouter.com/docs/en/v6 $ npm install react-router-dom@6 4) React Testing Library : https://testing-library.com/docs/react-testing-library/intro/ $ npm install --save-dev @testing-library/react

실습

1) 프로젝트 생성 # Redux + Plain JS template npx create-react-app my-app --template redux # Redux + TypeScript template npx create-react-app my-app --template redux-typescript [주의] 생성후 visual studio code에서 수정이 되지 않을 경우   docker 안에서  chmod node:node <프로젝트폴더> 를 통해서  docker가 생성한 프로젝트의  권한을 node로 변경함

2) SSR ( Server Side Rendering )

- SEO가 필요한 프로젝트

[필수 라이브러리]

1) nextjs : https://nextjs.org https://nextjs.org/docs/getting-started 2) redux : https://redux.js.org/ redux-thunk : https://github.com/reduxjs/redux-thunk 3) next-redux-wrapper https://github.com/kirill-konshin/next-redux-wrapper 4) React Testing Library : https://testing-library.com/docs/react-testing-library/intro/ $ npm install --save-dev @testing-library/react 5) devtools @redux-devtools/extension

실습

1) 프로젝트 생성 # Plain JS template npx create-next-app@latest # TypeScript template npx create-next-app@latest --typescript [주의] 생성후 visual studio code에서 수정이 되지 않을 경우   docker 안에서  chmod node:node <프로젝트폴더> 를 통해서  docker가 생성한 프로젝트의  권한을 node로 변경함 2) CRUD  Api 모듈 생성 : https://docs.nestjs.com/recipes/crud-generator $ nest g resource <모듈명> → g : generate

3. Base Knowledge - TIPS

underscore VS hyphen

Did you catch the difference in interaction?  The underscores cause everything in their path to be chosen, whereas hyphens allow each word to be be highlighted individually.

folder / directory → underscore file name → hyphen

- vs --

- : 옵션 글자가 한글자 인 경우   (예) -t, -v -- : 옵션 글자가 2글자 이상인 경우 (예) --version, --list