🏡 Team 라인어벤져스

📆 프로젝트 기간

• 2021년 3월 29일 ~ 2021년 4월 09일 (11일)

---

🔜 FrontEnd

• pm. 박경현
• 배담호
• 정승옥
• 김상연

🔙 BackEnd

• 박국현

• 김규동

  
  
  

🌟 팀원 별 작업 현황

• 박경현

• 메인 페이지 구현
  
  

• 배담호

• 로그인 / 회원가입 / 결제페이지 구현
  
  

• 김상연

• 상품 마이페이지 / 장바구니 & 찜 구현
  
  

• 정승옥

• 상품 디테일 페이지 구현

---

🛠 기술 스택

FrontEnd 기술 스택

• React
• React Router
• Sass
• JavaScript

왜 클론 프로젝트를 진행할까?

• 온전히 개발에 집중하기 위해서 이다.
  2주, 정확히 11일동안 기획/디자인/개발까지 전부 다 하기는 쉽지 않다.
  저작권 문제로 데이터를 수집해야 할 부분은 있었지만 그 부분만 제외 하고는
  클론코딩 학습이 너무나 좋다. 특히 개인 프로젝트가 아닌 팀프로젝트 단위에서는 더!

협업 툴

• trello

• slack

• git

✔️ CheckList

트렐로는 잘 사용했는가 ? 🌟🌟🌟

• Trello 와 같은 tool 을 활용하여 스크럼 방식으로 진행하기로 했으나,
  수시로 확인을 하지 못했던 점이다.
  완벽하게 활용하지 못한점이 아쉬웠다!

• [회고] 2차 프로젝트에서는 trello로 계획 및 목표를
  확실하게 설정하고 활용을 제대로 해봐야겠다.
  내가 오늘 뭐했지?✖️
  이번주는 뭘 해야할까? ✖️
  팀원들은 어디까지 진행하고 있을까? ✖️

  라는 생각을 가지지 않게 해야한다.

  2차 프로젝트는 제대로 활용해보자 ! 꼭 꼭 🤙🤙

슬랙으로 소통을 많이 하였는가 ? 🌟🌟🌟🌟🌟

Good !

깃을 잘 사용했는가? 🌟🌟🌟🌟🌟

Pull request PR 작업도 나름 잘 정리했다고 생각한다 👍

✅ Goals

• 메인 → 유저 회원가입 (이메일 인증) → 로그인
  
• 상품 리스트 페이지 → 상품 상세 페이지
  
• → 찜 & 장바구니 → 마이페이지
  
• → 리뷰 , Q&A → 등록한 페이지 보기

🧑🏻‍💻 회원가입

• 회원가입 정규식표현 및 유효성 검사 기능 구현
• 아이디 중복 중복확인 기능 구현
• 이메일 인증 추가 기능 구현 (back에서 통신)
• 비밀번호 일치 (아이콘 색상변경 구현)
• 아이디 중복 중복확인 alert가 아닌 중복 되면 이미 있는 아이디 라는 경고문구 구현
• 아이디 중복 사용 가능한 아이디 일 경우 멋진 아이디 라고 green 색상으로 문구 구현
• 이메일 인증 : 백엔드와 소통하여 가입버튼 클릭 시 이메일 인증 기능 구현 완료

공유하고싶은 코드 !

🏖 MyCode

• 중복검사할때 백엔드에게 에러메세지를 전달 받고, 그 값에 따라
  state값을 String으로 선언하고 업데이트 될때마다 sass에서 색변화를 줄 수 있다.

• 이런식으로 input 밑에 값에따라 문구를
  span 태그로 스타일도 주고, 조건도 줄 수 있다!

• fetch 함수로 백엔드에서 통신된 에러메세지 값과 비교하여
  중복된 아이디를 찾을 수 있고,
  백엔드와 소통하여 정규식표현 , key값 , 전달된 에러메세지 를 받았다.
  소통이 너무나 중요하다!!
  앞만 보고 달려가면 또 다시 맞춰봐야한다.

🧑🏻‍💻 로그인

• JWT 를 사용하여 fetch 함수로 백엔드와 통신을 하고,
  전달된 key값을 받았다. 난 state값으로 지정해주고, 그 값에 따라
  setState 로 업데이트 시켜주었다.
  그 후 토큰을 localStorge 에 토큰 저장 !

공유하고싶은 코드 !

🏖 MyCode

조건이 길 경우에 위와 같이 const 함수안에 상수를 할당 해주고,

조건문 안에 선언한 상수를 넣어주면 가독성이 좋아진다!

if(istAllInputValid){...} //와 같이 fetch 함수도 조건 안에 담을 수 있다.

선언 하지 않고 함수를 만든다면 보다 더 긴 코드가 되고,
가독성도 떨어진다.

회원가입과 로그인 부분은 깊이 있게 들어가면
너무나 어려운 부분이란걸 느꼈다.

조건에 따라 state값이 변화될때,
할당해 주어야 하는 부분이 많았다는 것이다.

ex) 회원가입 pw 일치 - 문구 3가지 색상 변경 / 아이콘도 동시에 변경

🧑🏻‍💻 결제페이지

---

결제페이지는 추가구현이였다.
나는 로그인, 회원가입, 필터기능 까지 분담을 하였으나,
필터기능은 팀에서 진행하기 어려울 것 같다고 하여 보류가 되었다 ㅠ.ㅠ
그래서 결제페이지를 진행했으며,
1차 프로젝트인 만큼 백엔드쪽에서도 시간 관계상 어렵다고 판단하여
주소 api 기능만 구현하기로 했다.

공유하고싶은 코드 !

🏖 MyCode

DaumPostCode 라이브러리를 사용했다.

npm install --save react-daum-postcode

다음 주소 API

기존에 style을 sass로 사용한 반면 api를 사용하면서,
코드를 살펴보니 StyledCompoenet를 한 것을 볼 수 있다.

sass도 네스팅이 편해 잘 사용하고 있지만,
앞으로는 Styled Compoent를 사용화 하게 될 것 같다.

1차 팀프로젝트를 진행하면서

1차 프로젝트를 진행하면서 많은 것을 느끼고 배웠다.

소통이 얼마나 중요한지

• 기업에 가게 되면 개인이 아닌, 팀구성으로 이루어질 것이다.
  앞서 나가서 레이아웃 기능만 짜놓는다고 다 되는것이 아니라는 걸
  확실하게 깨달았다. 소통을 하여 주고받고 티키타카가 되는 형태가 되야한다.

혼자힘으로 해결해가는 능력

• 제일 효과좋은 구글링을 통한 방법
  구글링을 잘하면 무엇이든 두려울 게 없다??
  맞는말인 것 같다.
• 공식문서 참고
• 질문을 올리는 경우도 굉장히 좋다.
  Stackoverflow <<
• 정말 모르면 동기에게 물어보는 것도 해결방법중 하나

기능에 양 보다도 더 중요한 것

기능에 욕심을 부려 앞서 나가는 것보다 더 중요한 것은

조금이라도 더 가독성 있는 코드
디테일한 부분까지 신경 쓰는 것
내 것으로 소화 해 나가는 것
react를 최대한 컴포넌트 재사용 해보는 것
누군가에게 코드 리팩토링 받아, 수정해볼 것

이런 것들이 정말 팀프로젝트를 진행하면서
정말 많이 도움이 되고, 얻어 가는것이 많다고 느낀다.
결과물은 시간을 들이면 나올 수 있지만,
코드의 가독성은 개발자에게 굉장히 중요한 반면,
쓰는것보다 읽히는게 더 많다는 걸 잊지말자.
리엑트의 최고의 강점은 재사용이다 ! !

마지막 후기를 마치며,

keyword ✔️ 소통 / 해결능력 / 가독성
1차 클론코딩을 하면서 팀원들과 재밌게 진행 한것 같았다.
팀 분위기는 정말 중요하다 느끼고 나는 정말 정말 좋은분들과 함께 해서 즐겁고
잊지못할 프로젝트로 기억에 남았다.
1차 프로젝트 토대로 2차 프로젝트는 더 성장한 나를 보고싶다.

---