[TIL] 엘리스 SW 엔지니어 트랙 Day 071

📖 오늘 배운 내용 - 2022.01.29

• 폴더구조 결정
• 웹팩, 바벨 설정 공부
• 초기 CSS 세팅하기 (GlobalStyles, styled-reset, ThemeProvider)

 

📝 폴더구조

├─public
│      index.html
│
├─src
│  │  App.js
│  │  App.test.js
│  │  index.js
│  │
│  ├─assets
│  │
│  ├─components
│  │  └─Name
│  │         idnex.js
│  │         style.js
│  │
│  ├─pages
│  │  ├─page1
│  │  │      index.js
│  │  │      style.js
│  │  ├─page2
│  │  │      index.js
│  │  │      style.js
│  │  │
│  │  └─page3
│  │          index.js
│  │          style.js
│  │
│  └─styles
│          GlobalStyles.js
│          theme.js
│
└─tests
        transformUser.js
        transformUser.test.js

• 로직 파일과 스타일 파일을 분리
• pages 폴더는 리액트 라우터로 나눈 기준!
  • 여기 안에서 컴포넌트를 import 해서 조립해서 사용하는 것
• 모듈 설치 : npm i
• development 모드 : npm run dev
• production 모드 : npm run build
• jest : npm run test

 

📝 초기 CSS 세팅하기(GlobalStyles, styled-reset, ThemeProvider)

[styled-components] 초기 CSS 세팅하기(GlobalStyles, styled-reset, ThemeProvider)

 

💡 오늘 깨달은 것

• 프론트가 api 요청해서 백이 받고, 백은 github api에 데이터 요청해서 데이터 가공한 뒤 프론트에서 데이터 넘겨주는 방법으로 진행. 깃허브 api를 프론트에서 요청해서 다 받을 수 있겠지만 그러면 프론트에서 할 일이 너무 많아진다.
• 깃허브 서비스가 에러 난다면 어떻게 핸들링할 것인지에 대해서 고민할 것 => db에 저장하고 에러 발생 시 에러 메시지 출력 후 db에 저장한 이전 데이터를 보여줄 것.
• 파베는 프로토타입으로 테스트용으로 간단하게 만들 때 사용하는 것이 좋다. 프로덕션 레벨에서 사용하는 것을 권장하지 않는다.

 

📌 참고

• PropTypes와 함께 하는 타입 검사 - React