[<westagram] Instagram Cloning Project 후기

ShiHoon Yoon·2020년 9월 11일
0
post-thumbnail

A. What to clone

1. 로그인 페이지

1) 레이아웃

2) 로그인 버튼 활성화

- ID & Password 5 Character 이상이면 버튼 색깔이 회색 --> 파란색으로 변경

3) Fetch 함수를 이용한 회원가입 & 로그인 구현

4) 로그인 성공 후 Login.js --> main.js로 이동

2. 메인 페이지

1) 레이아웃

2) 댓글 기능

- 댓글 입력 후 게시 누르면 댓글 추가

B. Clone project flow

1단계 - HTML, CSS, JavaScript 사용해서 Cloning (1주)

2단계 - 1단계 + React 추가해서 Cloning (1주)

3단계 - 2단계 + GitHub통해서 master clone 후 팀원들과 협의를 통해 최종적으로 master merge (1주)

C. What I've learned

1. Pre-React vs. Post-React

1) 이벤트 처리하기

React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 
위해 addEventListener를 호출할 필요가 없습니다. 
대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 됩니다

JavaScript addEvent Listener

React onClick

2) Component, State, & Props

이 세 가지를 React에서 처음 접했을 때 신세계였다.
State & Props 개념은 어려웠지만 일단 "WHY?" 사용해야하는지 바로 이해가됐다.
사용하면 개발인생이 많이 편해질꺼라는 Feel이 바로 왔다.

하지만 오늘 한 가지 아쉬웠던점은 사실을 배웠는데

Parent --> Children --> Grandchildren

Parent에서 Grandchildren에게 DIRECT로 props를 넘기는 방법은 React에서는 없고 Redux에는 있다는 사실...Redux도 꼭 배워야겠다...

3) map 함수 (기억하고 싶은 코드)

알고는 있었으나...쓰지 않았던 map 함수
막판에 멘토 관희님의 피드백으로 map 함수를 많이해서 이제 어느정도 익숙해졌다. 관희님 감사합니다.

이렇게 길고 지저분했던 main.js 파일이

이렇게 반의 반(?)으로 접혔다.

2. Git 사용

팀원들이 각자 본인의 Branch에 push를 해서 충돌이 거의 없을 줄 알았다.
하지만...common.scss, reset.scss 에서 충돌이 많이 일어났다.

React 시작할 때 처음부터 westagram clone해서 했으면...충돌도 없었을 텐데라는 생각이
conflict 되는 부분들을 수정하면서 생각이 많이 났지만...이런 시련도 헤쳐나가라는
wecode 커리큘럼의 big picture (느낌상 종택님 or 준식님) 일 거 같다는 생각이 든다.

덕분에 1차 프로젝트 때 공통적인 폴더들은 팀원들과 충분한 논의와 협의 후 수정해야하겠다는 생각이 들었다.

D. Mentally preparing myself for the next project

1) Understand

개념을 이해하도록하자. 동생말대로 React 공식문서 3번은 읽어보도록하자.

2) Repeat

배웠던 코드는 한 번 더 써보자

3) Intrepid

난 코딩이 처음이다. console.log()가 무엇인지 난 7월에 처음 알았다는 사실!!

profile
Entrepreneurs Should Learn to Code

5개의 댓글

comment-user-thumbnail
2020년 9월 11일

시훈님 수고하셨어요! ^0^

1개의 답글
comment-user-thumbnail
2020년 9월 11일

시훈님 8번의 사랑이 담긴 전화 감사했습니다 꾸벅(_ _) 한 번도 일어나진 못했지만

1개의 답글