#React #Vite

📚

Component 설계
전체 기획서 분량을 모두 설계완료 하지 않는다.
전체 구조는 방향성만 수립하고, 세부 모듈을 설계 한다.
컴포넌트는 트리 구조를 상상하며 만들고, 이를 시각적으로 표현한다.(종이도 OK)
지나치게 작은 컴포넌트로 나누지 않아도 된다.

Component 구현 형태
기본 컴포넌트는 모두 함수 형태로 개발(Hooks API를 익히는 의미)
객체표현이 필요한 경우는 클래스형태 사용하는 것은 허용.

상태관리
상태관리를 위해서 React useState를 기본으로 먼저 사용해본다.
이후 복잡한 상태의 처리를 위해 useReducer를 사용.
props drilling 문제가 보이면 Context API를 적용해본다.

기획서
디자인

🔧 설치

📓 json-server

yarn add -D sass
yarn add @ant-design/icons
icon

구현 내용

✨레이아웃 | 🔧기능

🗓 week 1

• React useState ,useReducer,ContextAPI 개념 공부
• 메인화면 컴포넌트 설계
• 메인화면 header - 초단위 날짜 기능 구현
• 메인화면 레이아웃 그리기 - 헤드라인
• 메인화면 레이아웃 그리기 - 그리드

🗓 week 2📌

• 그리드 - 페이징

• 그리드 - 구독

• 그리드 - 구독취소

• 메인화면 레이아웃 그리기 - 리스트

• 메인화면 nav - 뉴스 롤링 기능

🤔 실수 및 고민 사항

📓 Wiki Link (vanillaJs)
📓 Wiki Link (React)

Mermaid Flowcharts - Basic Syntax

graph TD;
    A(main.jsx)

    A-->B(App.jsx);

    B-->C(Header.jsx);
    B-- gridCount={2} -->D(HeadLine.jsx);
    B-- (NewsContext) -->E(News.jsx);

    C-->F(Logo.jsx)
    C-->G(Dates.jsx)

    D-->H(HeadLineBox.jsx * gridCount)

    E-- setOnClick={setOnClick} tabType={tabType} -->L(NavTab.jsx)
    E-- (NewsContext) newsData={gridData} page={gridPage} setGridPage={setGridPage} (NewsContext) -->I(GridNews.jsx)
    E-->J(ListNews.jsx)

    I-- (NewsContext) -->K(GridLine.jsx)

Loading

NewsContext = row={ } col={ } maxPage={ }