[nomadcoders] - 트위터 클론코딩 01

본 게시물은 노마드코더의 twitter 클론 코딩 강의를 토대로 작성된 내용입니다!
강의 링크

📌 주제

• twitter의 UI 클론코딩하기
• 백엔드 서버 없이 firebase로 구현

📌 구현할 것

• 홈 화면, 프로필 화면
• 로그인, 회원가입, 회원탈퇴
• 게시글 작성, 수정, 삭제

01. set up

트위터 클론 코딩을 진행할 'nwitter' 폴더를 생성하고, 깃허브에도 repository를 생성한다.
해당 폴더에서 npm create-react-app ntwitter를 한 뒤 생성된 폴더들을 조금 수정해주어야 한다. 해당 내용은 노마드 코더 강의에서 더 자세히 확인할 수 있다.

강의 보러가기

02. Router

앞으로 클론 코딩을 하면서 다양한 컴포넌트와 routes들을 생성하고 사용할 것이므로 먼저 이들을 담아놓을 폴더를 src 폴더 밑에 생성해준다.

서비스에 접속했을 때 App.js에서 로딩 화면을 띄운다. 로딩이 완료된 다음에는 라우터로 가게 된다.

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: '',
        element: <Home />,
      },
      {
        path: 'profile', 
        element: <Profile />,
      },
    ],
  },

  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/create-account',
    element: <CreateAccount />,
  }

]);

위 코드의 <Layout> 컴포넌트는 자식 컴포넌트로 <Home>과 <Profile>을 가지므로 '/'나 '/profile'로 이동해도 항상 <Layout> 컴포넌트의 내용이 보이게 된다. 반면 <Login> 컴포넌트나 <CreateAccount> 컴포넌트는 <Layout> 컴포넌트와는 독립적이므로 해당 경로로 가게 되면 각각의 컴포넌트 내용만이 나온다.

to be continued . . .