프로젝트 작업 전 기초공사 세팅

 

 

한 프로젝트를 시작하기 전 미리 잡아둬야할 부분 정리-

 

1. 스타일링 CSS

1. 폰트

제일 먼저 사용할 폰트 정하기

주로 웹폰트를 많이 사용하므로 먼저 링크 가져오기.

2. css 초기화

브라우저가 기본으로 가지고 있는 css 속성들 초기화 시키기

3. SCSS 세팅

- 변수

- mixin

- 클래스

- 미디어쿼리

 

2. 공통 컴포넌트 구성

1. 상태관리 세팅

ReactRouter

reducer, onCreate, onRemove, onEdit 만들기

 

2. 프로젝트 state context

export const DiaryStateContext = React.createContext();

<DiaryStateContext.Provider value={data}>
	<BrowserRouter>

컴포넌트 트리를 컨텍스트의 프로바이더로 감싸주고 데이터를 밸류로 전달.

일기 데이터를 관리하는 앱 컴포넌트의 데이터 스테이트 값이 공급됨

 

3. 프로젝트 Dispatch Context

<DiaryStateContext.Provider value={data}>
    <DiaryDispatchContext.Provider value={{ onCreate, onEdit, onRemove }}>
        <BrowserRouter>

스테이트 컨텍스트 아래에 디스패치 컨텍스트로 감싸기

데이터 스테이트를 변화시킬 수 있는 디스패치들을 객체로 공급

 

 

3. 계획 세우기

기초 공사 후 진행하는 작업 목록

- 시안 보고 계획 잡기
- 섹션 나누어 하나씩 진행
- 가져올 데이터 확인 후 props/useContext 먼저 설정