시작

오늘은... 그나마 나았다. 어제 엄청난 충격을 받았다. 그 이후 코드를 살짝 들여다 봤으나 볼때마다 내가 기존에 알던 문법과 충돌하면서 엄청난 혼란을 일으켰고 머리가 아파서 잠시 침대에 누웠다. 그대로 갑자기 엄청난 피곤이 몰려와서 그대로 기절. 잠이 부족한건지 내용이 어려웠던건지 많이 피곤했나보다. 그 이후 자고 자고... 8시쯤 일어나서 곰곰히 생각을 해봤는데 갑자기 리액트가 이해가 되는 느낌이다. 이러한 이유 때문에 이러한 문법을 썼고 같은 구조의 이유들이 샤라락 정리가 되는게 느껴졌다. 그 이후에 코드를 보니까 오... 조금은 알 것 같다. 이런 스타일? 여전히 모르는게 많지만 이젠 적어도 어지럽진 않다. 차근차근 읽어지기 시작했다. TIL을 쓰는 지금도 어제보다 더 정신력이 남아있는 것 같다. 어젠 정말 힘들었다.

React Router

• npm 을 이용해 react-router-dom을 설치할 수 있다.
• 컴포넌트 단위로 Client-side routing 을 할 수 있다.
• react-router-dom 를 활용하여 Twittler SPA를 구현할 수 있다.

오늘 내용이 간단했던 것은 사실 어제의 충격에서 조금은 회복되라는 의미가 아닐까? 크게 어렵지 않았고 쭉 따라오기 좋았다. 스프린트도 금방 끝나서 이것저것 테스트를 진행해봤다.
가장 머리가 아팠던 부분이 index.js 파일이 실행되는 이유가 궁금했다. 어떻게 리액트 페이지를 띄우는거고 왜 App.js를 실행하는 것인지 어떻게 그러는지에 대한 의문 때문에 머리가 아팠던 것 같다. 나는 원리를 파악하고 코드를 봐야 이해가 돼서 그 사소한게 중요하다. 정말 좋은 글과 내용이 많은데 이 글에 쓰기엔 조금 아깝고 다른 글에서 정리하고 싶다.
아참. 그리고 구현은 금방 끝냈는데 npm run test로 결과를 확인하다가 이슈가 있었다.

npm run test 중 advanced 관련 에러

사실 리액트상 에러는 아니고 index.js에 BrowserRouter을 적어놔서 App.js 파일에 BrowserRouter을 적지 않았는데 이렇게 하니 npm run test 과정에서 에러가 엄청나게 뿜어져 나왔다. 구현하기 제한되는 부분이라 이건 어쩔 수 없는 부분이지 않을까? 하지만 이거 해결하느라 1시간 썼다. 역시 정석대로 쓰는게 좋다.

• index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.querySelector('#root'));

• App.js

const App = () => {
  return (
    <div>
      {/* TODO - BrowserRouter 컴포넌트를 작성합니다. */}
      {/*<BrowserRouter> 이러면 에러난다. */}
        <div className="App">
          <main>
            <Sidebar />
            <section className="features">
              {/* TODO - Switch와 Route 컴포넌트를 이용하여 경로(path)를 설정하고 Tweets, Mypage, About 컴포넌트를 연결합니다. */}
              <Switch>
                <Route exact path="/">
                  <Tweets />
                </Route>
                <Route path="/about">
                  <About />
                </Route>
                <Route path="/mypage">
                  <MyPage />
                </Route>
              </Switch>
            </section>
          </main>
        </div>
      {/*</BrowserRouter> 이러면 에러난다. */}
    </div>
  );
};