1차 클론 프로젝트 회고 '200 OK'

1. 시작하며,,

지금껏 내가 해온 팀 프로젝트들은 대부분 성적을 위한 과제나 친구들과의 취미생활 등 진지하게 부담감과 책임감을 갖고 해온 것들은 아니었다. 시작은 좋았으나 늘 소홀해지는 팀원이 있었고, 성공적으로 마쳤다고 생각해본 결과물은 없었던 것 같다.
이번 프로젝트는 달랐다. 개발자 5명이 모여 같은 목표를 향해 같은 마음을 가지고 협업하여 완성해야 하기에 기대감과 동시에 긴장감을 갖고 그 속에서 내 실력은 매우 부족하였기에 더욱 정신 바짝 차리고 잘 "배워야겠다"는 마음으로 (두근두근) 프로젝트를 시작했다. 잘 "해야겠다"보다 잘 "배워야겠다"라고 말한 이유는 나는 정말 아무것도 몰랐고, 선택할 수 있는 사이트를 선정할 때에도 각 사이트별로 차이점을 크게 발견할 수 없었다. 왜냐? 내가 보기엔 모든 것이 도전이었고, 모두 어려워보였다. 아니 어려워보이는 것도 아니다. 이제서야 이런 말을 할 수 있는 것이지, 그렇게 어려운 일인가..? 뭐가 쉽고 뭐가 어렵다는 거지😳 이런 생각들 뿐이었다. 아무튼 자잘한 애니메이션이 많고, 다른 사이트들에 비해 특징이 크게 없는 그냥 흔한 한 e-커머스 사이트인 "스파오" 가 선정되었다. 그렇기에 PET 분석을 자세히 하게 되었고, 개발자 관점으로 보니 아쉬운 점과 좋은 점이 계속 보였고, 그 시간이 나에겐 재미있었다. 그걸 코드로 풀어나가야 하는게 가장 큰 내 임무이지만 ,,,

참고로, 프로젝트를 시작하기에 앞서 필요에 따라 적절한 툴에 빠르게 적응하고 올바르게 사용하는 것도 개발자에게 필요한 능력이라며 개발팀에서 사용하는 트렐로를 사용하기로 했다.

📢 Trello 는 팀 프로젝트 진행 시 유용하게 사용 되는 프로젝트 관리 프로그램!

(아쉬움에 가득 담아본 추가구현들 .... 너무 많네)
💫 간단하게 작성해도 되고, 할 일들이 한눈에 직관적으로 보여서 하루를 시작하거나 나 뭐해야되지 싶을 때 보면 완전 유용하다!

---

회사에서 매일 회의실에 가서 회의를 하는 것처럼 프로젝트를 하면서 'Daily Standup Meeting' 을 알게됐는데, 우리 팀은 매일은 하지 않았고 이 점은 프로젝트에 어느정도 영향을 미쳤다. 시작 전에 멘토님들도 이 미팅이 매우 중요하다고도 하였고, 다른 팀들도 아침마다 모여서 소통을 많이 하던데,, 우리 팀은 오자마자 바로 각자 코드짜기 바빠 눈치가 보여 그때는 말하지 못했는데.. 약간 후회가 된다. 다른 팀들은 그 시간에 소통한 것들이 백엔드 통신에 있어 수월하게 진행된 것 같았다. 우리 팀에 에이스 분이 계셔서 빨리 끝내기는 했지만, 그 분이 없다면 ? 그 분이 있었어도 나는 앞으로의 프로젝트에 있어서 가만히 있을수는 없다. 배우는 것도 이제는 끝이라고 생각한다. 나도 주도적으로 나서서 팀이 나아갈 수 있도록 이끌어야 하고, 기죽지 말자구...!
무튼 현재 상황 및 방향을 공유해가며 작업을 한다는 것은 팀원들 서로가 효율적으로 일할 수 있게 해준다고 생각하기 때문에 앞으로의 프로젝트에 있어서는 'Daily Standup Meeting' 와 trello 를 더 적극적으로 할 것이다.

---

🚀 🚀 🚀 본론으로 넘어가서 🚀 🚀 🚀

2. 회원가입 페이지

처음에 내가 맡은 페이지는 회원가입이었다.

스파오에서 회원가입을 하려면,

회원가입창이 따로 있는게 아니고, 로그인 메뉴를 누르면 로그인 / 회원가입으로 한번더 나눠져서 또 한번 회원가입 버튼을 눌러야 했다. 그래서 우리는 회원가입 메뉴를 nav 바에 바로 넣으려고 했으나, 회원가입 버튼이 main 에 보이면 UI적으로도 굳이 필요없다고 판단하여 한번의 과정을 줄이기로 했다.

스파오의 클론 프로젝트인 만큼, UI적으로 스파오와 유사하게 보이기 위해 실제 스파오 홈페이지의 코드를 참고하려 했다. 가입 정보도, 약관 내용도 모두 table태그로 이루어졌는데, 내가 많이 써보지 않은 태그라 따오는데 어려움도 있었고, 따로 table 태그를 공부하느라 초반에 시간이 조금 걸렸다. 다행히 하나의 행과 열만 만들면 나머지는 금방이라 그 점에 있어서는 간편하다고 생각했으나, 완성 후 멘토님께서 table 태그는 현재 개발자들이 잘 사용하지 않는 태그라 약관 내용에서는 다른 태그를 사용하면 좋겠다고 의견을 주셨다. 그 때도 이미 테이블 태그를 사용중이었는데,, 바로 수정했다.
그리고 예전부터 나는 꼼수로 CSS 를 하는 편이었는데, 팀원분께 질문을 하다가 바로 알아차리셔서 이렇게 되면 수정하기 매우 어렵기 때문에 내가 만든 페이지라고 해서 나만 알아보는 코드를 작성하지 않도록 반성하게 되었다.

짠 ! 완성본이다. 이 중에서 가장 기억남을 만한 기능 두 개만 기록해보겠다.

2-1. 유효성 에러 메세지

처음에 기획한 기능 구현은 크게 유효성 검사, 버튼 비활성화와 체크박스정도 였는데, 정보를 모두 입력 후 버튼을 눌렀을 때 에러를 알려주는 것보다 실시간으로 오류메시지를 알려줌으로써 해당 입력창에서 바로 유효성 검사를 하는 것이 무조건적으로 사용자에게 편리하다고 판단하여 은빈님께 코드를 배웠다.

<div className="signupInputWrap">
    <input
    type="password"
    className="signupInputInfo"
    title="비밀번호 입력"
    name="password"
    value={password}
    onChange={handleInput}/>
</div>
<div id="pwdValidMsg" />
{isValidPassWord ?  //비밀번호 유효성 검사가 true라면?
	(<em className="signupFormCorrect">올바른 형식입니다.</em>) : 
    (<em className="signupFormIncorrect">영문/숫자/특수문자 조합으로 8자리 이상</em>)}

프로젝트 전에 과제에서 삼항연산자를 쓴 적이 있었는데, 이 전까지는 if문만 쓰다보니 물음표 하나가 if-else-return문을 대체한다는 게 익숙치 않아서 어렵다고 생각했는데, 이제 보니 지금은 너무나도 자주 쓰이고 자연스럽게 써갈 수 있는 코드가 되었다는게 신기하면서도 뿌듯하다. 그와 동시에 table 태그를 썼다 보니 불필요하게 감싸져있는 태그들이 너무 많음을 느꼈다..😣

(이런 식으로 말이다..)

2-2. 체크박스

대망의 체크박스다. 나는 차근차근 다 이해하는 것보다 지루하지 않게 일단 따라 치는것을 선호하는 편이라 구글링으로 웬만한 체크박스는 다 찾아보며 20번 정도 썼다 지웠다를 반복했는데, 만만치 않은 녀석이었다. 그러다보니 지친 상태에서 어쩌다 성공을 해버려서 이해를 다 마치지 못한 채 다른 구현들을 위해 넘어가버렸다. 그래서 다른 체크박스 담당 다른 팀원분들과 대화를 많이 했는데 구현했다고는 했지만, 코드들을 설명하지 못하는 내가 너무 부끄러웠다. 그래서 멘토님께 미니수업을 요청하기도 하고, 다른 팀원분들의 코드들도 계속 봤지만, 이해가 쉽지는 않았고 그러던 와중에 다행인지 불행인지 나에게 체크박스가 또 다가왔다🙃 -> 3-1에서 계속..

📌 함수 선언

📌 input 태그에 함수 사용

• handleMonoCheck 는 개별 선택 함수 & checkedState 는 개별 체크박스
• 체크박스 2개 중에 하나는 필수체크 : checkedState[0] / 하나는 선택체크 : checkedState[1]
• const isValidSignUp = (checkedState[0] && checkedState[1]) || checkedState[0];
• handleMonoCheck는 체크박스를 checked했을때 바뀌는 함수이므로 onChange

3. 장바구니 페이지

정호님의 도움으로 회원가입 페이지를 빨리 끝내고, 장바구니 페이지의 레이아웃을 구성하기 위해 스파오 뿐만 아니라 마켓컬리, 네이버, 오늘의 집 등 다른 사이트들을 많이 찾아봤다. 스파오는 또 table을 사용하고 있어서 구조라도 따라해보려 했으나 별다른 특징이 없어서 그냥 내가 생각하는 장바구니를 만들어보는게 빠르다고 판단했다. (무슨 자신감?) 그리고 수미님께서 네이버 개발자 도구를 많이 보라고 하셨던게 생각나서 네이버 장바구니 페이지를 중점으로 레이아웃했고, 여기서 그림자 효과에 카드형식으로 된 장바구니가 이뻐보여 코드를 참고했다.

3-1. 체크박스

녀석이 또 등장해버렸다. 장바구니에서는 뺄래야 뺄 수도 없는 중요한 기능이다. 사실 이전에 '약관 동의' 체크박스에서 썼던 코드에서 숫자만 변경했어도 됐지만, 이해 못한 코드를 다시 한번 쓰기는 싫었다. 그래서 윤국님께 미니수업을 또 받았고, useState를 최대한 안쓰는게 좋다고들 해서 새로 만들지 않고 존재하는 const [productList, setProductList] = useState([]); 에 map을 사용해서 들어오는 장바구니 리스트에 따라 checkedState: !product.checkedState 를 넣어주기로 했다. 나름 이해했다고 생각했는데 다시 보니 역시 쉽지 않은 녀석이다.. 내 코드를 어떻게 서술해야할지 모르겠다. 이건 모른다는 뜻이니까 🥲 체크박스는 2차 프로젝트 전까지 정복해서 돌아오겠다. 뭔가 다른 체크박스 구현방법을 알아냈다고 현란하게 작성하고 싶었는데 다시 보니 OMG 다.

3-2. 컴포넌트 분리

장바구니에 담길 리스트는 계속 바뀌기 때문에 컴포넌트로 분리했고, 그 컴포넌트안에는 count 와 체크박스가 있지만 count에 따라 나오는 총 금액과 그리고 체크박스를 눌러야만 나오는 총 금액은 부모 컴포넌트에 있어서 코드 짜기가 너무 어려웠다. 정호님께서 너무 많이 도와주셔서 결국은 완성은 했는데, (shout out to 정호!🎉) 정호님은 늘 막힐 때마다 고민없이 console.log 로 확인을 하신다. 내가 가장 배우고 싶은 점인데, 이 자리에서 작성하는게 맞는지, 이 코드가 뭘 뜻하는건지, 이 다음은 어떤걸 써야할지 모를 때가 많은데 console.log 로 확인해보면 대부분 해결이 되는 것 같다. 콘솔을 정말 한번도 안 써봤던 내가 지금도 과제를 하면서 콘솔을 찍어가며 조금은 나아가고 있는 것을 보니 뿌듯하다. 장바구니 코드는 정말로 다시 봐야겠다. 배웠던 것들이 다 들어간 충격 집합체여서 이 페이지 하나로 복습을 제대로 할 수 있을 것 같다.

짠 ! 두번째 완성본이다.
회고록을 쓰다보니 기억나는 것들만 주저리 적은 것 같은데, 이쯤에서 끝내고 총 마무리를 해야겠다.

4. 200 OK

로그인 & 회원가입 : F건록님, F준영님, B선정님
메인 : F정호님, B혁주님
상세 : F건록님, B혁주님
장바구니 : F준영님, F정호님, B혁주님

🖥️ 구현 목록

4-1. 로그인 & 회원가입

[공통]

• 아이디와 비밀번호를 미입력시 로그인 버튼 비활성화
• 간단한 회원가입을 위해 기혼여부와 같은 추가 정보는 제외
• 사용자가 본인이 입력한 값이 양식에 맞는지 회원가입 버튼을 누르기 전에 시각적으로 확인 가능
• 필수 사항 미입력시 회원가입 버튼 비활성화

[FrontEnd]

• 사용자의 편의를 위해 회원가입 과정을 간소화
• 이용약관과 가입 정보를 한 페이지에 취합하여 간편한 가입과정으로 변경
• 이메일 중복확인으로 사용자의 토큰이 백엔드 데이터에 저장돼있는지 확인
• 백엔드에서 토큰을 받아 사이트 자체 토큰을 생성하면 그 토큰을 가져와 로그인이 되도록 구현
• 유효성 검사, 필수입력 여부에 의한 레이아웃의 변화로 사용자의 편의를 위해 UI 구성

[BackEnd]

• 이메일 중복 확인
• bcrypt를 사용한 비밀번호 암호화
• 정규식을 이용한 이메일, 패스워드 유효성 검사
• JWT를 통한 토큰 발급

---

4-2. 장바구니

[공통]

• 상세 페이지에서 담은 제품의 색상, 사이즈, 수량의 정보를 카트에서도 한 눈에 볼 수 있게 시각화
• 체크 박스 선택으로 해당하는 상품들을 선택삭제 또는 전체삭제 가능
• 체크박스 미체크시 결제 버튼 비활성화

[FrontEnd]

• 서버에 담긴 장바구니 데이터 불러오기
• 사용자에 따라 장바구니의 상품이 유지
• 체크박스 : 선택 제품에 의해 수량변경, 선택삭제가 가능하며 선택한 제품의 총금액이 보여짐
• 사용자의 편의를 위해 개별삭제와 전체삭제도 가능하도록 구현
• 삭제 버튼 클릭 시 서버 및 클라이언트에서 해당 데이터 삭제
• 결제하기 버튼은 결제페이지로, 쇼핑하기 버튼은 메인페이지로 이동

[BackEnd]

• 상세페이지에서 전송 된 데이터가 CART 테이블에 저장 후 사용자가 체크박스 체크시 그에 맞는 정보가 전송될 수 있도록 API 구현
• 체크박스 체크 후 삭제시 그에 맞는 정보가 CART 테이블에서 삭제 될 수 있도록 API 구현

---

5. 노력 및 아쉬운 점

🗣 앞서 말했듯이, 소통의 중요성을 가장 많이 깨달은 첫 프로젝트였기 때문에 이후의 프로젝트에서는 적극적인 자세로 의견도 제시하고 많이 물어보고 답하며 팀원과의 팀워크를 견고하게 향상시키는 노력을 해야겠다. 또한, 팀원 분께서 말하지 않아도 어려워하는 모습을 보고 많이 알려주시고 코드도 직접 쳐주시며 비교적 빠른 결과를 낼 수 있었는데 아무래도 부족한 실력으로 첫 프로젝트를 시작하다보니 코드를 구현하는 것 외에도 신경 쓸 사항들이 많아서 내가 맡은 페이지의 코드를 다 이해하지 못한 점이 아쉽다. 그러다보니 백엔드와의 통신에서도 바로바로 수정도 잘 못하고 머뭇거리게 되었는데 다음 프로젝트에서는 내가 맡은 부분은 내가 다 온전하게 이해하고, 침착하고 꾸준하게 시도해보며 공부해가며 습득한 후에 스스로 자신있게 코드를 쓸 수 있도록 나아갈 것이다!

👏 그럼에도 성장한 점은 다양한 코드와 페이지의 구성요소를 찾아보고 적용해보며 개발자들이 사용하는 코드들에 대해 점점 익숙함을 더했고, 시작한지 겨우 한달인 내가 2주간 프로젝트를 끝내야 하는데 어떻게 놀 수가 있겠냐며 2주간 밤 12시 이후에 퇴근한 점은 뿌듯하다. 할애한 시간 대비 가시적인 성장은 미비하겠으나,, 흑
무엇보다 나는 서서히 오르는 성장 그래프를 그리고 있고 그게 내가 바라던 바이기도 하다! 영차영차 올라가자 !

---

✨ 메인페이지와 상세페이지에 대한 구현 기능들은 👉🏻GITHUB👈🏻에서 확인해주세요!