Project | 인스타그램 클론 프로젝트

Instagram Clone Project

0. 요약 | JavaScript + React로 구현하는 인스타그램

• 약 1주일 동안 혼자 바닐라 자바스크립트로 인스타그램을 구현하고, 다음의 2주 동안 팀으로 React를 활용하여 구현.
• CRA 활용한 초기 세팅
• Github 기반 PR 활용하여 피어 코드 리뷰 진행
• 공용 컴포넌트를 공유한 협업 프로젝트

1. 기간 | 약 3주

JavaScript 1주(10/26 ~ 11/1), React 2주(11/2 ~ 11/12)

2. 스택 | JavaScript, CSS 👉🏻 React, SCSS

1) HTML/CSS
2) JavaScript
3) React
4) SASS

3. 구현 사항

1) Vanilla JavaScript

• Local Storage에 코멘트 저장 및 삭제
• 반응형 구현 (media query)
  

2) React

• Router 활용: 로그인 페이지에서 조건 부합 시, 메인 페이지 이동
  

• mock json으로 fetch 사용하여 feed 맵핑
  

• 코멘트 추가 및 삭제 기능

• 피드 및 코멘트 좋아요 기능
  

• 아이디 검색 기능: Mock data 활용, and 조건 검색 기능 구현
  

4. 기억하고 싶은 코드 및 아쉬운 점

Navbar 컴포넌트의 user ID 서치 기능

Vanilla JavaScript로 작성한 코드를 React로 옮기면서 가장 애를 먹었다. 쓰면서도 '내가 지금 잘 쓰고 있는 건가...?'하는 생각이 들었다. 결과적으로 기능 구현이 되었음에도 불구하고 왠지 머리로 날아가는 비둘기를 만든 느낌이랄까..

아니나 다를까.. Pull Request 후, 코드 리뷰에서 멘토 종택님께 이 부분에 대한 피드백을 받게 된다.

더불어 내가 코딩 시작하고 받은 가장 귀중한 FB들을 전해주고 가신다. (이렇게 종택님의 팬클럽에 가입하게 되는 걸까) 결론적으로 나는 React의 setState에 대해 이해하지 못하고 있었고, constructor에서 state로 관리할 필요 없는 변수를 만들어내고 있었다.

이렇게 한 번 수정한 코드를 멘토 준님께도 질문 드리러 갔는데, 이번엔 'and 조건 검색이 되지 않는다'라는 피드백을 받는다. 오... 맞아요😱 setState를 한 번으로 합치려다가 결국엔 초기에 생각했던 and 검색 기능을 아예 놓치고 있었다.

좌우지간 피드백을 받고 수정해본 코드는 아래와 같다. 하지만 아직도 이게 최선이었는지에 대해선 의문이 남는다. (이 글을 보는 누구나 피드백 주시면 감사히 받겠습니다!)

class Nav extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: '',
      isSearchActive: false,
      isListActive: false,
      searchPool: SEARCH,
      filteredUser: [],
    };
  }

모든 userId가 들어있는 searchPool(원본)을 tempSearchPool에 복사해준다. tempSearchPool에서 검색으로 한번 걸러진 결과는 filteredUser다. 그리고 tempSearchPool에 filteredUser를 대입한다. 그 다음 두 번째 검색은 첫 번째 검색 결과에서 이뤄지게 된다.

이런 코드다. Vanilla JavaScript로 만들 때는 'set으로 or 검색도 만들어야지~ and 검색도 만들어야지~'하며 재미있었는데, 여기에 리액트 state 개념이 들어가니까 쬐금 기가 죽었다. 좀 더 공부하고서 다시 작성해보겠다.

spread 연산자의 쿨한 사용

추가로 spread 연산자에 대해 몰랐던 내용이다.. 분명 언젠가 spread 연산자를 처음 보았을 때 구글에 어떻게 검색해야 되는지도 몰라서 'javascript three dots'라고ㅎㅎ 검색했던 기억이 난다. 알아두었다고 생각했는데, 왜 나는 단순 복사 기능만 뇌에 담아두었는가..! 역시 공부한 뒤 TIL은 필수다. 조만간 정리해서 TIL하겠다.

5. 인스타그램 클론 후 달라진 생각

PM으로서 반성

첫 협업 프로젝트에서 PM을 맡게 되었다. 돌이켜보니 내가 좀 더 리더로서 팀원들을 살뜰히 챙겼다면 보다 모두가 성장하는 기회가 되었을까 반성하게 된다. 혼자 코 못 푸는 실력이라고 생각해서 보다 소극적이었던 것 같고.. 😭 그걸 PM이 안하면 누가 하냔 말이다. 다음에는 내가 디딤돌이 되어 팀원들이 나를 밟고 올라ㄱㅏ 더 높은 곳을 보도로..ㄱ..

초기 세팅 구축의 중요성

처음에 팀 레포지토리에서 md 문서로 git 사용 시 주의점에 대해 정리하고 넘어갔었다. 특히 이 부분이 합의가 잘 되어 우리 팀원들은 공통의 git commit message로 깔끔하게 push할 수 있었다! reset.scss나 common.scss 사용도 좋았다.
다음의 협업에서는 보다 처음의 컨센서스를 디테일하게 맞춰보려고 한다. 가령 scss 변수라든지, 컴포넌트의 변수명이라든지..

피어 코드 리뷰의 즐거움

피어 코드 리뷰라는 것도 처음 해봤다. 좋은 의견을 받을 수 있는 건 기본이고, 흥이 난다. 가령 '이런 코드를 쓰시다니 명석하시네요'라든가... '코딩이 수준급이시군요. 한 수 배워갑니다~'와 같은 멘트들을 발견하며, 유쾌하게 코딩할 수 있었다. (아이돌님들 보고 계시나요..?)

(태현님, 영준님, 세원님. 아이돌 같은 멋진 당신들과 함께하여 제 인생이 조금 더 빛이 났읍니다...^^b.. 미래에서 더 멋진 개발자로 다시 만납시다.)

이상으로 오늘보다 더 나은 다음의 프로젝트를 기약하며 글을 마친다.