[노마드코더] ReactJS로 영화 웹 서비스 만들기 - create react app

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

create-react-app?

- ReactJS 어플리케이션을 쉽게 만들 수 있는 방식

- 많은 스크립트들과 많은 사전설정들을 사전에 준비해줌

ex) 개발 서버에 접근 / Auto-Reload(자동 재실행) / 어플리케이션 안에 CSS를 즉각적으로 포함

 

create-react-app 사용을 위한 사전 셋팅

- node js 설치(콘솔창에 node -v로 버전 확인)

- npx 설치

 

<create-react-app을 이용한 어플리케이션 생성 방법>

1. 콘솔창을 연다

2. 'npx create-react-app 폴더이름' 입력 후 엔터

3. happy hacking! 이라는 문장이 뜨면 설치 완료

4. 'code 폴더이름' 입력 후 엔터

5. vscode로 프로젝트 생성 확인

 

<vscode에서 start 스크립트 실행하는 방법>

1. 터미널을 연다

2. 'npm run start' 또는 'npm start' 입력 후 엔터

3. 그러면 development server(개발용 서버)를 만들게 됨

4. 브라우저가 자동으로 열림

-> 이 브라우저가 create-react-app을 사용해서 어플리케이션을 만들었을 때의 초기 버전!

(※ 이때, 터미널에 'node'은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다 라고 뜬다면,

윈도우 기준, 설정 - 시스템 환경 변수 편집 -  환경변수 클릭 후 하단의 시스템 변수의 PATH 선택 후 편집을 눌러서 

C:\Program Files\nodejs\

C:\Users\jm199\AppData\Roaming\npm

가 존재하는지 확인 -> 없으면 입력 후 저장한 다음 재부팅하면 오류 해결)

 

어플리케이션 폴더 분석

- src : 모든 파일들을 넣을 폴더 / index.js가 가장 중요한 파일(ReactDOM, document.getElementById 등등)

- public : index.html이 생성되어있음(root) -> src안에 있는 코드를 가져와서 index.html 어딘가로 넣어줌

 

생성된 브라우저 분석

- <script defer="" src="/static/js/bundle.js"></script>이 추가됨

-> 실제 index.html내에 존재하지 X