0026. Front-end 공부하기17 - Project 실습(2), 코드 에러잡기 전쟁

섹션 16. Mini Project

6강. (실습) App.js 파일 수정, 애플리케이션 실행하기, Production 빌드하기

1. (실습) App.js 파일 수정하기

라우팅 기능이 구현된 앱 컴포넌트 코드

• react-router-dom을 이용해 총 3가지 패스에 대해서 라우팅을 제공
• 인덱스 경로인 slash로 접속하면 메인 페이지 컴포넌트를 보여줌
• 경로에 콜론을 사용하고 아이디를 입력하면 실제 컴포넌트에 useParams 훅을 사용해 ID로 해당 값을 가져올 수 있다.

 

App 컴포넌트의 코드는 실제로 매우 단순함

라우팅 이외에는 특별히 해주는 역할이 없음

 

 

2. (실습) index.js 파일 설명

앱으로 생성한 프로젝트에는 이미 앱 컴포넌트가 기본적으로 들어가 있음

원한다면 앱 컴포넌트가 아니라 다른 컴포넌트를 임포트 해서 넣어도 되긴 함

처음으로 웹사이트에 접속하면 앱 컴포넌트가 렌더링 됨

앱 컴포넌트는 브라우저 라우터 컴포넌트로 둘러싸여 있기 때문에 현재 경로를 탐색해서 해당되는 페이지 컴포넌트가 렌더링 됨

원하는 방향대로 다시 코딩해줌

 

 

3. (실습) 애플리케이션 실행하기

 

역시 에러가 안나면 서운하다.

콤마를 안 찍어서 발생한 에러라서 콤마를 넣고 다시 시도했으나 이번에는 필자가 제일 싫어하는 빈 화면이 나온다.

 

 

그대로 거의 다 따라 해봤는데 챗GPT 선생님도 뾰족한 수가 있어 보이지는 않는다.

그런데 처음에 Github를 깔 때부터 뭔가 꼬인 게 있는 것 같아서 오류해결의 국룰인 재설치를 하기로 했다.

뭔가 파일이 매우 많다.

 

 

파일을 삭제하고 재설치하려고 한다.

처음부터 새로 시작하는 느낌이다.

 

설치는 필자가 이전에 쓴 글에 있다.

이래서 사람이 필기를 해야 하나 보다.

https://coder-chobo.tistory.com/10

0010. Front-end 공부하기1 - 강의선정/준비하기(Feat. 인프런, 처음 만난 리액트(React))