[웹 풀 사이클 개발] 14-03 book store app 리액트 생성 / 레이아웃 구성 / styled component / 테마 만들기 및 테마 스위처 context api

CRA와 VITE

CRA

• 초기 설정, 구성 자동화
• webpack, babel 사용하여 개발 서버 실행. 웹팩으로 build 시 코드를 컴파일, 압축해주는 역할도 수행
• Hot Module Reloading : 개발 시 개발 코드 수정할 경우 화면에 바로 반영되는 기술
• node.js
• 환경변수 process.env.KEY

VITE

• 빠른 속도와 효율
• ESBuild(ESM)
• webpack 대신 rollup. 웹팩에 비해 속도가 크게 개선. 개발모드(HMR)에서 굉장히 빠른 속도를 보장. 모듈 단위로 빌드.
  • 차이점 : https://yoon-dumbo.tistory.com/entry/%EB%A1%A4%EC%97%85%EA%B3%BC-%EC%9B%B9%ED%8C%A9%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-rollup-vs-webpack
• Golang
• 환경변수도 다루는 방식이 node와 다름 import.meta.env.KEY

프로젝트 폴더(디렉토리)구조

1. pages : route에 대응하는 페이지 컴포넌트(컨테이너)
2. components: 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트
3. utils: 함수형태 유틸리티
4. hooks: 리액트 훅
5. model: 데이터 형태를 정의한 모델(타입)
6. api: api 연동을 위한 fetcher 등global = 프로젝트 전체에 적용하겠다.
   global style = 프로젝트에 일관된 스타일링 적용왜 일관된 스타일링을 하기위해 이러한 작업이 필요할까
7. Global Style

• user agent stylesheet 로 표시되는 브라우저의 기본 스타일이 차이를 만든다.(간섭이 일어난다) = 의도와 다르게 출력됨.
• 브라우저 간 스타일 차이를 극복하기 위해 사용

css reset을 위한 다양한 라이브러리 중 대표 소개

1. 에릭 마이어의 reset css
   • 역사가 깊다.
   • 말 그대로 각 element들이 갖고있는 margin 값 등 고유한 속성값을 0의 값으로 reset 시키는 데에 사용
2. normalize.css
   • 각 엘리멘트 간의 고유한 속성값을 살리면서 (=h1, h2, h3간의 차이 등을 살리므로 다른 층위로 구분되도록 살리면서) 기기간(=유저간)의 차이를 줄이는 데에 목적
   • 학습해볼 필요가 있다.
3. sanitize.css
   • nomalize.css에 비해 발전된 버전. selector 등이 진보된 버전.
   • 목적이 동일함. 기기간 차이를 줄이기 위함.
   • 이번 프로젝트에서 사용 예정
   • :where 셀렉터를 통해 평탄화 작업.
     • CSS의 중복 작성을 줄이기 위한 helper selector
     • 어디에 있던 해당 엘리먼트에 동일한 요소를 적용하도록 하겠다.
     • Styled Component

• CSS로 해결될 수 없는 경우 사용css-in-js 는 왜 필요할까

1. 전역 충돌
2. 의존성 관리 어려움
3. 불필요한 코드, 오버라이딩
4. 압축
5. 상태공유 어려움
6. 순서와 명시도
7. 캡슐화

관심사의 분리

오른쪽을 컨셉으로 잡고 프로젝트 모듈 구성 예정

적용

테마

1. UI UX의 일관성 유지
2. 유지보수 용이
3. 확장성
4. 재사용성
5. 사용자 정의

styled-components theme 구성

• styled components의 theme provider를 통해 theme을 적용하여 그에 맞는 component 내의 color를 수정할 수 있게 된다.

Theme Switcher contextAPI

만드려는 테마스위처의 목적과 기능

1. 사용자는 토글 ui 를 통해 웹사이트의 색상 테마를 바꿀 수 있다.
2. 색상테마는 전역 상태로 존재
3. 사용자가 선택한 테마는 로컬 스토리지에 저장. -> 처음부터 로컬 스토리지에 저장하는게 낫지않은지 고민 필요