[Wecode] 🤸‍♂️위코드 1차 팀 프로젝트 후기(로지텍 프로젝트)🤸‍♂️

🗓 작업 기간

• 2020.09.14 - 2020.09.25

🔧 기술 Stack

• HTML/CSS
• JavaScript(ES6+)
• React
• Routes.js
• SASS
• Git

👫 팀원

• Frontend Engineer : 4명(고재원, 나지은, 임은수, 홍예찬)
• Backend Engineer: 2명(구동현, 홍성은)

💻 기능 구현

• 공통 사항
  👉 CRA 초기 세팅(프론트엔드)
  👉 Git을 통한 코드 저장 및 팀원들간의 코드 공유, 버전 최신화
• 메인 페이지
  👉메인 페이지 레이아웃
  👉네비게이션 바 레이아웃, 백엔드 API 통신
  👉Footer 레이아웃, 백엔드 API 통신
• 회원가입, 로그인 페이지
  👉로그인, 회원가입 페이지 레이아웃 및 모달창 기능
  👉로그인, 회원가입 유효성검사(validation)
  👉fetch를 통한 API호출, 응답받은 데이터를 통한 로그인, 회원가입 기능
• 거래소 페이지
  👉마우스 상품 리스트 페이지 레이아웃
  👉상품 리스트 백엔드 API 통신
  👉filter 기능을 통한 가격별 기능 추가
• 상품 상세 페이지
  👉마우스 상품 상세 페이지 레이아웃
  👉상품 디테일 페이지 백엔드 API 통신 (각 상품의 이미지, 상품 이름, 색상 정보 불러오기)
  👉slick slider 사용한 이미지 슬라이더

🕵‍♂Prologue

이번 2주간의 프로젝트는 내게 많은 숙제를 남겼다.
가장 먼저 나의 부족한 실력을 여실히 깨달았으며,
개발자로서 어떤 마음가짐과 태도를 지녀야 하는가를 되돌아보는 시간이었다.
그리고 그 때 느꼈던 그 절실한 감정과 생각들을 단순히 흘러가는 과거로 여기지 않고 소중한 경험으로 삼고자 잊혀지기 전에 글로 기록해야겠다는 생각이 들었다.
또한 페이지를 구현하기 위해 사용한 코드를 기록해야 할 필요가 있다는 생각이 들었다.
보다 나은 코드, 훌륭한 코드를 작성하기 위해, "진짜 실력있는 개발자"가 되기 위해, 내가 작성한 코드 중에서 어떤 점이 아쉬웠고 이를 어떻게 보완할 수 있겠으며, 기억해야 할 코드가 무엇인지를 기록해놓고자 한다.

✍기록하고 싶은 코드

🥇 map() 함수를 이용한 컴포넌트 생성

로지텍 Account 페이지 레이아웃을 크게 둘로 나눴는데
1)로그인, 회원가입 모달창이 켜지는 부분과
2)링크로 구성되어 있는 부분으로 나눴다.
링크 페이지는 아래의 이미지처럼 구성되어 있는데, 처음에는 하드 코딩으로 레이아웃을 잡았으나 비효율적이라는 생각이 들었다.
이에 따라 InfoBox라는 하나의 컴포넌트 레이아웃을 구성하고, 그 안에 들어가는 동일한 데이터들을 map함수를 이용해 뿌려준다면 보다 효율적이고 깔끔한 코드로 구현할 수 있겠다는 생각이 들었다.
그러나 한 컴포넌트에 들어가는 링크의 갯수가 모두 다르기 때문에 map 함수를 두 번 사용해야 했다.

map 함수를 사용해서 데이터를 먼저 뿌려주고

그 안에 자식컴포넌트를 만들어서 다시 한번 map을 통해 링크 데이터를 뿌려줬다.
(실제로 링크를 타고 다른 페이지로 이동하는 부분까지는 구현하지 않았기 때문에
<span>태그를 사용했고 <Link>태그와 비슷한 scss까지만 구현했다.)

여기에 사용된 Mock Data는 JS파일로 만들었다.
Json파일을 사용하지 않은 이유는 백엔드에서 크롤링한 데이터를 받는 것이 아니라 순수히 map을 사용하기 위해 만든 데이터였기 때문이다.

아쉬웠던 점
같은 컴포넌트임에도 불구하고 처음 레이아웃을 구성할 때 굳이 InfoBoxTop과 InfoBoxBottom으로 나눠 똑같은 코드를 두 번 썼다는 게 아쉬웠다. 레이아웃을 보다 효율적으로 구성하는 연습을 더 해야겠다.

🥈 로그인&회원가입 Validation

로지텍 페이지의 로그인, 회원가입의 경우 아무 정보를 입력하지 않았을 때 위에서부터 순차적으로 빨간 창이 뜨게 되는데, 이를 구현하기 위해 다음과 같은 로직을 구현했다.

1.빨간 창 위에서부터 순차적으로 뜨기
처음 Boolean 값으로 ClassName을 바꾸는 로직을 구현했으나 경우의 수가 3가지가 들어가야 했기 때문에 부득이하게 초기 state값을 null로 잡게 되었다.

2.한 글자 이상 입력됐을 때 빨간 창 없애기

3.유효성 검사

4.모든 조건 충족 시 fetch함수 실행

아쉬웠던 점

• Boolean값의 경우 true, false의 값을 가지는데 3가지 경우를 생각해야 하다보니 null값을 쓰게 되었다. 초기값을 의미있게 설정해야 하는 이유는 해당 프로퍼티가 어떤 타입의 데이터를 다루는지 드러내기 위한 목적도 있는데 이를 벗어났다는 점이 아쉬웠다. 기본 컨벤션을 지키되 원하는 로직을 구현할 수 있는 다른 방법이 무엇이 있는지 고민해봐야겠다.
• 한 글자 이상 입력됐을 때 빨간 창이 없어지는 함수의 경우에도 동일한 함수를 4번 반복했다. 이를 하나의 함수로만 관리할 수 있는 방법이 있는지 찾아봐야겠다.
• 회원가입 시 정규표현식을 사용하지 못했다. 다음에는 정규표현식을 사용한 회원가입 로직을 구현해봐야겠다.

👨‍💻기억해야 할 코드

🥇 모달창 구현 코드

로지텍 홈페이지의 경우 회원가입, 로그인 시 다른 페이지로 이동하는 것이 아니라 모달창을 통해 이루어졌고 이를 구현했다.

1.로그인/회원가입 버튼 클릭 시 모달창 뜨기

2.값을 입력하는 모달창을 제외한 부분을 클릭했을 때 회원가입/로그인 페이지로 나가기

회원가입 컴포넌트에서 props로 받아온 코드

아쉬웠던 점
처음 모달창을 어떻게 구현해야 할지 로직을 짜는 데 많은 시간을 투자했다.
원하는 event를 발생시키기 위해서는 하나하나(차근차근) 로직을 짜야 했는데 한꺼번에 모든 event를 구현해야겠다는 욕심때문에 중간에 로직이 꼬이면서 시간을 효율적으로 쓰지 못했던 것 같다.
원하는 event를 제대로 구현하기 위해서는 손코딩을 하지 말고(뇌를 거치지 않고 손이 먼저 움직이는 행위를 이르는 말) 뇌코딩을 하자!!

😬기억해야 할 감정(마음)들

1. 간절함
어떤 일을 하든 가장 중요한 마음인 것 같다. 무엇이든 간절하지 않으면 원하는 목표에 도달하지 못한다.
이번 프로젝트를 진행하면서 스스로를 되돌아봤을 때 가장 부족했던 부분이 이 부분이었던 것 같다. 간절함보다는 안일함이 더 컸다. '이 정도면 됐겠지'라는 마음으로 매 순간 타협했다.
그러다보니 더 좋은 코드를 구현하고 더 많은 기능들을 구현할 수 있음에도 불구하고 안일하게 2주를 보냈다.
프로젝트 마지막 날, 다른 팀들의 발표를 보면서 '나도 조금 더 욕심냈더라면, 조금 더 간절하게 임했더라면...'이라는 생각이 머릿속을 떠나지 않았다.
결국 간절함이 나를 성장하게 만든다. 간절하게 임해야 원하는 바를 이룰 수 있다.

2. 실패를 두려워하지 않을 용기(포기하지 않는 마음)
개발을 시작한 지 고작 두달여밖에 되지 않았지만, 이 기간 동안 가장 많이 느꼈던 점은, 개발자는 그 어떤 직업군보다 많은 실패를 경험하는 직업 중 하나라는 것이었다.
내가 의도했던 대로 한 번에 기능이 구현될 때보다 그렇지 않았던 경우가, 코드의 로직이 완벽했을 때보다 그렇지 않았을 때가 압도적으로 더 많았다.
수많은 실패에 적응될 법도 했으나 실패는 항상 낯설었으며 좌절과 무력감으로 다가왔다.
그러다보니 코드를 치는 것이 두려워졌고, '더 이상 실패하고 싶지 않다는 마음'이 내 마음속에 안일함을 키워냈던 것 같다.
그러나 앞으로는 항상 마음이 약해질 때마다, 스스로와 타협하고 싶을 때마다 "개발자의 실력은 고통의 총합이다"라는 임백준 개발자님의 말씀을 기억하려 한다.
현재의 실패와 고통을 두려워하여 회피하는 것이 아니라 이를 극복하려는 용기와 포기하지 않으려는 마음이 그 어느 때보다 필요하다.
그리고 어쩌면, 개발자는 평생 실패와 좌절을 마주하게 될테니 이 감정에 빨리 익숙해지는 게 더 좋을지도 모르겠다는 생각이 들었다.

3. 스스로 해결하려는 의지
프로젝트 기간동안 가장 아쉬웠던 부분이었다.
2주간의 팀 프로젝트 기간이 너무나도 짧게 느껴졌고, 내가 맡은 페이지와 기능을 최대한 빨리 구현해야 한다는 생각에 사로잡혀 스스로 충분히 고민하는 시간을 갖지 못했던 것 같다.
코드를 짜다가 막힐 때면 혼자 시간을 갖고 여러 시도를 해본다거나 침착하게 로직을 한 단계씩 생각해봐야 했는데, 조급함으로 인해 충분히 고민하는 시간을 갖지 않고 주변 개발자분들에게 바로 물어보거나 멘토님들께 바로 질문했다.
그렇다보니 내가 고민했던 부분이 나의 것이 되지 않았고, 다른 누군가의 코드가 되어버렸다.
개발자로서 가장 최악인 습관을 기르고 있었다는 것을 깨닫고 이와 같은 실수를 다시 반복하지 않아야 겠다는 다짐을 하게 되었다.
최소한 1시간 정도는 스스로 고민해봐야 한다. 고민하는 시간이 비로소 나의 개발 실력이 길러지는 시간이기 때문이다.
또한 모르는 부분이 생겼거나 막혔다고 해서 바로 주변 사람들에게 도움을 청하는 것이 아니라 StackOverFlow나 MDN같은 사이트를 서칭해서 문제를 해결하는 능력도 길러야 한다는 생각이 들었다.

4. 커뮤니케이션의 중요성
이번 팀 프로젝트에서 처음으로 백엔트 개발자분들과 직접적으로 소통하고 서버를 연결하는 시간을 가졌다. 기존에는 백엔드 개발자와의 직접적인 소통을 경험해보지 못한 터라 그 중요성을 크게 깨닫지 못했으나 이번 프로젝트를 통해서 커뮤니케이션이 정말 중요하다는 것을 깨닫게 되었다.
회원가입, 로그인 페이지를 맡았던 나는 그 누구보다 백엔드 개발자분들과의 소통이 정말 중요했는데, 데이터를 어떤 형태로 어떻게 주고 받을지, 로그인 성공 또는 실패 시 어떤 방식으로 결과값을 페이지에 나타내야 할지 백엔드 개발자분들과 많은 대화가 필요했다.
뿐만 아니라 하나의 전체 페이지를 여러 프론트엔드 개발자가 나눠서 작업하다보니, 초기 git setting부터 public폴더에 들어갈 Data 설정, common.scss, css nesting등등 프로트엔드 개발자끼리도 서로 소통해야 할 부분이 많았다.

🤨Epilogue

2주간의 프로젝트를 통해 가장 많이 들었던 생각은 "같이 일하고 싶은 개발자가 되자"는 것이었다.
같이 일하고 싶은 개발자가 되기 위해 나는 어떤 능력을 겸비해야 할까 고민해봤다.

첫 째, 너무나도 당연하지만 개발 실력이다. 실력이 없으면 아무것도 못하기 때문이다.
실력을 기르자.
항상 간절하고 진지하게 임하자.
스스로 해결하려는 의지를 기르자.
실패를 두려워하지 말고 끊임없이 도전하자.

둘 째, 좋은 사람이 되는 것이다. 누군가 나의 이름을 떠올렸을 때 "같이 일하기 좋은 사람" 또는 "같이 일하고 싶은 사람"으로 인식될 수 있도록
늘 겸손하고,
모나지 않은,
나보다 남을 먼저 생각하는,
건강한 철학을 지닌 생각하는 사람이 되자.