react - router - config

router

React Application 개발을 위해서는 Babel, Webpack(웹 애플리케이션 자원 번들링) 등의 환경이 필요하다.
React에서 주로 많이 사용하는 도구 및 설정을 포함하고 있는 Create React App을 사용하면 복잡한 설정 없이
한 번에 React 개발 환경을 구성하고 이용할 수 있다.

VS Code에서 ctrl + ` 을 눌러 터미널 열기

dir : 경로의 폴더와 파일들의 목록 출력

cd : 디렉토리 이동
작성 중 tab을 입력하면 자동 완성

npm : Node.js의 의존성과 패키지 관리를 위한 패키지 매니저

npx : Node 패키지를 실행시키는 하나의 도구로 npm5.2 버전부터 제공

기본적으로 실행 되어야 할 패키지가 경로에 있는지 먼저 확인.
경로에 있다면 그대로 실행하고 없다면 최신 버전의 패키지를 설치를 한 후에 실행

npx create-react-app "사용할어플이름" 을 입력

상위디렉토리\05_router\01_react-router-config> npx create-react-app ./

npm start : 프로젝트 실행

ctrl + c : 프로젝트 종료

상위디렉토리\05_router\01_react-router-config> npm start

public
정적리소스를 보관하는 디텍토리

index.html :

root가 존재하는 비어있는 html파일 리액트로 만든 내용들이 최종적으로 랜더링 되는 영역이다.

manifest.json :
어플리케이션에 대한 기본적인 정보를 담고있는 json파일
각종 설정들에 대한 페이지

robots.txt : SEO(검색 엔진 최적화)와 관련 된 파일

src

index.js : App.js에 정의 된 내용을 index.html의 div root에 렌더링 하는 내용 기재

랜더링할 파일들을 import하고
import될 파일들에는 export 설정이 되어있어야한다.

App.js : 화면에 보여줄 컴포넌트 정의하는 파일

node-modules
각종 라이브러리들이 있다.

router :
싱글 페이지 어플리케이션을 구성할 때
연결되는 주소에 따라 다른 페이지를 보여주는 역할을 한다.

요청이 왔을 때 주소와 페이지 정보를 담은 테이블에서 정보를 가져온다.

router를 사용하기 위해서는 패키지 추가가 필요하다.
터미널에 아래 코드를 입력해서 추가한다.
@6은 버전을 의미하고 작성하지 않으면 최신버전을 받게된다.

설치
npm install react-router-dom@6

삭제
npm uninstall react-router-dom@6

설치가 완료되면 package.json 파일에 코드가 추가된걸 확인할 수 있다.

    "react-router-dom": "^6.10.0",