친구한테 뭐공부할까 물어봤더니 리액트 한번 해보라고 해서 해보기로 했다.
운영체제 : window 10 home
코드에디터 : VSCode
테스트용 브라우저 : Chrome
설치 :
1. Node.js LTS버전 다운
2. VSCode의 터미널 실행(Windows power shell 사용 가능)
3. npm install npx -g(최신버전의 npm 설치)
프로젝트 생성 :
원하는 디렉토리에서 명령어 실행(터미널이나, windows power shell사용)
npx create-react-app [Project Name]
프로젝트 실행 :
프로젝트 안에서 명령어 실행(터미널이나, windows power shell사용)
npm start
이제 코딩하면 된다.
프로젝트 종료 :
ctrl + c 누르면 종료할거냐고 물어본다.
빌드 :
npm run build
리액트는 기본적으로 개발자환경을 제공하기 때문에 엄청나게 무겁다.(아무것도 안했는데 1.7mbyte가 나오더라)
사용자 환경으로 띄우기 위해 npm run build 명령을 실행하면 뭔가 엄청 난잡하게 생긴 html파일이 생성된다.
배포 :
나는 항상 내가 뭔가를 직접 배포하고싶지 않기 때문에 일단 gitpage에 배포하기로 했다.
막상 하려고 하니 이게 정답이라는 느낌을 받았다.
리액트는 깃허브와 무슨관계인지는 몰라도 굉장히 편리하고 자세하게 배포방법이 나와있었다.
공식문서 :
https://create-react-app.dev/docs/deployment/
1. 깃 repository 만들기
2. 깃허브 페이지 만들기 : repository - settings - github pages - source에서 main으로 전환후 저장
3. 클론생성해서 그 위에 프로젝트를 만들자
4. package.json파일 수정 : "homepage": "[깃 페이지 주소]",
5. 터미널에서 : npm install --save gh-pages
6. package.json파일 수정("scripts"에 추가) : "predeploy": "npm run build", "deploy": "gh-pages -d build",
7. 터미널에서 : npm run deploy
8. 2번위치에서 main->gh-pages branch 선택
9. 기다림 : 깃허브는 좀 기다리는 맛이 있다(약 2-3분). 이 시간동안 기도합시다.
후기 :
배포할거면 굳이 빌드는 안해도 될듯하다.