저스트코드 풀스택 1차 프로젝트 회고 - 2

🎤 같이 위-챠! 위-챠!

1. 프로젝트 소개

🎬 클론 사이트 : https://pedia.watcha.com/ko-KR

🎬 사이트 소개 : 영화, 책, TV 프로그램 추천 및 평가 서비스를 제공한다.

🎬 위챠위챠 Github : https://github.com/wecode-bootcamp-korea/justcode-4-1st-wetchawetcha-front

🗓 진행 기간 : 2022.3.28 ~ 2022.4.8 (12일)

🙋 참여 인원 : 공민지(Front), 김영서(Front, Back), 서채원(Front, Back), 이의택(Back), 임경훈(Front, Back)

🧑‍💻 사용된 기술

• Language : JavaScript
• Front-end : React JS
• Back-end : Node JS
• DataBase : MySQL

2. 구현 기능과 역할

시연 영상 : https://www.youtube.com/watch?v=HkkZfwLtfis&t

Main Page

페이지 첫 화면으로 컨텐츠가 정렬되어 있는 모습이다. 각 카테고리 별로 슬라이더 기능을 구현해 가로 스크롤이 가능하며, 포스터를 클릭할 시에는 각 디테일 페이지로 이동된다. 메인 페이지에서 Header 부분에 있는 기능 구현을 담당했다.

Header - 회원가입 & 로그인

로그인 / 회원가입 버튼을 누르면 각 모달창이 나타난다. 정규식을 사용해서 이메일과 비밀번호 값을 확인 했으며, 조건에 맞지 않을 시에는 Input의 색이 변하게 된다. 로그인 / 회원가입 구현은 webucks를 진행하며 해보았기 때문에 보다 수월했다.

로그인 / 회원가입 모달창 안에 있는 회원가입 / 로그인 버튼을 클릭하게 되면 각 모달창으로 이동하게 된다.

// Nav.js
// props를 이용해서 각 컴포넌트에 넘겨주었다.
<Login open={loginOpen} close={closeLogin} openSignUp={openSignUp} />
<SignUp open={signUpOpen} close={closeSignUp} openLogin={openLogin} />
  

모달창이 나타난 후에 스크롤이 되지 않도록 기능을 구현 했었는데, 윈도우 환경에서 마우스 스크롤을 할 때는 원하는 대로 작동하지만 맥에서는 body 이외의 부분이 스크롤이 되어서 (브라우저 영향으로 추정) 흰 여백이 나오게 되었다.

https://www.npmjs.com/package/disable-scroll
스크롤 기능을 아예 막고 싶어서 이 npm package를 사용했다.

 const openLogin = () => {
    setLoginOpen(true);
    disableScroll.on();
  };

  const closeLogin = () => {
    setLoginOpen(false);
    disableScroll.off();
  };

Detail Page

디테일 페이지에서 코멘트 버튼을 클릭할 시에 나오는 팝업을 맡아서 진행했다. 생각보다 구현해야 할 기능들이 많아서 예상보다 시간이 걸리게 되었다.

  useEffect(() => {
    setNum(textValueLength);
  }, [textValueLength]);

  const handleLength = e => {
    if (num > 200) {
      e.target.value = e.target.value.substring(0, 200);
    }
  };

textarea에 key입력이 발생 했을 때, textValueLength에 textarea의 value.length를 넣어주었다. 최신값을 가져오기 위해서 textValueLength가 업데이트 될 때 num state에 값을 새롭게 넣어주어, 실시간으로 변하는 글자 수를 확인할 수 있다. 다만, 팝업을 키고 텍스트 입력 이벤트가 있기 전에는 초기값인 0이 나오기 때문에 수정 예정이다.

<button

onClick={() => {
  isCommented ? commentModify() : commentAdd();
  setPopupOpen(false);
	}}
>
 {isCommented ? '수정' : '저장'}

</button>

fetch를 통해서 데이터를 가져올 때, 데이터가 존재한다면 isCommented의 값을 변경해서 데이터가 존재할 때 / 존재하지 않을 때의 로직과 렌더링을 다르게 구현했다.

3. 기록하고 싶은 코드

useEffect(() => {
    fetch(`/comment/content?movieId=${props.movieId}`, {
      method: 'GET',
    })
      .then(res => res.json())
      .then(result => {
        if (result.CommentResult.length !== 0) {
          setIsCommented(true);
          setText(result.CommentResult[0].comment);
        } else {
          setIsCommented(false);
        }
      });
  });

comment popup이 보여질 때, 만약 저장되어 있던 comment가 존재한다면 그 내용을 textarea 미리 띄워주도록 하는 기능을 구현하는데 가장 많은 시간이 들었다.

comment-popup이 처음 렌더링 될 때 데이터를 한 번만 가져오면 된다고 생각했기에, 처음에는 빈배열을 deps에 넣어주었다. 그랬더니 코드를 수정하고 저장한 딱 한 번만 데이터가 제대로 가져와지는 오류가 발생했다.

그 외에는 CommentResult의 배열이 0으로 받아져 (데이터가 제대로 받아와지지 않음) 원래 저장되어 있던 댓글을 보여줄 수 없었다.

이후에 deps 부분을 생략해서 기능 구현이 이루어지긴 했지만, 그렇다면 해당 컴포넌트가 렌더링 될 때마다 useEffect가 실행되기에 좋은 방법이 아니라는 생각이 들었다. text의 초기값과 가져오는 데이터 모두 string 형식이었기에, 초기값의 문제도 아니라 생각했다.

그러던 중, comment 팝업은 comment 작성 버튼을 클릭하기 전에는 display: none으로 되어있어서 deps가 빈 배열이라면 팝업이 열릴 때가 아니라 전체 페이지가 렌더링 될 때 실행되는게 오류의 원인이 아닐까? 라는 생각이 들었다.

그리고 문제를 같이 고민해주시던 동기 분께서 popup을 관리하는 state를 넣어보면 어떻겠냐 의견을 주셨고, 잘 작동하는 것을 확인하게 되었다. popup state를 deps에 넣어주게 되면 열릴 때, 닫힐 때 총 두 번 호출이 되기 때문에 props로 받은 popupRequest가 변화할 때마다 useEffect를 실행하도록 변경해주었다.

이번 프로젝트를 진행하면서 데이터를 받아오고 사용하는 경우에 가장 많은 오류가 발생했다. 데이터를 한 번 받아오고 사용하는게 끝이 아니라, 데이터 혹은 코드들은 서로 밀접하고 유기적인 관계에 있기에 전체적인 흐름을 놓치지 말아야 하는데 각 기능을 구현하는데에 치중하다보니 흐름을 놓쳐서 생기는 문제였다. 또한 흐름에서 발생하는 오류들은 해결하는데에도 많은 시간이 걸렸기 때문에, 앞으로는 큰 흐름을 계속해서 상기시키며 진행을 하면 도움이 될 것 같다.

4. 숨기고 싶은 코드

정말 부끄럽고 죄송했던 코드..! 였는데 대공사를 거쳐 더 이상 남아있지 않은 내 코드... 원래 메인 페이지의 Collection 부분 또한 내 담당이었는데 다른 부분에서 계획보다 시간을 너무 잡아먹어서 슬라이더 기능만 구현한 채로 다른 기능을 구현하고 있었다. 동시에 메인 페이지를 합쳐야 할 시기가 되어서 맡은 부분을 빨리 끝내신 영서님이 취합을 맡아주셨다.

당시 내 코드는 목데이터 사용도 없이 HTML과 CSS가 거의 전부인 말도 안되는 상태였는데, 더 문제였던 것은 시간을 상당히 할애한 슬라이더 부분이 나는 필요 없었던 것이다..! 회의 중에 얘기를 분명 했었는데 점점 방대해지는 회의량에 회의록 작성을 소홀히 하면서 놓치게 되었다. Collection card 안에 8개의 영화가 들어가야 하는데 4개의 영화가 들어가있었고, 포스터를 누르면 각 디테일 페이지로 연결되는 기능 또한 구현되지 않았었다.

남아있던 티켓을 완료하기에도 시간이 모자랐어서 결국 Collection 부분은 영서님이 거의 처음부터 다시 구현을 해주셨다. 차라리 아무것도 안되어있다면 구현이 더 쉬웠을텐데, 남의 코드를 읽고 이해하고 수정하기가 쉽지 않기에 더 많은 고생을 하셨을 거라고 생각이 들고 정말 죄송했다.

내 말도 안되는 결과물이 다른 사람의 화면에 나타났을 때 너무 창피해서 내가 숨고 싶었다..! 이 일을 계기로 정말 느낀 점이 많았다. 일단 첫 번째로, 회의 기록을 더욱 더 철저히 하자. 회의 때 나온 의견들을 기억할 수 있을 거라고 생각하지 말자! 두 번째는, 마음이 조급할수록 서두르지 말자. 일단 서두른다고 시간이 주는 것도 아니지만, 나 혹은 타인은 마구잡이로 써진 코드를 수정하느라 더 많은 시간을 낭비할 수도 있다. 앞으로 이런 실수는 없어야 한다.😔

5. 1차 프로젝트 회고를 마치며

반복에 지치지 않는 자가 성공한다.

프로젝트를 진행하면서 풀스택으로 공부를 시작하기를 잘했다는 생각이 들었다. 데이터 흐름에 대한 파악이 더 쉽게 이루어졌고, 그동안 공부를 진행하면서 점형으로 남아있던 지식들이 조금씩 연결되어 가고 있다고 느꼈다. 당장 이해가 가지 않아도 가능한 만큼의 지식을 습득하고 계속 공부를 해나간다면 계속해서 성장하는 나를 만날 수 있을 것이란 생각이 들었다. 리액트를 처음 접했을 때 전혀 갈피를 잡을 수 없었던 시기와 비교해보면 재미와 성취감을 느끼며 공부해가는 지금이 매우 즐겁다. 앞으로 더 나은 모습이 되어 있을 나를 기대하며 1차 프로젝트 회고 끝-!🎬