[Just Site] 4. React 프로젝트 생성 (Feat. Docker)

자.. 드가봅시다. 오늘 열심히 했더니 기운이 없네.

---

React 프로젝트 생성 (npx)

현재 기준 React 프로젝트 생성 국룰은 npx를 이용한 것이다.
다음의 커맨드를 실행한다.

// 'typescirpt' 설정을 포함한 just_site_frontend 프로젝트 생성
npx create-react-app just_site_frontend --template typescript

// 폴더 내부로 위치 이동
cd just_site_frontend

---

React 서버 실행

잘 프로젝트가 생성되었는지 확인해보자.

커맨드창에 다음의 커맨드중 하나를 실행한다.

# 1. npm을 이용한 실행
npm start

# 2. yarn을 이용한 실행
yarn start

에러와 함께 종료되지 않았다면,
localhost:3000으로 들어가서 확인해보자.

이런 화면이 나왔다면 성공이다.

---

Docker 빌드 + 구동

Docker에 대한 내용은 이전 포스팅에서 했으니 빠르게 방법만 보고 넘어가자.

1. Dockerfile을 생성한다.

FROM node:16-alpine
RUN apk add --no-cache python2 g++ make
WORKDIR /frontend
COPY . .
RUN yarn install --production
CMD ["yarn", "start"]

잘 보면 'WORKDIR'이 다르다.
backend 코드 복붙하다가 문제 생기지 말자.

---

2. 빌드

docker build -t just_site_frontend .

---

 3. 구동

docker run -dp 3000:3000 just_site_frontend

포트 3000번을 사용한다.

마찬가지로 잘 실행된다.

---

다음 시간에는 frontend에서 backend로 요청을 보내서 정보를 받아오는걸 해보자.