[westagram] 인스타그램 클론 팀프로젝트 후기

1. 프로젝트 소개

1) React.js를 활용한 instagram clone (팀 프로젝트)

• HTML, CSS, JS DOM 통해 구현한 인스타그램 클론 사이트의 리액트 버전 구현
• 공통 컴포넌트와 SCSS (common, reset) 활용
• git을 활용한 협업

2) 기간 : 2020. 8. 31 ~ 2020. 9. 11

2. 적용 기술

• HTML, CSS, JS
• React.js
• SCSS(SASS)
• git 

3. 주요 기능

구현한 메인 페이지

 

1) 로그인 페이지 레이아웃 & 컴포넌트화

 - 로그인 페이지 컴포넌트 분리 (로그인, 로그인이미지, 로그인패널)

 

2) 로그인 페이지 이벤트 핸들러 적용

 - id, password 인풋 setstate 기능 활용한 value 전달

 - 버튼 클릭시 main 페이지 이동

 - 서버 fetch 통한 계정 검증 기능 추가

 

3) react-router 통한 페이지 라우팅

 

4) 메인 페이지 레이아웃 & 컴포넌트화

 - 메인, Nav, 피드, 메인 우측 컴포넌트로 분리 적용

 

5) 컴포넌트의 Array.map 활용한 재활용 적용

 - 로그인 슬라이드 이미지

 - 메인 페이지 댓글 리스트 및 우측 추천 프로필 표기 

 

6) 기타

 - Mock data 활용 (댓글리스트, 피드 데이터, 메인 우측 하단 메뉴 등)

 - SCSS 적용

4. 프로젝트 후기

1) 처음 React 배우며 느낀 점

위코드 첫 2주간 구현한 westagram을 react로 변환할 때, 컴포넌트의 분리성과 재활용 기능 등을 고려하지 않고 모두 render() 함수에 때려넣었고, react가 가지는 장점과 컴포넌트화의 강점을 온전히 느끼지 못했다. 첫 코드리뷰 후, 컴포넌트들이 혼재되어 있던 파일을 각각의 파일이 한 개의 컴포넌트만 가지도록 모두 수정하니 react 컴포넌트 재활용의 강력함을 조금 더 느낄 수 있었다. 코드가 깔끔해지니 사이트의 레이아웃을 한 눈에 파악할 수 있었고, 여러 번 코드를 칠 필요없이 Array.map 기능을 활용하여 쉽게 반복되는 구간을 구현할 수 있었다.

 

무작정 작업을 시작하기 보다는, 사이트 전체의 구성을 생각해보고 컴포넌트를 분리해보는 연습도 많이 해볼 수 있었다. 이 컴포넌트는 이 정도로 분리하는게 맞을까? 합치는 것이 효율적이지 않을까? 등을 정말 많이 고민해 볼 수 있는 시간이었다. 추후의 프로젝트에서는 초기 구성에 대한 세팅을 더 연습해보고자 한다.

 

2) 팀으로 진행할 때 다른 점

git 협업을 통해 진행했던 첫 번째 팀 프로젝트였고, 가장 어려웠던 점은 공통 컴포넌트와 SCSS 파일을 사용하다보니, 마지막 merge 때 conflict가 발생하였고, 원인을 파악하는 데 많은 시간이 소요됐다는 점이었다. 대수롭지 않아 보이지만 처음 팀 전체와 초기 세팅을 진행할 때 공통 폴더와 요소 (이미지 폴더, reset.scss 파일, index.html)등에 대한 보다 철저한 검증과 협의가 필요함을 느꼈다.

 

3) 기억하고 싶은 코드

- Login : 첫 setState 메소드 사용

 

로그인 화면에서 유저 ID와 비밀번호 input에 입력하는 값을 컴포넌트의 state에 실시간으로 저장하는 함수를 구현하였고, 처음으로 setState 메소드를 사용하였다. setState 함수가 계속해서 한 박자 늦게 값을 가져오는 것을 발견하고 계속해서 구글링을 했고, 콜백 함수를 추가하여 해결하였다. (asynce await을 통해 해결한 줄 알았으나 해결된 것이 아니었다. 이 것에 대한건 주말에 정리해보려 한다.)

 

나는 길게 짜여진 코드를 줄일 때 희열을 느낀다. validateAccount 함수에서도 초반에 길게 쓰여진 함수를 btnColor 변수에 저장하고 바로 !를 붙여주는 방식을 통해 많이 줄일 수 있었다.

 

  handleInput = (e) => {
    const { value, name } = e.target;
    this.setState(
      {
        [name]: value,
      },
      this.validateAccount
    );
  };

  validateAccount = () => {
    const { userId, userPassword } = this.state;
    const btnColor = userId.includes("@") && userPassword.length >= 5;
    this.setState({
      btnColor: !btnColor,
    });
  };

 

- Main : 피드 데이터 뿌려주기

 

지금은 별 것 아닌듯 하지만, 코드를 짯을 때 당시는 너무나 신기하고 몇 일전에는 잡히지 않던 state과 props에 대한 개념이 잡히는 순간이었다. 처음으로 FEEDDATA Mock 데이터를 만들고 ComponentDidMount 메소드를 통해 state에 저장하였다. 그리고 Map을 사용하여 feedList의 개별 데이터들을 모두 props로 각각의 <FeedArticle>에 넘겨주었다. main -> Feed -> FeedArticle 로 이루어지는 3단 구성을 통해 state/props 개념을 보다 명확하게 정리할 수 있었다.

 

  componentDidMount() {
    this.setState({
      feedList: FEEDDATA,
    });
  }

  render() {
    return (
      <div className="Feed">
        {this.state.feedList.map((article) => {
          return (
            <FeedArticle
              id={article.id}
              profileImg={article.profileImg}
              profileName={article.profileName}
              profileLoca={article.profileLoca}
              pictureMain={article.pictureMain}
              likedByImg={article.likedByImg}
              likedById={article.likedById}
              likedByNumber={article.likedByNumber}
              uploadTime={article.uploadTime}
              commentId={article.commentId}
              commentID={article.commentID}
              commentDetail={article.commentDetail}
            />
          );
        })}
      </div>
    );

 

4) 1차 프로젝트를 앞두고

과정 전체를 시작하기 전에 걱정을 많이 했는데, 어찌저찌 따라온 것 같다. 독학하면서는 실패했던 react를 제대로 사용해보면서 어렵기도 했지만 많은 자신감도 얻었다. 무엇보다 자신감을 얻었던 부분은 이제야 왜 리액트를 사용하여 개발하는가에 대한 것을 직접 몸으로 느껴보면서 개발을 진행했다는 것, 그리고 구현이 어려워 보이는 작업 사항도 구글링을 통해 해결해 나갈 수 있다는 생각이 들었다는 것이었다.

 

5) 개발 철학

계속 공부하는 개발자 (기업인)

위코드의 다른 대부분의 동기들과는 다르게, 나는 수료 후 개발자로의 커리어 전환을 목표로 하고 있지는 않고, 갈 곳과 할 것들이 정해졌다. 이에, 계속해서 다른 분들의 페이스를 따라가고 초심을 잃지 않으려 노력했던 것 같다. 한 달간 힘들었지만 거의 매일 새벽 3~4시에 잠들었고, 배웠던 것을 계속해서 정리하려고 노력했다. 

 

5년간의 회사 생활에서는 단 한번도 느껴볼 수 없었던 몰입의 시간이었다.

 

개발자가 되지 않더라도 개발 공부를 하며 체화된 습관들은 두고두고 나에게 도움이 될 것 같다. 개발자들은 1) 항상 공부하고, 2) 간단한 기능도 꼼꼼하게 구현하고, 3) 더 나은 방식을 계속해서 고민하며, 4) 몰입한다. 이러한 경험을 다른 것들에도 적용하며 일하고 배우며, 남는 시간에는 계속 개발도 하고 싶다.