위코드 1차 프로젝트 회고록

YS·2022년 7월 31일

project

Project

목록 보기

1/2

프로젝트 소개

2주라는 기간동안 프론트와 백엔드가 서로 소통하면서 하나의 프로젝트를 하게 되었는데 우리가 하기로한 사이트는 커피 원두 및 식품 커머스 사이트인 TERAROSA 사이트의 클론 프로젝트입니다 !

팀원 : Front 3명, Back 2명

기간 : 2022-07-18 ~ 2022-07-29

프로젝트 진행

프로젝트를 진행하기에 앞서 사이트를 페이지와 컴포넌트 단위로 분류하였고, 그중에 컴포넌트는 공통적으로 사용하니 컴포넌트를 우선적으로 개발하고 후에 페이지를 개발하는 쪽으로 방향을 잡았습니다.

저희 팀은 작업의 진행도와 의사소통을 위해 협업 툴로 Trello와 Notion을 사용했고, 매일 아침 10시마다 간단한 회의를 통해 어제 무엇을 했고 오늘 무엇을 할 것인지에 대해서와 Blocker에 대해 간단한 회의 후 Notion에 회의록을 작성하고 각자 코딩 후 트렐로 티켓관리를 통해 작업 진행도를 확인하는 방식으로 진행하였습니다.

내가 맡은 Page

Nav

이번에 프로젝트를 시작하고나서 Nav를 처음 봤을 때 난관을 맞닥뜨렸다. 스크롤을 하면 변경되는 Nav라니 보자마자 어떻게 접근해야 할 지에 대해서 고민했던 것 같다. 그러던 도중 스크롤을 감지할 수 있는 이벤트인 window.scrollY를 알게 되어 스크롤에 따른 Y값을 감지하여 변수값으로 지정할 수 있게 됐는데 문제는 이 다음이였다. 변하는 Nav를 어떻게 만들어야 할까 처음에는 CSS적으로 display : none 을 이용하여 접근하는 방식으로 해보았지만 추후에 기능도 넣어야하고 난잡해질 것 같아 포기하고 다른 방법을 모색하던 도중 조건부 렌더링 이라는 것을 알게 되었다. 기존 html+css+JavaScript 에서는 생각지도 못한 태그에도 조건을 걸어 렌더링을 할 수 있다는 것이다. 그렇게 하여 관리하기 쉽게 Nav 랑 SmallNav를 2개 만들어
```
useEffect(() => {
   window.addEventListener('scroll', () => {
     window.scrollY > 0 ? setIsShowNavbar(false) : setIsShowNavbar(true);
   });

   return () => {
     window.removeEventListener('scroll', () => {});
   };
 }, []);
```
이런 식으로 스크롤에 따라 Nav를 보여줄지 SmallNav를 보여줄지 설정하였다.
기존 사이트에는 원래 검색기능이 없어 검색기능을 구현 해보고 싶어 급하게 이번 프로젝트에 추가하게 되었다. 처음에는 Back-end 분들에게 데이터를 다 받아와 그 중에 filter 하는 방식으로 진행하려 했으나, 그렇게 하면 Back-end 분들께서 기능적으로 많이 할 게 없다고 협의하에 위와 같이 입력할 때 마다 fetch() 함수를 호출하고 쿼리스트링을 사용하여 그에 맞는 값만 불러오게끔 하였습니다. 그리고 앞에서 Nav를 만들면서 공부했던 조건부렌더링을 한번 더 사용하여 검색창에 값이 있을 때만 아래에 검색박스가 나오게끔 설정해주었습니다.
-> // 아쉬운점으로는 input태그에 onChange를 걸어 입력할 때 마다 request를 요청했는데 이렇게 하니 "킹콩" 이라는 글자만 입력해도 무려 6번의 get을 요청하게 되는데 지금은 나 혼자라 괜찮지만 많은 유저가 사용하게 됐을 때 서버에 과부하가 많이 걸릴 수 있다고 생각했습니다. 추후에 리팩토링 과정을 통하여 해결방안을 찾아볼 예정....

-> // Nav에 요소들을 ul 과 li 태그로 일일이 입력했는데 데이터를 상수화 시켜 map()을 사용했더니 가독성도 더 좋아 지고 관리하기에도 더 좋아졌다 !

회원가입 페이지

회원가입은 위의 Nav에 비해 비교적 쉽게 구현 한 것 같다. 이번에 처음으로 if문이 아닌 정규식을 사용하여 입력란들에 대해 유효성 검사를 진행하였는데 제가 사용한 정규식은 다음과 같습니다.

처음에는 이 정규식을 어떻게 써야하는 건지 몰랐지만 .test() 라는 찾는 문자열이 있다면 true를 반환해주는 메소드를 이용하여 REGEX_USERNAME.test('문자열') 이렇게 하여 true를 반환시 유효성 검사를 통과하게끔 구현 하였습니다.

const [name, setName] = useState('');
  const [userName, setUserName] = useState('');
  const [passWord, setPassWord] = useState('');
  const [passWordCheck, setPassWordCheck] = useState('');
  const [address, setAddress] = useState('');
  const [phoneNumber1, setPhoneNumber1] = useState('');
  const [phoneNumber2, setPhoneNumber2] = useState('');
  const [email, setEmail] = useState('');

처음에는 이런식으로 모든 input태그의 value 값을 useState를 사용하여 따로따로 값을 지정해주었는데 이렇게 하니 너무 하드코딩이라는 생각이 들어

const [person, setPerson] = useState({
    name: '',
    userName: '',
    paswWord: '',
    passWordCheck: '',
    address: '',
    phoneNumber1: '',
    phoneNumber2: '',
    email: '',
  });

  const onChange = e => {
    const { name, value } = e.target;
    setPerson({ ...person, [name]: value });
  };

이런식으로 객체로 해주었더니 코드가 굉장히 간결해지고 하드코딩에서 벗어난 것 같아 만족스러웠습니다 !

-> 다만 아쉬운게 있다면, 회원가입 버튼을 누르면 공백란에 대해서 alert창을 띄우고 싶었는데 그렇게 하다보니 if 지옥에 빠져버리게 되었다.

이런식으로 if 지옥에 빠져버리게 되었는데 추후에 리팩토링 할 때 어떻게 하면 이러한 하드코딩을 안하고 더 효율성 있게 짤 수 있을지 고민을 해봐야 겠다.

느낀점

이번 프로젝트는 저에게 있어 정말 의미가 컸던 프로젝트 였던 것 같습니다. 제가 코딩을 배우고나서 처음으로 다른사람들과 팀을 이루어 하는 프로젝트였기에 잘하고 싶었고, 한편으로는 막막했습니다. 사이트를 0에서부터 만들어야 하는데 어떻게 시작 방향성을 잡아야할지에 대해 지레 겁을 많이 먹었는데 그래도 다행히 팀원분들과 소통 하고 사이트를 분석하여 세분화하고 기능별, 페이지별, 컴포넌트별로 나누어 각자 분량을 배분하여 진행하게 되었는데, 이번 저의 마음가짐은 "절대 팀에게 민폐가 되지 말자 1인분만 하자 였습니다." 허나 이번 프로젝트에서는 이게 저의 발목을 잡았던 것 같습니다. 열심히 빨리 해내야 한다는 생각이 조급함이 됐고, 팀원들에게 물어보면 민폐라는 생각이 결국 시간을 예상보다 많이 소모하게 되었고, 원래 제가 맡았던 파트를 다른 분이 대신 맡게 되는 경우가 일어났습니다. 저의 고집이 팀의 차질을 일으킨 것이죠. 이러한 점에서 너무 개인주의적 성향이 강했던 제 자신에게 많이 아쉬웠습니다. 이번 프로젝트로 통하여 제가 느낀것은 팀원분들고의 소통을 적극 활용하자 입니다. 팀 프로젝트는 혼자하는 프로젝트가 아닌 팀으로 하는 프로젝트인만큼 팀원분들과 의사소통 과정에서 막히는 부분이나 잘 안되는 부분에서 충분히 얘기하고 같이 고민해보는 시간을 갖자 라고 생각하는 계기가 되었던 것 같습니다.

또한 기능 구현에 있어서 단순히 기능구현만을 목적에 두고 있는 제 자신을 보게 되었습니다. 이게 개발자로서 맞는걸까? 문득 생각이 들었고, 사용자 입장에서 내가 사용자라면 어떨까? 이런게 있으면 더 좋지 않을까? 생각하며 지금껏 개발함에 있어 수동적인 자세를 가졌다면 다음 프로젝트에서는 능동적인 개발자 자세를 갖고 임해보고 싶다라는 생각을 갖게 되었습니다.

기술적인 부분에서도 많이 성장한 것 같습니다. 리액트로 사이트를 만들어 본 것은 이번이 처음인데 덕분에 애매모호했던 useState , props, useState, useLocation 등등 여러가지 개념들에 대해 이해하게 되었고 이번 프로젝트를 하기 전까지는 왜 리액트가 기존 html, javascript방식보다 편하고 쉽다고하는지에 대해 이해가 안갔지만, 조건부렌더링을 처음 알게 됐을때는 신세계였습니다. "리액트에서는 이런것도 되는구나 ! " 내가 너무 편협적인 사고를 갖고 바라보고있었구나 useState나 useEffect도 마찬가지였습니다. 부분 렌더링에 대해 굉장히 놀랐고, 렌더링 개념에 대해 애매모호 했지만 덕분에 리액트 페이지가 어떻게 렌더링되는지에 대해 동작 방식에 대해 많이 이해하게 되는 계기가 되었던 것 같습니다.

백엔드 분들과의 통신과정도 굉장히 재밌었습니다. 기존에는 Mock 데이터만을 이용하여 혼자 데이터를 받아오는 작업만 했는데 백엔드 분들과 키값이나 변수명도 맞춰보고 어느정도의 백엔드 지식이 있으면 백엔드분들과의 소통에서 편하겠구나 생각하게 됐고, 원하던 데이터가 화면에 출력됐을때는 저도 모르게 입에서 환호를 지르게 만들었습니다 ㅎㅎ 그러한 과정들을 반복하여 사이트를 완성했을 때는 너무 뿌듯했고, 이번에 아쉬웠던 점들을 하루빨리 다음 프로젝트에 적용해보고 싶은 마음이 들었습니다.

저는 실패를 두려워하지말라는 말을 좋아하는데 실패가 있기에 성장이 있다고 생각합니다.
세상에 완벽한것은 존재하지 않으며 모든 것들은 오류가 있고 그 오류를 찾아내어 고치는 과정속에서 점점 완벽해지고 성장한다고 생각하기에 이번 프로젝트로 저의 부족한 부분을 발견하게 되었고 이는 제가 고쳐 성장하게 되는 계기가 되었다고 생각합니다.

다음주부터 2차프로젝트를 시작하게 되는데, 이번 프로젝트에서는 아쉬움이 남지 않도록
최선을 다해 열심히 하고 싶습니다 !!!

내일의 나 화이팅 !!!

"나의 개발 노트"

다음 포스트