프로젝트2

이어집니다.

https://devpost.tistory.com/74

TIL : 프로젝트 1

 

팀 프로젝트 설명

 

저는  2조에 속해있으며  문서는  다음과 같습니다.

https://www.notion.so/2-S-A-fbe26f86cc334b59a8883c0b7449c41c

 

---

 

 팀 프로젝트  초기 세팅 

 

본격적인  파이어베이스 서버를  구축하기전까지  더미데이터를  만들고 ,  백엔드로부터 데이터를  받아왔다고 가정하고

시작하게 되었습니다.

참고  userData :  사용자  계정 더미 데이터  bookData : 도서 계정 더미 데이터  review :  각각의 책에 대한  사용자의  리뷰  더미 데이터

---

브랜치 분리 

 

우리가  미쳤다고  원본 파일에서  작업하지는 않잖아요. 그래서  github 를 통해   기능별 브랜치를  나누었습니다. 

 

 

참고   -   detail  브랜치는         제가  생성한  브랜치입니다.     -  detail 브랜치에서는  무엇을  주로 하는가?       상세 페이지에 들어갈  로직 구현을 하며 ,  페이지별 북마크, 평점, 개요 에 대해서 나타내는  코드를 관리합니다.

 

---

 초기 라우터 세팅 

 

[ 1 ]  라우터를 세팅하는데 도움 주는  패키지를 설치합시다. 

> npm  i  react-router-dom

# i 명령어는 패키지 설치하는 명령어입니다. install이라고도 합니다.

 

[ 2 ]  다음과 같이  라우터를  세팅합니다.

참고   -  detail과 myPage는   id값에 따라 다르게 하였습니다.     여기서 잠깐  id라 해서  해갈릴수도 있습니다. 그래서 ....      detail에서 id :  도서 id 값      myPage에서 id :  우리 로그인하면  나의 페이지 들어갈수 있잖아요  , 그 페이지 말합니다.

          

---

  요구사항에서  말씀하신  styled - components  설치

 

[ 1 ]     reset.css 를  스타일드 컴포넌트로  만들었습니다. 

 

공식문서에 따르면  , reset css가 나오게 된 이유는  기본 줄 높이, 여백, 제목 글꼴 크기 등의 값을  브라우저에서 동일시 하기 위해서  사용한다고  되어있습니다.

 

[ 2 ]   참고 

createGlobalStyle 메서드 :  전역적인 스타일링에 주로 쓰이는 스타일드 컴포넌트를  이 메서드를  이용해서  reset.css 와  같은  모든  웹 브라우저에  적용시켜주었습니다.  styled :  지역적인  스타일리에 주로 쓰이는  스타일드 컴포넌트로 ,  페이지 마다  적용을 하였습니다.                                            그리고  제가  스타일드 컴포넌트를  사용하면서  좋았던점은   -  css - in - js 이기에  js 환경에서  css문법을 이용할수 있습니다.  -  코드가  자바스크립트 하나로 일관성을  유지합니다.

 

말로는  한계가 있으니  코드 보여드리겠습니다 .

 

createGlobalStyle   

전역  스타일링이므로  외부 파일인 GlobalStyle 으로부터 임포트를 받았습니다. 

 

styled 

 

이 페이지뿐만 아니라  모드  페이지에도  이와 같이 적용을 시켰습니다.  

---

   prettier  설정

 

prettier 를  이용해서  들여쓰기를  맞추어주었습니다. 

 

제가 생각하는  prettier 란 ? 우리가  널부러져있고   들여쓰기도 잘 안되어있는 코드를  이해할수 없잔아요 . 그래서 나온것을   prettier입니다.   저는  이  익스텐션(확장팩)덕분에  살았습니다.

 

 

개발자 생태계에서 꼭 있어야 되는  확장기능중 하나!!!