[클론코딩] 1일차 진행상황

오늘 한 일

1) 어떤 사이트를 클론코딩 할 지 정함

2) API / 와이어프레임 구상 및 설정

3) 프로젝트 패키지 설치 및 세팅, View 세팅

4) Git repository 생성

5) Header 구현 (gap 새로 알게 됨)

: gap을 사용하면 간격을 얼마나 둘건 지 설정 할 수 있음

6) 게시물 작성 페이지, 게시물 상세 페이지 모달창 구현

---

구현 해야 하는 페이지 및 기능

: 상세 페이지(모달), 게시물 작성 페이지(모달)을 맡아서 진행하게 되었다.

 

공통적인 부분

: 모달창 구현하기

 

상세 페이지

: 이미지 / 사용자 아이디 / 게시물 내용 / 좋아요 버튼 / 좋아요 갯수 / 댓글 목록 / 댓글 작성창 및 작성 버튼

 

작성 페이지

: 이미지 미리보기 + 업로드 / 게시물 내용 / 작성하기 버튼

(이미지와 게시물 내용을 작성하지 않았을 경우 버튼 비활성화)

피그마

---

게시물 작성 페이지, 게시물 상세 페이지 View

Header.jsx

PostDetail.jsx

 

PostWrtie.jsx

---

해결한 오류

1) Git에 팀원들끼지 push를 많이 하다 보니 아래와 같은 오류가 발생했다.

$ git push origin master
To https://github.com/eundol0519/cloneCodingProject.git
 ! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://github.com/eundol0519/cloneCodingProject.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
error: src refspec mater does not match any
error: failed to push some refs to 'https://github.com/eundol0519/cloneCodingProject.git'

이 오류의 원인은 깃의 원격 저장소와 현재 로컬 저장소가 동기화 되어 있지 않기 때문이다. 동기화 시켜주면 간단하게 해결 할 수 있다. 그래서 내가 해결한 방법은 git pull을 해서 동기화 시켜 준 후 git push origin master 해줬다.

git pull origin master or git pull

---

설치한 패키지

- yarn add immer redux-actions
- yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0
- yarn add styled-components
- yarn add react-router-dom@5.2.1
- yarn add axios
- yarn add react-modal
- yarn add @material-ui/core @material-ui/icons

---

참고한 사이트

 

1) 모달창 만들 때 참고한 사이트

https://velog.io/@seungsang00/React-React-Modal

[React] React Modal

 

2) Header 아이콘 가져온 사이트

https://ikonate.com/#content

Ikonate – fully customisable & accessible vector icons

 

3) 색상 코드 볼 수 있는 사이트 (모달창 overlay background-color에 사용함)

https://www.hexcolortool.com/#0f0f0f,0.74

HTML Color Codes - What's your color

 

4) Prettier

2021.12.13 - [더 알아보기/팁] - Prettier 세팅하기

Prettier 세팅하기

 

5) Reset CSS

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

---

노션

https://www.notion.so/ccfb34c041e444b29d05923414f38cbe?v=b548d83b8ded4c05b882023e3af88e90 

항해99 7주차 2조 기획안