React 로 Instagram 클론

jamessoun93·2019년 12월 9일
0

WeCode

목록 보기
3/5

Foundations 기간이 공식적으로 시작했다. 나를 비롯한 WeCode 5기 수강생들은 앞으로 프로젝트 전까지 선택한 스택을 집중적으로 공부할 예정이다.

아, 그리고 기다리고 기다리던 Code Kata 도 함께 시작되었다.

Code Kata 란 매주 다른 파트너가 랜덤으로 정해져 매일 한시간씩 Algorithm 문제를 Pair Programming 방식으로 푸는 시간이다.

알고리즘 문제들은 항상 나를 긴장하게 만들지만, 내가 정확하게 알고있는 컨셉에 대한 문제 혹은 내가 이미 접해본 문제의 variation 인 경우 주저없이 코드를 써내려갈 수 있다. 모르는 문제가 나오면 오히려 더 반갑다. 문제를 읽고 나서 원하는게 무엇인가를 정확히 파악한 후 코드로 풀어내기 위해 고민하고 생각하면서 새로운걸 배우는 이 시간이 나는 재밌다.

나는 지금 Code Kata 외에도 따로 Algorithm 문제를 풀고 내 블로그에 올리기 시작했다. 내가 문제를 해결하기 위해 어떤 식으로 접근을 했는지 등을 영어 혹은 한글로 서술하고 있다.


본 주제로 넘어가자.

백엔드 세션 by 은우님

오늘 오후 WeCode 에선 위코드 Founder 이자 백엔드 멘토이신 은우님께서 Foundations 시작을 맞아 백엔드 개발자들이 하는일에 대해 자세히 설명해주시며 real life example 들을 들어주셨다. 은우님 세션을 들으면 왜 항상 흔들릴까... 은우님과 지훈님께 백엔드 꼭 배워보고 싶다...

React 세션 by 예리님

백엔드 세션이 끝난 후 프론트엔드 수강생들을 위한 예리님의 React 세션도 진행되었다.

  • React 가 무엇인지
  • React 로 무엇을 할 수 있는지
  • Lifecycle Methods 리뷰
  • React 를 이용하여 무엇을 만들어 볼것인지
  • webpack vs CRA vs Next.js vs Gatsby.js
  • CSR vs SSR

등등 굉장히 많은것들을 배웠다. (그중 많은것들은 이미 알고있기도 했다)


Westagram -> React 를 이용해 클론

다음 과제는 지난번에 Clone 했던 Instagram 데스크탑 페이지를 React를 써서 구현하는 과제다.

React 없이 html/css 만 써서 반복되는 요소들을 구현하는게 굉장히 불편했는데 드디어 Component 를 짜서 구현해볼 기회가 왔다.

솔직히 Westagram에는 dynamic 한 content가 필요가 없다. 그래서인지 이미 html/css 만으로 클론했을때 css를 다 구현해놓은 상태여서 비교적 빠르고 쉽게 React로 재구현 할 수 있었다.

댓글다는 기능을 추가로 구현해봐야 하는데 아직까진 어떻게 해야할지 조금 고민이 된다.

profile
Front-end Developer @ WeCode

0개의 댓글