WECODE - 2차 프로젝트 회고

김형석·2022년 6월 19일

Megabox WeCode project

WECODE

목록 보기

27/33

위코드에서의 2차 프로젝트가 마무리되었다. 2차 프로젝트 회고는 전체적인 코드보다 기억에 남는 코드와 무엇을 했고 느꼈는가에 대해서 써보려고 한다.

메가박스 사이트를 모티브로 한 프로젝트
사이트: 메가박스(https://www.megabox.co.kr/)
기간: 22.06.07 ~ 22.06.17 (약2주)
개발인원 : 4 Front-end, 2 Back-end
Github

데모 영상

3. 구현 항목

필수구현

소셜로그인, 메인페이지, 무비 리스트, 무비 상세, 예매페이지, Nav / Footer

기술 스택

Front-end

: HTML/CSS, JavaScript, React.js, React-Router, styled-components

맡은 부분

예매 페이지

2차 프로젝트는 1주차 회고에서 말했던 것처럼 예매페이지 하나만 맡게 되었다. 어렵지만 하나니까 완벽하게 구현해보자는 욕심이 많이 났다. 나름 기능구현은 잘했다고 생각했지만 역시 마지막에 query string 기능을 만드는 코드에서 문제가 많았다. query string은 1차에서도 구현했기 때문에 1차 보다 더 클린하게 구현해보자는 마음이 컸는데 너무 아쉬워서 이 부분을 작성해보려고 한다.

아래는 1차 query string 코드이다. 멘토님이 굳이 state를 사용할 필요가 없고 URLSearchParams와 uesLocation을 사용해서 페이지 url에서 query를 관리하라고 했지만 state를 써서 더욱 깔끔하게 사용하는 것을 구현해보고 싶은 마음에 끝까지 state를 사용했다.
왜 그랬을까...

useEffect(() => {
    setDataValues({
      ...dataValues,
      movie: selectMovie,
      theater: selectedTheater,
      date: 0,
    });
  }, [selectMovie, selectedTheater]);

  useEffect(() => {
    const payloadString = Object.entries(dataValues)
      .map(e => e.join('=').replace(/,/g, '&' + e[0] + '='))
      .join('&');
    navigator(`?${payloadString}`);
  }, [dataValues.movie, dataValues.theater, dataValues.date]);

위 코드는 state에 서버에 요청할 여러 값을 저장한 후 하나의 string으로 요청하기 위해서 만들게 되었다. navigate를 사용해서 url에 찍은 후에 location으로 가져와 서버에 요청을 했는데 멘토님을 통해 state를 사용하면 navigate를 사용할 필요가 없다는 것도 깨닫게 되었다...
다시 위에 코드를 보면 하나의 string을 만드는 코드가 깔끔하다고 느낄 수 있다. 하지만 하나의 키 값에 array형태의 값이 들어오면서 부터 문제가 되었다. 확장성에서 보면 별로인 코드인 것이다.
문제가 바로 하나의 주제로 다양한 필터 요청이 어렵다는 것이다. 예매 페이지를 예로 들면 영화 정보를 요청할 때에 movie_id=1&movie_id=2이렇게 요청을 해야 하지만 내 실력이 부족해서 그런지 movie_id라는 키를 다시 찍어주기가 너무 어려웠다.
결국 고민의 고민 끝에 발표 기한이 얼마 남지 않았고 일단 기능이 되도록 구현하자는 마음에 아래와 같이 수정을 하였다.

  const [selectMovie, setSelectMovie] = useState(
    location.state ? [location.state] : []
  );
  const [selectedTheater, setSelectedTheater] = useState([]);
  const [selectedDate, setSelectedDate] = useState('');

  useEffect(() => {
    const dateString =
      selectedDate &&
      `?date=${selectedDate.year}-${selectedDate.month}-${selectedDate.date}`;
    const movieString = selectMovie.map(e => `&movie_id=${e}`).join('');
    const theaterString = selectedTheater.map(e => `&theater_id=${e}`).join('');
    selectedTheater.length !== 0 &&
      fetch(`${API.BOOKING}${dateString}${movieString}${theaterString}`, {
        method: 'GET',
      })
        .then(res => res.json())
        .then(data => {
          setBookingData(data.time_table);
        });
  }, [selectMovie, selectedTheater, selectedDate]);

서버와 데이터 통신을 위하여 조금 바뀌었지만 기본적인 query string을 만든 원리만 보면 될 같다.
한번에 string으로 만들 수가 없어 하나의 state 객체가 아닌 원래 사용하던 state의 정보를 가져와 string을 만들어 주었다. 1차에서 작성했던 query와 별차이가 없어 보인다... 또한 상세페이지에서 원하는 영화를 클릭하여 예매페이지로 들어 올 경우 그 영화가 기본적으로 클릭 된 상황이어야 해서 결국 location도 사용하였다.
진작에 searchParams를 사용했으면 하는 마음과 2차 프로젝트에서 가장 오랜 시간을 사용했지만 만족한 결과가 나오지 않아 가장 기억에 남는 코드로 남겨보았다.

2차 프로젝트를 마치며

WECODE

2차 프로젝트를 마침과 동시에 위코드에서의 2개월이 끝이 났다. 내일부터는 WECODE가 아닌 기업으로 협업을 나가게 된다.
WECODE에서의 커리큘럼은 처음해보는 부분도 있고 아직 적용해보지 못한 부분이 있지만 수월하게 따라갔다고 생각한다. 무엇보다 코딩에 대한 배움보다는 개발자란 무엇인가에 대해서 더 많이 생각을 하게 되고 깨닫는 계기가 되었다고 생각한다.

"엔지니어는 현장의 문제를 해결하는 사람이다. 현장의 문제는 대부분 단일 기술로는 해결할 수 없다. 때문에 여러 방면의 지식이 필요하다. 21세기 엔지니어 교육은 문제를 정의하고 해결하기 위해 적합한 기술을 찾고, 이를 적용하는 것에 초점을 두어야 한다. 가장 중요한 것은 적용 능력 (adaptability)이다. 그래서 협력과 소통으로 새로운 기술을 적용하고 문제를 해결하는 것이 중요하다."
<미래의 교육, 올린>

Don't reinvent the wheel

내가 느꼈던 개발자에 대한 생각이 간결하게 담겨져 있어 가져왔다. 아마 WECODE의 교육 철학도 이와 같다고 생각한다.

바퀴를 다시 발명할 필요는 없다. 하지만 바퀴에 대한 이해는 필요하다. 바퀴에 대한 이해가 있어야 잘 나가는 수레에서부터 자동차까지 만들 수 있는 법이다.
적용능력을 키우자

어떠한 개발자가 되어야 할까

개발자의 길을 걷기 시작한지 7개월차가 되었다. 짧은 시간이기도 했지만 나에게 있어 이전의 시간보다 더욱 빠르게 느껴졌다.

우연히 코딩에 흥미를 가지게 되었다. 내가 하고 싶은 일을 항상 찾고있었기도 했고 막연히 개발자라는 직업을 나의 업으로 삼으면 재미있겠다는 마음으로 퇴사를 하고 코드를 치기 시작했다.

2차 프로젝트가 끝이나고 기업협업을 나가야 하는 입장이 되면서 이제는 단순히 코딩이 재미있어 한다는 마음보다는 어떠한 개발자가 되어야 좋은 개발자이며, 좋은 개발자가 되기 위해서는 어떠한 개발자가 되어야겠다는 것을 생각할 때가 되었다고 느꼈다.

그렇다면 나는 어떠한 개발자가 되고 싶고 되어야 할까? 코딩 잘하는 사람? 소통을 잘하는 사람? 협업을 잘하는 사람? 각자가 어떠한 개발자가
되고 싶은지는 다 다르겠지만 나는 기본적으로 장인 정신을 가진 개발자가 되고 싶다. 진정한 장인은 자신의 분야에 대해 최고의 경지를 위해 끊임없이 배워나간다고 한다. 개발자에게 정말 필요한 정신이라고 생각한다. 궁극적으로는 코드를 끊임없이 다듬으며, 사람들이 삶에 있어 보다 편한 삶을 사는데 기여하는 개발장인이 되고 싶다는 생각을 해보았다.