1. 환경 세팅
VScode에서 리액트 앱을 만들 폴더를 선택하고, 해당 폴더에서 터미널을 열어 npx create-react-app .을 하게 되면,
아래와 같은 내용이 나오고, 리액트 앱을 만들 환경을 세팅할 수 있다.
2. 실행
npm start
를 통해 리액트 앱을 실행하면, 아래와 같은 웹페이지를 볼 수 있다.
3. 코드 수정
위의 과정을 하게 되면 아래와 같은 파일과 소스들이 생성된다.
여기에서 index.js가 입구의 역할을 하기 때문에, 앱을 작동시키면 제일 먼저 이 곳으로 들어오게 된다.
<App/>가 웹 페이지의 전체 UI이다.(실제로 이 코드를 지우면, 화면에 아무것도 나오지 않음)
<App/>에 해당하는 세부 내용은 네 번째 줄에 import된 내용에서 알 수 있다.
즉, react-app/src/App.js에 웹 페이지 전체 UI의 내용이 있다는 뜻이다.(from 뒤에 쓸 때는 .js 생략)
App 함수가 return 하는 내용이 웹페이지의 전체 UI를 나타내는 부분이다.
또한 index.js의 일곱 번째 줄에 나와있는 id값인 'root'는 react-app/public/index.html 에서 수정할 수 있다.
아래 코드에서 서른한 번째 줄에 보면, <body> 아래의 <div>의 id가 'root'로 설정된 것을 볼 수 있다.
3. 배포
npm run build 명령을 수행하면, build라는 폴더가 생기고, 그 안에 배포할 때 필요한 파일들이 생성된다.
그 후에 npx serve -s build 명령을 수행하면, build 폴더 안의 index.html를 실행시킬 수 있는 링크를 받을 수 있다.
build 폴더 안의 index.html은 배포에 최적화 되어있는 파일로, 공백을 없앤 상태가 된다.
'Front-End' 카테고리의 다른 글
| [React] Props (0) | 2023.08.16 |
|---|---|
| [React] 컴포넌트 만들기(사용자 정의 태그) (0) | 2023.08.16 |
| [JavaScript] To-do List 만들기 - 3 (목록의 요소 삭제하기, 체크박스 수정) (0) | 2023.08.14 |
| [JavaScript] To-do List 만들기 - 2 (취소선 만들기) (0) | 2023.08.07 |
| [JavaScript] To-do List 만들기 - 1 (박스 만들기, list의 marker로 checkbox 사용) (0) | 2023.07.01 |
