Westagram

소개

html, css, js 로 인스타그램을 클론해 본 후 react 를 사용하여 다시 만들어 보았다. 이 과정에서 git을 사용한 팀 협업 과정을 간략히 익혀볼 수 있었다.

프로젝트 기간

2020.08.06 ~ 2020.08.16

사용 기술

• React.js(Class형 컴포넌트)
• JavaScript(ES6)
• SASS
• Git

구현 기능

로그인페이지

• id 입력란이 @ 를 포함하고, pw 입력란 5글자 이상 작성시 로그인 버튼 활성화

메인 페이지

• 댓글 추가

• 반응형

기억에 남는 코드

댓글을 추가하는 기능을 구현하는데 어려움이 있었다. map() 함수를 이해하고는 있었지만 jsx 에서 구체적으로 어떻게 구현해야 좋을지 고민을 많이 했다.

class Feeds extends Component {
  constructor() {
    super();
      this.state = {
        value: "",
        list: [],
        like: 100,
      };
}

getCommVal = (e) => {
  this.setState({
    value: e.target.value,
  });
};

addComm = () => {
  if (this.state.value) {
    this.setState({
      list: this.state.list.concat([this.state.value]),
      value: "",
    });
  }
};

addCommToEnter = (e) => {
  if (e.key === "Enter" && this.state.value) {
    this.addComm();
  }
};

// 댓글이 추가되는 ul 태그

<ul className="commentList">
  <li>
    <div>Ya_옹</div>
    <span>아주 좋아요!!!!!</span>
  </li>
  <li>
    <div>Hello_world</div>
    <span>어느별에서 왔니??~~</span>
  </li>
  {list.map((comm, idx) => {
    return <AddComment key={idx} comment={comm} />;
  })}
</ul>

// input 태그

<input
  type="text"
  placeholder="댓글 달기..."
  onChange={getCommVal}
  onKeyPress={addCommToEnter}
  value={value}
/>

// AddComment 컴포넌트

import React, { Component } from "react";

class AddComment extends Component {
  render() {
    return (
      <li>
        <div>hwichan_</div>
        <span>{this.props.comment}</span>
      </li>
    );
  }
}

export default AddComment;

input 태그에서 사용자가 값을 입력하면(onChange 이벤트가 발생하면) getCommVal 함수가 실행되어 입력한 값을 state의 value 에 저장한다.

그 후 enter 키를 누르면 accCommToEnter 함수가 실행되어 입력한 값이 있는지를 판단하고 다시 addComm 함수를 실행한다.

addComm 함수는

this.setState({
  list: this.state.list.concat([this.state.value]),
  value: "",
});

이부분을 통해 빈 배열이었던 list 에 입력한 값을 담은 배열을 concat 시켜준다. 그 후 value 를 다시 빈 string 으로 setState 하고, 실제 input 의 value 에 연결시켜주면(<input value={value} />) 댓글게시가 된 이후 input의 값이 다시 빈 값이 된다.

addComm 함수가 실행되면 this.state.list 는 값이 있는 배열이 된다. 그 값은 사용자가 입력한 값이다.

{list.map((comm, idx) => {
  return <AddComment key={idx} comment={comm} />;
})}

그 값을 댓글을 추가할 부분에서 map() 함수를 이용하여 댓글의 구성을 담은 컴포넌트를 생성하게 하면 댓글 추가기능이 성공적으로 구현된다.

결과적으로

• 팀 프로젝트를 진행하면서 common.scss, reset.scss 와 같이 공통으로 사용하는 것들을 파일로 관리하여 조금더 간결하고 직관적인 코드를 작성할 수 있었다.

• DOM 으로 작업할 때에는 일일이 요소들을 가져와야 했는데, react 에서는 컴포넌트로 관리하여 가독성이 좋은 코드를 작성할 수 있었다.

• Routing 기능을 사용하여 SPA 가 의미하는 것이 무엇인지 몸소 느낄 수 있었다.

• 현업에서 쓰이는 Git 을 통한 팀 작업을 경험해 볼 수 있어서 좋았다. commit message 를 직관적으로 작성하여 진행현황을 명확하게 확인할 수 있어야 한다.

• 결과물을 완성했다고 끝나는 것이 아니라 꼭 리팩토링을 해야 한다. 리팩토링을 하면서 더 공부할 수 있게 되며 더욱 간결한 로직을 구현할 수 있게 된다.

• 나의 코드 뿐만 아니라 github 을 이용하여 다른 사람의 코드를 많이 보는 것이 견문을 넓히기에 아주 좋은 방법이다.