Instagram 클론 프로젝트 후기

1
post-thumbnail

1. 프로젝트 소개

클론 코딩 동영상

전 세계적으로 사용되고 있는 인스타그램 클론 코딩을 통해서 웹, 리액트의 기초적인 개념을 실전적으로 익혀보고자 하였다.

1). 목적

git을 통한 협업으로 실무환경 경험
HTTP 통신을 API, JSON을 활용하여 직접 경험
SPA(Single Page Application) 구축 경험
React 컴포넌트 Life Cycle 이해
Sass, React-Router 등 third party libraries 사용 경험

2). 개발 기간

개발 기간 : 2020/11/05 ~ 2020/11/18 (2주간)

3). 구성원

프론트 5명 (각자 동일한 페이지 구현)

2. 기술 스택 및 구현 기능

1). 기술 스택

React, React-Router, Fetch API, Sass, CRA

2). 협업 툴

Git, Slack, Notion

3). 구현 기능 상세 설명

로그인 UI 구현

  1. ID에 '@'포함, 비밀번호 '5'자 이상일 때 버튼 색상 활성화
  2. 백엔드 수강생과 HTTP통신 규약에 따라 JSON형태로 API 요청/응답 경험

메인 페이지

  1. React Component로 재사용가능한 UI 컴포넌트 구현
  2. Mock Data를 활용하여 fetch 메소드를 활용한 API 사용 경험
  3. state, props, event handling 을 통해 댓글 생성, 삭제

3. 기억하고 싶은 코드

class Comments extends Component {
  constructor() {
    super();
    this.inputCommentRef = React.createRef();
    this.state = {
      comments: [],
    };
  }

  componentDidMount() {
    fetch("API주소를 적었습니다", {
      method: "GET",
    })
      .then((res) => res.json())
      .then((result) => {
        this.setState({ comments: result.commentData });
      });
  }

  inputComment = (e) => {
    e.preventDefault();
    const newComment = {
      id: Date.now(),
      user: "heodeok",
      content: this.inputCommentRef.current.value,
    };
    this.setState({ comments: [...this.state.comments, newComment] });
    this.inputCommentRef.current.value = "";
  };

  handleDelete = (id) => {
    const commentBox = [...this.state.comments];
    const filterBox = commentBox.filter((comment) => comment.id !== id);
    this.setState({ comments: filterBox });
  };

이유?
순수하게 event handler를 사용하는 방법 외에 처음 ref를 활용하여 보았고, state, props의 관계에 대해 명확하게 알 수 있는 계기가 되었다. 또한 순수 자바스크립트에서는 오히려 자주 사용해보지 않았던 map이나 filter를 써본 것이 재밌었다.

4. 느낀점

이번 프로젝트는 위코드에 들어와서 처음 해본 협업 프로젝트였다. 사실 앞 전에 배운 JS나 HTML, CSS를 이용해서 만들어 놓은 페이지를 React 형태로 변경하는 과정이어서 팀원들이 처음부터 각자 어떠한 기능 구현을 담당하고 시작하는 프로젝트와는 달리 git을 활용하여 협업이 어떠한 느낌인지 느껴보는 시간에 가까웠다. 사실 처음에는 이미 만들어놓은 페이지를 단순하게 git을 이용하여 그냥 붙여보는 일이라고 생각해서 별로 크게 생각하지 않았다. 그러나 불행은 원래 예상하지 못했던 곳에서 일어난다고 했던가... 바로 일이 터져버렸다.

우습게 생각했던 CRA작업은 정말 밑바닥을 기초 설계 작업을 제대로 하지 않았을 때 어떤일이 벌어지는지 뼈저리게 느끼게 해주었다. 리액트를 활용한 홈페이지 코딩은 SPA의 특성상 HTML파일이 단 한 개밖에 존재할 수 없다. 결국 한 HTML파일에 각자가 구현한 요소, 디자인이 만날 수 밖에 없는 것은 너무나 당연한 일이었는데 사실 그동안 개인적으로 작업을 하다보니 크게 신경을 안 썼던 부분에서 일이 터질 수 밖에 없었다. 각자가 본인의 페이지만을 위하여 주었던 전역요소, 다른 사람과 겹치는 클래스명 등 서로가 서로에게 치명적인 영향을 줄 수 밖에 없는 것들에 대한 논의가 없었다는게 정말 크게 다가왔다.

물론 이러한 것들을 알고있었는데 논의를 하지 않은 것은 아니였다. 어떻게 생각하면 이제 막 프로그래밍을 배우는 입장이고, 처음으로 하는 프로그래밍 협업이다보니 '무지'에서 기인한 '인적재난' 같은 것이였다.

그러나 '학습'을 하고있는 학생입장에서는 그다지 큰 일은 아니었다. 오히려 다행이라면 다행이랄까? 이번 과정을 통해서 개발이라는 것이 컴퓨터를 켜서 코딩을 하는 기술적인 행위보다는 다른 사람들과 소통과 약속을 통해 서로 함께 일을 잘 할 수 있는 환경을 만들어 나가는게 가장 중요하다는 것을 깨달았다.

사실 기술적으로 모르는 내용은 검색을 하고, 책을 찾아 기술을 익혀서 해결할 수 있는 생각보다 간단한 문제일 수 있다.

하지만 이미 서로가 잘 알고있는 것들 임에도 불구하고, 대화를 나누지 않아 꼬여버린 것들은 아는만큼 오히려 다시 파헤쳐야 할 부분이 너무 많아 더욱 대처하기가 어렵다.

다음 프로젝트 때는 CRA 환경 구축 시, git 협업을 통한 의사 소통 시 팀원들과 상의가 필요한 부분들에 좀 더 많은 시간을 쓸 생각이다. 물론 개발을 진행하는 중간에도 '나의 진행 상황', '팀원들의 진행 상황' 또 이렇게 작업과 관련된 것 외에도 다른 사람과 공유가 필요한 부분들에 좀 더 귀를 기울일 것이다.

profile
일일 개발 기록 블로그

1개의 댓글

comment-user-thumbnail
약 20시간 전

"개발이라는 것이 컴퓨터를 켜서 코딩을 하는 기술적인 행위보다는 다른 사람들과 소통과 약속을 통해 서로 함께 일을 잘 할 수 있는 환경을 만들어 나가는게 가장 중요하다는 것을 깨달았다."👍 1차 프로젝트는 훨씬 더 재밌고 많이 성장할 수 있는 시간이에요 같이 열심히 해봐요💪

답글 달기