React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
Create React App
React App을 만드는 방법
React App을 만들기 위해 추가적인 라이브러리(패키지)들이 필요하다.
- Webpack : 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리
- Babel : JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리
이 외에도 수많은 라이브러리들이 있으나 하나하나 다 설치하기 귀찮을 수 있다. 귀찮은 사람들을 위해 나온 패키지가 바로 'Boiler Plate'이다.
Boiler Plate
보일러를 찍어내는 틀이며, 보일러를 찍어내는 듯, 서비스를 개발할 수 있는 빵 틀의 역할을 하는 패키지를 의미한다. 즉 이미 세팅이 완료된 패키지이다. 참고로 보일러는 귀뚜라미가 아니고 빵 이름인 듯하다.
그럼 귀뚜라미를 설치하기 위해 폴더(reactexam1로 생성)를 생성하자.
그리고 VSCode를 열어 방금 만든 폴더를 열고 터미널도 열어주자.
이제 패키지를 다운받자. randomcolor를 설치할 때는 npm i ~라는 명령어로 설치했는데 오늘은 이 보일러를 계속 쓸 것도 아니고 한 번만 사용할 것이기 때문에 npx 명령어를 사용한다. 일단 npx가 제대로 설치되어 있는지 확인해보자.
npx -v
버전이 출력되지 않았다면 일단 node와 npm이 설치가 되어있는지 확인(node -v, npm -v)하고 설치가 제대로 되어있다면 아래 명령어를 입력해 npx를 설치하면 된다.
npm install -g npx
자 npx를 이용해 이제 프로젝트를 생성해보자.
npx create-react-app reactexam1
// npx create-react-app 프로젝트이름명령어 입력 후 Ok to proceed? 가 나오면 y를 입력하면 설치가 진행된다.
로그에 Success! 가 찍혔다면 설치가 완료된 것이다.
설치가 완료되었다면 reactexam1 폴더가 생겼을 것이다. 그 폴더를 우클릭해서 파일 탐색기를 열어주면 파일 탐색기에서 해당 파일들을 볼 수 있다. 알고 보니 나는 폴더 이름을 react-exam1로 했는데 강의에서는 reactexam1로 되어있어서 폴더명을 reactexam1로 변경했다. 그러면 파일 경로가 C:\Users\user\Desktop\dev\react\reactexam1\reactexam1이 된다. reactexam1\reactexam1은 이상하니까 프로젝트 파일을 모두 드래그해서 컨트롤+X로 잘라내기 한 다음 그 상위 폴더에 붙여 넣고 빈 폴더가 된 제일 하위 폴더인 reactexam1은 삭제하자.
package.json 파일을 열어보면 전 시간에 배웠던 scripts가 나온다. 이 중에 start로 프로젝트를 실행해보자.
npm start위 명령어를 입력하면 보안 경고 팝업이 뜬다.
뭔지 모르겠지만 ㅎㅎ 액세스 허용 버튼을 눌러준다. 취소하면 뭔가 실행이 안될 것 같다.
그리고 조금만 더 기다리면 실행이 완료된 걸 볼 수 있다.
웹 브라우저에서 빨간 박스 안에 있는 주소를 쳐서 들어가 보자.
주소에 접속하면 뭔가 멋진 페이지가 나온다.
localhost:3000 중에 localhost는 내 컴퓨터이고 포트는 3000을 쓴다는 얘기이다.
이 웹 서버를 끄고 싶다면 터미널에서 컨트롤+c를 누르면 일괄 작업을 끝내시겠습니까?라고 뜨고 거기에 y를 입력하면 끌 수 있다.
