프로젝트 소개

• 세상 쉬운 명품 직구 사이트인 Catch Fashion 클론 코딩한 Catch Fabric 프로젝트

프로젝트 선정 이유

• 캐치패션의 기술스택이 저희 프론트엔드의 기술스택과 겹치는 부분이 있어 선택
• 사이트의 기능적으로도 이중화 카테고리, 게시물 필터기능, 장바구니 등등 기본에 충실한 사이트라고 생각이 되어 선택

프로젝트 계획 및 기간

• 📅 2021/06/07 ~ 2021/06/18

개발 팀원

• FE : 정유정, 황윤성
  • front-end GitHub
• BF : 유병건, 범승원, 손창효
  • Back-end GitHub

---

Catch Fabric 시연 영상

---

적용 기술

Front-End

• React.js, JavaScript, sass, html

Back-End

• Python, Django web framework, Bcrypt, JWT, My SQL

Common

• AWS(EC2), RESTful API

협업 Tool

• trello, slack

프로젝트를 하며 FE는 React를 BE는 Django를 새롭게 배우고 협업툴 또한 새롭게 써보게 되는데 그게 바로 trello

우리팀은 trello에 Sprint Meeting, Daily Meeting에서 다뤘던 얘기들과 처음부터 프로젝트 필수 구현 사항/추가 구현 사항을 구분 지어 놓고 진행상황과 BF가 모델링한 데이터가 대략적으로 어떻게 들어갈 것이라든 코드를 적어놓아 trello에만 들어가도 총 상황을 한눈에 볼 수있게 하였다.

처음 사용해봐서 활용을 잘 하지는 못하였고 FE가 2명이라 나누는게 명확했기에 크게 단위를 잡아 티켓을 누르면 보이는 check list를 활용하여 적어나갔지만
멘토님께서 많은 사람들과 프로젝트를 할 때에는 티켓을 잘게 나누어 작성하는 것이 오히려 더 명확하고 자기 일이 무엇인지 알 수 있다고 조언해주셨다

구현 기능

내가 한 구현은 🙋‍♀️로 표시 하였다.

• 회원가입 / 로그인 🙋‍♀️
  동일한 부분을 컴포넌트로 만들어 map으로 재사용
  동일한 컴포넌트지만 조건부 랜더링을하여 다른 조건 걸기
  정규식을 이용한 유효성 검사
• 상품 리스트 페이지 🙋‍♀️
  백엔드에서 데이터를 받아 map으로 값들 넣어주기
• 필터 페이지 🙋‍♀️
  Advanced Router를 하지않고 RESTfull API 주소만 바뀌는 값은 state에 넣어 조건에 맞게 fetch로 데이터를 받아옴 (페이지가 바뀌지 않기 때문에 불필요함)
• Nav 컴포넌트
• 메인페이지
  메인 슬라이드(without API)
• 상품 상세 페이지
  상품의 사이즈별 가격 및 재고 정보 표기

새롭게 배웠던 코드

Login

• 바뀌지 않는 조건은 굳이 state에 넣을 필요 없다!

  React가 뭔가요?,,, 나는 React에 대해서 정말 무지했었다. 무슨 값을 주든 변수를 활용해야한다고 생각을 하지 않고 state에 다 넣었었다.
  멘토님의 변하지 않는 값들은 굳이 state에 넣을 필요가 없고 전역변수, 지역변수를 잘 활용하라는 말씀을 따라 그 이후 생각하면서 쓸려고 노력한다.
  isLogin은 render의 지역 변수임으로 render밖에서 쓸 수 없다

• 조건부 랜더링에 함수를 걸어줄 때는 && 사용을 지양한다

  코드를 계속 줄이는건 가독성과 협업에 용이함 등 많은 이유가 있어 &&을 활용하려고 노력했었다. 그러므로 Link 태그 안에 true면 함수를 불러내는 조건을 걸었는데 계속 개발자 도구에서 warning이 뜨는 것이다.
  개발자 도구에 error가 아닌 warning이 뜨는건 참 마음이 찝찝하여 구글링해보니 함수를 넣을 때는 false 조건일 때는 삼항연산자를 써서 null이라던지 다른 값을 넣어야 한다는 것이다.
  &&은 true일 때는 내가 원하는 값을 보여주고 false면 null을 자동적으로 값이 넣어진다고 알았는데 함수라서 그게 안되는 것 같다.

Sign

Sign stateSign functionSign truthy, falsy 활용Sign에서 주는 component값Sign button onClick

• 0과 1을 truthy, falsy값으로 활용하자!

  바뀌는 값으로 조건을 넣을 때 isGenderValue 같은 state값을 따로 만들고 사용해야하는 줄 알았는데 애초에 0, 1이 false이고 true 값이여서 0으로 설정해두고 그 값을 HTTP 통신 body에 담아 주면 불필요한 state를 만들 필요가 없어지게 된다.
  Sign state, Sign truthy, falsy 활용 사진을 참고

• 바뀌어야하는 데이터 객체는 state에 저장한다

  맨 처음 전역 변수 사용하는 법을 몰랐을 때 state에로 넣었더니 불필요한 state는 지양한다는 피드백을 받고 map을 돌릴 값들을 변수에 넣어 사용했는데 로직을 파헤쳐 보니 state에 넣는게 훨씬 간편할 것같다는 피드백을 받아 변경하였다.
  어느 것이든 꼭 불필요하다고 매번 안쓰는게 아닌 필요할 때는 적절히 사용할 줄 아는 지혜로운 개발자가 되어야겠다.😎

• 객체 안 요소를 바꿀 때에는 spread operator나 concat을 사용하자

  유사배열 특성상 기존 배열을 바꿀 수 없어 바꿀 때는 spread operator를 추가할 때는 concat을 사용하여 문제를 해결한다.

• 모든 객체의 요소가 같을 때만이라는 가정일 때는 메소드 every()를 활용하자

• state(바뀐 값)에 의해 fetch()를 불러내야한다면 callback을 사용하자

CommonInput

• 다른 부분은 키값으로 구분하자!

  Login과 Sign을 CommonInput컴포넌트를 함께 쓰기에 다른 유효성 조건과 text가 있기에 각 부분에 category: login category: sign을 넣어주어 조건을 걸어주었다.

---

📃 회고록을 마치며

우리 21기는 다른 기수와 다르게 FE가 BE보다 더 적은 특징있었기 때문에 화면 구성을 하는데 힘들 것같다고 생각은 했지만 우리 팀은 FE가 2명의 실력도 둘다 월등한지 않아 서로 의지하며 했던 것 같다. (다른 분들과 비교하는 버릇 좀,,, 😂)
거기에 더하여 내가 Login, Sign의 유효성 때문에 진도를 빨리 나가지 못하고 일주일 이상 거기에 머물러 민폐덩어리일 것이다라고 생각해서 기분이 우울했지만
단 한명도 타박하지않고 첫 번째 프로젝트인만큼 화면 구현보다 하고싶은 기능 구현이 우선이라는 말을 들었을 때 정말 고마웠다.

• 나의 성격을 받아주고 친절했던 윤성님
  다음에 다시 팀 만나면 더욱 같이 힘을 나눠서 좋은 페이지 만들어봐요~ 적은 팀원끼리 페이지 만든다고 고생했어요
• 많은 경력과 찐 어른답게 저희 팀을 이끌어 줬던 병건님
  인스타 login, sign 이후에 또 만나게 되었는데 그 때도 지금도 정말 기다려주시고 초보자 눈높이 맞게 설명 잘해주시고 배려있는 코드란 소통이랑 이런 것이란걸 고맙게 알려주신분! 감사의 말씀 드립니다
• 나이와는 다르게 항상 묵직하게 기다려주시는 승원님
  승원님과 같이 데이터를 맞춰보는 경우가 많았는데 제가 해매고 있을 때 작은 것 하나하나 알려주셔서 너무 감사했습니다
• 문제가 풀릴 때까지 도전하시던 창효님
  계속해서 문제를 풀릴 때까지 고심하던 창효님이 생각나네요 다음에는 서로 더욱 좋은 모습으로 만나요~

잔잔한 파도같았던 우리 팀들 비록 태풍같은 변수를 맞설 기회는 없었지만 소통이란, 배려란, 협업이란 것을 배웠습니다 너무 감사드리고 저도 더욱 열심히 공부하여 다음에 만나게 된다면 좋은 모습으로 프로젝트 해봐요😉