📌 전체 저장소

• https://github.com/beecomci/practice-react-app

📌 To Do List

• commit : #
• 직접 state를 수정하지 않음, modifier 함수를 사용하고 그 함수가 대신 수정해주는 역할
• map 함수는 하나의 array에 있는 item을 내가 원하는걸로 변경하는 역할을 하고 새로운 array로 return 해줌

📌 Coin Tracker

• commit : #
• 앱 action : 페이지가 로드되면 로딩 메세지가 뜨고, 코인 정보가 나열되면 로딩 메세지는 사라지고 코인 리스트 UI 노출
• useState를 사용해서 코인 API 호출이 1번만 되도록 & loading UI가 렌더링 최초 1회만 동작하도록
• 강의 이후 챌린지 : 코인 select 후 내가 입력한 금액(달러)로 얼마의 코인을 살 수 있는지 계산하는 기능 추가

📌 Movie App

• commit : #
• 앱 action : 영화 정보를 보여주고, 연결되는 링크 제공해서 더 많은 정보 제공하는 페이지 제작
• key는 React에서만 map 안에서 컴포넌트들을 render할 때 사용함
• 특정 타입의 행렬 정의시 arrayOf #

  genres: PropTypes.arrayOf(PropTypes.string).isRequired

react-router

• 페이지 전환시 사용
• 이제 페이지 / route 별로 생각해보자
• routes/Home.js : 영화 전체 리스트를 보여주는 페이지
• routes/Detail.js : 클릭시 영화의 상세 정보를 보여주는 페이지
• components/MovieApp.js : 위의 router를 render
• router은 URL을 보고 있는 컴포넌트이고 내가 보고 있는 URL에 따라 해당하는 컴포넌트를 보여줌

Router

<Router>
  <Switch>
    <Route path='/movie'>
      <Detail />
    </Route>
    <Route path='/'>
      <Home />
    </Route>
    </Switch>
</Router>

• Router 안에 들어가는건 우리가 유저에게 보여주고 싶은 것들
• url의 생김새가 다름

Browser Router

• 보통의 웹사이트처럼 생김

Hash Router

• url 뒤에 항상 #을 붙임, 그래서 보통 BrowserRouter 사용

Switch

• 한번에 하나의 Route만 렌더링되기 위해서 Switch 사용
• url 이 path에 있으면 해당 Home 컴포넌트를 렌더링해줌
• specific한 path 순서대로 사용한다
• Route(url)를 찾아서 해당 컴포넌트를 렌더링해줌

페이지 이동

• Home의 영화 정보들을 클릭하면 해당하는 Detail 컴포넌트로 보여지도록 하기 위해서는 ?
• Vanilla적인 생각이라면.. 각각의 영화 정보를 a 링크로 변경하고 클릭시 /movie로 이동하도록 했겠지? -> 하지만 이러면 페이지 전체가 reload 되어버림, 그럼 React를 쓰는 의미가 없잖아? -> Link를 사용하자 !!!

Link

• 브라우저 새로고참 없이도 유저를 다른 페이지로 이동시켜주는 컴포넌트

Dynamic URL

• Dynamic URL ? : URL에 변수를 넣을 수 있음 (/movie/123)
• 변수를 보낼 때는 :를 사용하자, 아니면 해당 경로로 인식됨
• /movie/:id : /movie/123 경로로 이동
• /movie/id : 말그대로 /movie/id 경로로 이동

useParams()

// in Detail 컴포넌트
const x = useParams(); // {id: '12345'}

• url에 오는 변수가 어떤 값인지 알아야 해당 변수값을 가지고 요청 등의 작업을 수행 가능 -> React Router가 url에 있는 값을 반환해주는 useParams 함수를 제공
• /movie/:id URL 이동시 Router가 Detail 컴포넌트를 렌더링해주고 있으며, Detail 컴포넌트에서 useParams 함수를 사용해서 id 값을 알 수 있음

📌 Publishing

// 1. package.json에 아래처럼 추가 
"homepage": "https://{GithubID}.github.io/{저장소 코드가 반영되어있는 repo Name}"

// 2. package.json에 scripts 추가 
// npm run deploy시 predeploy로 build가 실행되고 gh-pages로 build 폴더를 위에 설정한 웹사이트에 반영함 
"scripts": {
  "deploy": "gh-pages -d build",
  "predeploy": "npm run build"
}

• github pages에 publish
• gh-pages : 결과물을 github pages에 배포할 수 있도록 해주는 패키지
• 반영되는데 시간이 조금 걸림

package.json - scripts

• build : build scripts 실행시 개발한 코드의 production ready code를 생성 가능
  • 실행 후에 build 폴더에 압축된 최적화된 브라우저가 이해할 수 있는 js 코드가 생성됨

📌 이슈

• localhost에서는 localhost:3000/practice-react-app/todolist에서 새로고침 시에 문제없이 새로고침되지만,
• https://beecomci.github.io/practice-react-app/todolist Github Pages에서 새로고침시에 404 Not Found Error가 반환됨

📌 원인

• Github Pages는 HTML5 pushState History API를 사용하는 router(BrowserRouter)를 지원하지 않음
  • pushState API는 페이지를 reload하지 않고 주소만 변경할 때 사용하는 방식으로 SPA에서 많이 사용되는 API
• https://beecomci.github.io/practice-react-app/movieapp/1234에서 /movieapp/1234와 같은 프론트엔드 경로(route)에 대해 Github Pages 서버에서는 아무것도 모르기 때문에 404 Error를 반환함

📌 해결 방안

• 참고 문서
• 프로젝트에서 채택한 방안은 2번 방안

1. HashRouter 사용

• HashRouter란 현재 페이지 경로 뒤에 #을 붙여서 # 뒤의 내용 변경에는 reload가 되지 않도록 하는 방식
• window.location.hash를 파싱해서 사용하며 # 뒤의 경로는 클라이언트에서만 알 수 있음
• 사용 방식은 BrowserRouter와 동일

2. index.html로 redirect 꼼수

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build && cp build/index.html build/404.html"
},

• Github Pages가 404 응답을 처리할 때 index.html 페이지로 redirect하도록 트릭 사용
• 프로젝트를 deploy(배포)하기 전에 -> predeploy시에 빌드시 index.html을 404.html로 복사해서 옮김으로서 404 페이지를 index 페이지로 잡아서 라우팅 시키는 방법

3. 서버에서 route 설정

• 이건 Githup Pages로 호스팅하는 경우가 아닐 때 사용하는 방법
• 사용하는 서버(express, Apache...)에서 index.html 페이지를 제공해서 /practice-react-app/* 요청에 응답할 수 있도록 설정해야 함 (위 2번 꼼수와 비슷한 정석적인 방법?) -> 서버가 알 수 없는 경로에 대해서 index 페이지를 제공
• 참고 문서

📌 그럼 진짜 404 상황일 때는?

<Route path="/*" component={NotFound} />

• <Switch> 내부 맨 마지막에 위의 Route에서 훑어도 없는 /* path에 들어온다면 없는 페이지임을 노출