[항해99] NEFLIX Clone Coding

고정원·2021년 4월 3일
0

클론대상 : NEFLIX

  • 팀원 : 백엔드 2명 + 프론트엔드 2명
  • stack : Spring, React

-목표 : CRUD + 로그인 흐름 확실히하기
-> 멘토링 후에 우선순위를 정해서 진행하였다.

  1. 메인페이지(로그인)
  2. 로그인/회원가입
  3. 비로그인 랜딩페이지

기존에 React의 서버를 Firebase와 연동하여 작업했는데, 이제 Firebase 대신 Spring으로 작업한 서버와 연동한다고 생각하면 되었다.

[ 기본셋팅 ]
1. 폴더구조 맞추기
2. 깃허브 Repo 생성 + 클론하기
2. 프로젝트생성 : CRA + 패키지 설치

💦내가 만난 에러 1)
상황 : 작업중이던 리액트 프로젝트에 그 어떤 패키지도 add되지 않아서 포기하고, 새로운 리액트 프로젝트 생성 후 package.json파일과 src폴더만 복사해 왔다. 원래 다른분들의 조언대로라면 저렇게 복사 후에 yarn install을 하면 package.json에 있는 패키지들이 잘 설치가 되어야 하는데 yarn install부터 계속 에러가 발생했다.

결과 : 그래서 그냥 하나씩 다 따로 따로 설치했다. material-ui는 여전히 실패...

우선, 블로그마다 해결방법은 조금씩 다르지만 대부분은 yarn install을 추천하셨다. 나는 그마저도 안되서 따로 설치했지만.....

//실패
yarn add @material-ui/core @material-ui/icons
//성공
yarn add immer redux-actions
yarn add redux-thunk redux-logger
yarn add redux react-redux
yarn add history@4.10.1 
yarn add connected-react-router@6.8.0
yarn add react-router-dom
yarn add styled-components

결론은 프로젝트 시작!
(M:meeting/ T:task)

M1. Moc API 관련 회의
: 프론트에서 필요한 데이터와 백엔드에서 전달가능한 데이터 논의

T1. Header 컴포넌트 & Trailer 컴포넌트 구현
: 나는 Header를 팀원분은 Trailer를 시작했는데,
styled component를 적용하는데 아직도 많이 낯설었다.... 나 울어 진짜..

T2. 그에 따른 elements들 구현
Grid,Button,Text... 등

더 공부해야겠다.
하러간다 지금.....

profile
해결문제에 대해 즐겁게 대화 할 수 있는 프론트엔드 개발자

0개의 댓글