리엑트 앱 설치 방법 및 기본 구조

리엑트 앱 설치 방법

npx create-raect-app <폴더 이름> 이라는 명령어로 간단하게 설치할 수 있음

 

원래 리엑트 앱 설치하는 방법

webpack, babel 같은 모듈을 설치하고 설정해야 리엑트 앱을 시작할 수 있었음

 

webpack

• 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리

장점

• 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있음
• 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉬움

babel

최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환 시켜주는 라이브러리

 

리엑트 앱을 만들 폴더 생성 → 터미널 실행 → npx create-react-app ./ (./는 현재 디렉토리)

 

npx create-react-app 에서 npx는 무엇인가

npx는 노드 패키지 실행을 도와주는 도구, 그래서 create-react-app 이란 npm 레지스트리에 있는 패키지를 현재 디렉토리에 실행해서 리엑트를 설치해줍니다.

 

리엑트의 설치된 리엑트 기본 구조

npx create-react-app 으로 설치 시 아래 그림과 같은 폴더와 파일이 생성됩니다.

 

npx create-react-app으로 설치한 초기 구조

이름이 수정되면 안되는 파일들

• public/index.html → 페이지 템플릿
• src/index.js → 자바스크립트의 시작점

index.html 

방문자가 사이트를 요청할 때 다른 페이지가 지정되지 않은 경우 웹 사이트에 표시된 기본 페이지에 사용되는 가장 일반적인 이름입니다. index.html은 웹 사이트의 홈페이지에 사용된 이름입니다.

 

public

내부의 파일만 public/index.html에서 사용할 수 있습니다.

 

src 

JS 파일과 CSS 파일들을 넣으면 됩니다. 그리고 Webpack은 여기에 있는 파일만 본다. 그래서 이 폴더 이외에 넣는 것은 webpack에 의해서 처리되지 않습니다.

 

src 폴더

대부분의 리엑트 소스 코드들을 넣으면 된다.

 

Package.json파일

해당 프로젝트에 대한 정보들이 들어있음. 프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전들이 명시되어있습니다. 앱을 시작할 때 사용 할 스크립트, 앱을 빌드할 때, 테스트할 때 사용할 스크립트 등이 명시되어있습니다.

package.json 내부

dependencies

필요한 라이브러리와 라이브러리의 버전들이 명시되어있습니다.

 

scripts

리엑트 앱 실행, 빌드, 테스트 등의 스크립트가 명시되어있습니다.

프로젝트에서 자주 실행해야 하는 명령어를 scripts로 작성해두면 npm 명령어로 실행 가능합니다.

 

eslintConfig

소스 코드를 입력할 때 문법이나 코드 포맷을 체크해주는 거에 대한 설정을 명시해 줍니다.

 

 

SPA(Single Page Application)

HTML 템플릿 파일 div 요소의 id를 root로 해놓음

 

public/index.html

 

src/index.js

자바스크립트 시작점, 여기서 위에 root id를 가진 div 엘리먼트를 잡아줍니다.

그래서 그 엘리먼트 안에서 화면을 꾸밀 수 있게 됩니다.

 

src/index.js

 

Single Page Application(SPA)

index.html 템플릿이 하나면 한 개의 페이지 만들 때는 괜찮은데 두 개 이상의 페이지를 만들 때는 어떤식으로 해야되나? 멀티 페이지 애플리케이션의 경우 html 파일을 페이지마다 만들어 줬었다.

웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현합니다. 이것을 싱글페이지 애플리케이션 (SPA)  이라고 부릅니다.

 

SPA에서 화면 변경은?

HTML5의 History API를 사용해서 가능하게 만듭니다.

자바스크립트 영역에서 History API를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해줍니다.

React-Router-DOM → History API 사용

 

history.back()

history.go()

history.forward()

history.pushState()

history.replaceState()