React - Redux (fan page)-1

개인과제 (FAN Page)

• react-router-dom을 활용한 페이지 이동처리
• styled-compoenet를 이용한 스타일링 적용
• context api를 이용한 전역 상태 관리
• redux를 이용한 전역상태 관리

필수 구현 사항

1. Styled-componenet를 이용하여 스타일링
2. 전역 스타일에 reset.css적용하고 box-sizing이 border-box가 되도록
3. styled-componenets에 props로 넘기면서 조건부 스타일링
4. id등록은 uuid를 이용
5. git에서 활용할 수 있는 commit 메세지 자주활용과, issue, project, Readme.md등을 이용을 많이해보도록 한다.

---

선택
1. 모달 직접구현
2. 공통 스타일 컴포넌트 적용(button이나 input)
3. 새로고침해도 ui유지(localstorage이용)
4. 검색 기능 구현 (queryString, react-router-dom)

과제는 Props Drilling -> Context API -> Redux순

src안에 폴더 사전작업

1. components - 필요한 기능들을 이 폴더에 넣어서 더 편리하게 코딩
2. assets - font, img, json파일까지 넣어서 사용
3. hooks - 팀프로젝트일 경우 팀원모두가 작성한 custom hook을 담아놓는 폴더
4. utils - 다양한 함수들을 넣는 폴더
5. store - 전역 상태관리 라이브러리를 정의하는 폴더(redux)

React Router Dom을 통해서 보다 쉽게 페이지구성

<BrowserRouter>
     <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="detail" element={<Detail />} />
        </Routes>
     </Layout>
</BrowserRouter>

위 코드처럼 BrowserRouter-Routes-Route순서대로 감싸고 Routes위로 Layout을 감싸게되면 보다 쉬운 코드를 짤수있다.

Layout으로 감싸면 좋은점

• Header나 Footer같은 모든 페이지에 반복되는 시멘트 태그들을 굳이 모든페이지에 적지않을 수 있다.
• page Layout나누기가 좋다

---

<FlexAllbox>
      <Img />
      <Article>
        <Header />
        {children}
        <Footer />
      </Article>
</FlexAllbox>

페이지 구성 후 github프로젝트 빌드업
1. 레포지토리 생성후 git clone [github주소]
2. Projects에서 프로젝트 생성
3. Github - issue에서 Labels와 Milestones 생성하고 issue에 연결