위스타그램 프로젝트 후기

조연정·2020년 10월 20일

위스타그램을 만드는 과정에서 기술적, 기술외적으로 배운 점을 작성해보자.

위스타그램 프로젝트 후기

기존의 위스타그램을 리액트로 다시 만드는 팀프로젝트를 한다고 했을 때, 설렘보다는 두려움이 컸다. '팀에게 민폐를 끼치면 어떡하지', '아직 리액트에 대한 이해가 많이 부족한데' 여러가지 걱정이 앞섰기 때문이다.
팀으로 프로젝트를 시작했을 때 역시나 모르는 부분이 많았고, 팀원들의 도움을 많이 받았다. 처음에는 속도때문에 비교되서 주눅이 들었지만, 긍정적으로 생각하려고 마인드컨트롤을 많이 했다.
다른 사람들과 함께 작업하기때문에 속도가 비교되는건 어쩔 수 없다는 생각이 들었다. 나는 느린 사람이라는 것을 인정하고, 비교하되, '그 사람들이 그만큼 열심히했기때문에 저정도로 잘하는거겠지.나는 나의 속도에서 열심히 하자.' 라는 마음으로 공부하기 시작했다.
이번 프로젝트를 통해서 또 하나 느낀건 모든 사람에게 배울 점이 있다는 것이었다.
기술적으로도 물론 많은 도움을 받았지만, 그 외적으로도 긍적적으로 생각하는 방식, 팀 사기를 올리는 방식, 사람들에게 말하는 방식 등 여러가지를 한 사람 한 사람에게 많이 배우게 되었다.
다음 팀에는 내가 받은 것들을 조금이나마 어떠한 방식의 도움이라도 돌려줄 수 있었으면 좋겠다.

기억에 남는 부분

vw,vh
⁃ viewport Width/Viewport height 이름에서 느낄 수 있듯이 '보여지는 영역'을 기준으로 한 단위이다.
⁃ 1vw=뷰포트 너비의 1%로 계산된다.
⁃ 이들 단위는 브라우저 크기에 반응해 알아서 바뀌게 할 수 있기때문에 사용자가 브라우저 창 크기를 바꾸거나 모바일 화면을 회전시켜도 상관이 없다.

🧠 평소에 단위를 사용할 때 '%'와 'px'만 사용하는 경우가 많았다. 그런데 vm과 vh를 사용하는 동기들이 많은 것 같아서 이 부분에 대해서 알아보았다.
어떤 화면으로 보냐에 따라 웹요소들으 크기가 달라지기 때문에 상대unit을 사용해야하는데, 이때 가장 최상위박스(부모요소)에 vw, vh를 사용해주면 어떤 화면이든 상대적으로 크기가 적용된다.

로그인 화면 유효성 검사

//원래코드
checkVal = (e) => {
    const { name, value } = e.target;
    this.setState({
      [name]: value,
    });
    this.handleBtnColor();
  };

//수정코드
checkVal = (e) => {
    const { name, value } = e.target;
    this.setState(
      {
        [name]: value,
      },
      () => {
        this.handleBtnColor();
      }
    );
  };

  handleBtnColor = () => {
    const { id, pw } = this.state;
    id.includes("@") && pw.length >= 5
      ? this.setState({ isActivated: true })
      : this.setState({ isActivated: false });
  };

input창에 들어오는 eventtargetvalue를 확인하고, id와 pw에 각각 그 값을 저장하고,
handleBtnColor함수를 넘겨준다. 함수는 그 값이 id는 @를 포함하고, pw는 5글자이상이면 버튼색이 변경되는 로직이다.

🧠 checkVal함수가 실행되고, 바로 handleBtnColor함수가 실행되는 결과를 원했다. 하지만, pw 5글자가 아닌 6글자를 쳐야 버튼색이 변하는 문제가 발생했다.
setstate가 비동기방식을 취하기때문에 handleBtnColor함수부분을 뛰어넘고, 바로 render부분으로 가게된다. 다시 1글자를 추가해서 6글자가 되면 render가 2번이뤄져 비로소 버튼색이 바뀌게 된 것이다.
처음에는 async,await(비동기를 동기로 처리하는 문법)로 처리해서 해결했는데 멘토님이 백엔드에서 데이터를 받아오는 등의 동적인 일을 처리하는 경우가 아니라면 사용하지 않을 것을 권하셨다. 이 코드는 로컬 내에서 정적인 부분이기때문에 굳이 쓸 필요가 없고, 콜백함수를 통해서 해결할 수 있었다. setState는 두번째 인자로 콜백함수를 받을 수 있다.

댓글구현기능

//수정코드
showComment = (e) => {
    const { commentList } = this.state;
    this.setState({
      commentList: [
        ...commentList,
        {
          id: commentList.length,
          userName: "mong_123",
          content: this.state.value,
          isLiked: true,
        },
      ],
    });

    this.setState({
      value: "",
    });
  };

//2번째 'concat'방법
this.setState({
      commentList: commentList.concat(this.state.commentList),
      name: ""
    })

들어오는 댓글들을 'commentList'빈배열에 넣어 댓글이 저장되어 화면에 보이게 하는 로직이다.

🧠 원래는 push 메소드를 사용했는데 문제가 발생했다. 리액트는 spa이기 때문에 state값이 변경되면 변경된 영역만 재랜더링이 일어나는 특징을 가지고 있다. 예를들어 1페이지 종이 [1,2,3]이라는 배열이 있고, 그곳에 4를 집어넣는다고해도 1페이지가 적힌 종이 자체는 변하지 않을 것이다. 우리 눈에는 변경된 것처럼 보이지만 실제로 메모리주소는 그대로이기때문에 리액트는 감지하지 못하고, 변화가 없는걸로 인식된다. 반면에 setstate를 사용하면 1페이지는 버리고, 2페이지가 적힌 새 종이를 사용하여 새로운 배열 [1,2,3,4]를 랜더링한다. 이를 해결하기 위해서 기존의 배열을 수정하지 않고, 새로운 원소가 추가된 새로운 배열을 만들어주는 concat함수나 spread oprerator로 배열을 확장시켜줄 수 있다.

댓글삭제기능

//원래 코드
 removeComment = (idx) => {
    this.state.commentList.splice(i, 1);
    this.setState({
      commentList: [...this.state.commentList],

 //수정 코드
 removeComment = (idx) => {
    const { commentList } = this.state;
    const remainComments = commentList.filter((comment) => comment.id !== idx);
    this.setState({
      commentList: remainComments,
    });
  };
...
<button
      className="delBtn"
      onClick={() => this.props.removeComment(idx)}
              >

기존에 남아있는 댓글들을 버튼을 클릭해서 삭제하는 로직이다. 현재 댓글들을 확인하고, filter메소드를 사용하여 들어온 인자(idx)와 commentList의 전체 인덱스값을 각 각 비교하여 다르면 남겨두게 된다.
원래 사용하던 splice는 state 내의 배열 자체를 수정하는 것이고, filter로 걸러내는 것은 새로운 배열을 만들어낸다는 차이점이 있다.

조연정

Lv.1🌷

이전 포스트

TIL36.컴포넌트의 Life Cycle

다음 포스트

위스타그램 프로젝트 후기