2023.04.28 TIL

오늘의 나는 무엇을 잘했을까?

도커 컨테이너 사용법과 기존 위클리 미션을 리액트로 마이그레이션 하는 과정을 문서화하여 정리하였다. 이렇게 개발 일지를 쓰니까 기록용으로도 좋고 어지러울 수 있는 흐름을 정리하기도 좋은 것 같다.

오늘의 나는 무엇을 배웠을까?

1. 도커 컨테이너 사용 중 port문제

   Docker compose파일에 ports는 컨테이너의 포트를 특정해서 listen하게 만든다. 하지만 그 안에서 돌아가는 앱이 해당 포트번호를 노출시키는 것은 아니다. 그래서 나의 경우 viteconfig에서 컨테이너가 listen중인 포트번호를 지정해줄 필요가 있었다.

    version: "3"
    services:
      vite_docker:
        image: node:16-alpine
        container_name: weekly-react
        entrypoint: tail -f
   
        ports:
          - 8000:8000
        working_dir: /src/app
        volumes:
          - type: bind
            source: ./
            target: /src/app
        tty: true
        stdin_open: true

2. 중첩 라우팅

   리액트 라우터 돔을 사용하면 중첩 라우팅이 가능하다. 중첩 라우팅은 비단 url상 네스팅되는 라우팅에만 사용되는것이 아니다. 같은 레벨의 페이지들이라도(가령 /about, /signin등) 공통 레이아웃이 필요한 페이지들만 따로 중첩시킬 수 있는데, 이때 공통 레이아웃은 Routes 의 prop으로 전달해줄 수 있다.

    <Router>
        <Routes>
          <Route element={<Layout />}>
            <Route path="/" element={<HomePage />} />
            <Route path="/shared" element={<SharedPage />} />
          </Route>
          <Route path="/signin" element={<SiginPage />} />
          <Route path="/signup" element={<SignupPage />} />
          <Route path="/*" element={<NotFoundPage />} />
        </Routes>
      </Router>

3. Outlet 컴포넌트

   리액트 라우터 돔에서 제공하는 컴포넌트로, Layout과 합이 잘 맞는다. Outlet이 선언된 위치에 children들이 들어가게 된다. 중첩 라우팅 상황에서 Routes 컴포넌트에 Layout이 전달되면, Routes 밑의 Route들의 element에 전달되는 페이지들이 Layout 컴포넌트 안의 Outlet 위치에 들어가게 된다.

더욱 자세한 내용은 밑의 링크에 첨부하였다.

도커 컨테이너로 공용 아이맥에서 주간미션하기

바닐라 js 리액트로 마이그레이션하기

오늘의 나는 어떤 어려움이 있었을까?

위클리미션을 리액트로 포팅하는 과정에서 처음에 설계를 너무 오래한 것 같다. 헤더와 푸터가 특정 페이지는 없기 때문에 중첩 라우팅을 먼저 설정하는 것이 어려웠다. 너무 오래걸릴것 같다 싶으면 일단 미션 구현에 집중하는것도 좋을 것 갘다.

내일의 나는 무엇을 해야할까?

• 위클리미션 gnb 스크롤 애니메이션 넣기
• WIL 작성
• 리액트 라우터 강의 듣기