1차 프로젝트(JSOP)을 마치며

❓ 제이솝?! 그게 몬대. ???: 3팀이 만든 기깔나는 홈페이지지~~

블로그를 평상시에 적는 편이 아니었지만, 이번 프로젝트를 하며, 많은 에러를 만나고 새로운 것을 알게 되었는데 나중에 같은 에러를 만났을 때 당황하지 않도록 기록을 해야겠다는 생각을 했다.

프로젝트에 들어가기에 앞서 나의 마음가짐

먼저 나는 저스트 코드 7기에서 프론트 앤드 부분을 듣고 있고 한 달 동안 공부 끝에 1차 프로젝트를 시작하게 되었다. 사실 아직 부족한 것도 많고 알고 있는 것도 많이 없어서 많이 걱정했는데 항상 이럴 때마다 “팀원들에게 피해 주지 말고 내가 맡은 거 열심히 해내자!” 이런 생각을 되뇌면서 열심히 했다!

왜 이솝이엇을까?

1차 프로젝트는 특정 홈페이지를 골라서 클론 코딩을 하는것이 였는데, 많은 고심끝에 이솝을 선택했다. 사실 나는 평상시에 이솝 제품을 좋아하고 이솝제품들의 패키징도 좋아해서 홈페이지도 이솝스러웠다. 뭔가 절제되어있어 깔끔한데 많은 트렌지션들이 적용되어 있음에도 조잡하지 않은 홈페이지! 였다. 그래서 팀원들도 모두 디자인을 마음에 들어했고 첫 프로젝트다 보니 가장 많이 사용해봤던 기능들이 들어가 있는 e-commerce 부분을 선택하게 되었다.

먼저 우리가 만든 홈페이지 자랑타임 가질게여~

제이솝 스킨케어 | 스킨, 바디 & 핸드 케어 | 제이솝 대한민국

(맛 보기니까 들어가서 보셔용)

STACK

FRONT-END

Javascript

React

SCSS

HTML

BACK-END

Javascript, Express(Node.js), Mysql

dbmate(DB scheme 버전관리)

jsonwebtoken(토큰 발행)

bcryptjs(비밀번호 암호화)

배포

-AWS EC2 (front+back)

어떤식으로 진행 하였나?(feat 트렐로,디코)

일단 프로젝트를 할 때 많이 사용하는 프로그램 내가 알고 있는 대표적인 것들이 “슬랙, 로션, 디스코드, 트렐로(이번에 처음 알았다)” 이렇게 있었다! 하지만 슬랙은 시간이 지나면 메시지가 사라지고 (물론 우리에게 이런 부분은 크게 신경 쓰이지 않았지만) 허들 기능이 있지만 3인 이상은 또 유료 기능이어서 불편했다. 노선은 이미 여러 번 스터디나 프로젝트 전 1달 동안 많이 사용해 봐서 멘토님의 추천으로 새로 찾은 것이 트렐로였다. 그리고 소통을 중요시 해서 회의중에 디스코드 얘기를 스리슬쩍 꺼내 봤더니 다들 좋아해서 서버를 개설하였다!

트렐로

밑에 사진 처럼 여러가지 부분을 만들고 ⇒ 우리의 경우에는 시작전!!하는중~~ 다함~~! 살짝 보류!! 꽉막혀서 풀기 불가 이런식으로 여러 구역을 만들고 티켓을 만들어놓고 옮겼다!! 이름도 밑에 붙일 수 있어서 직관적으로 팀원들이 어느정도 하고있는지, 어느정도 완성되고 있는지 확인할수 있어서 편했다. (아마 여러 기능이 더 있을것이고 더 효율적으로 사용할수 있는 방법이 있다면 댓글로 추천 부탁합니댜~!)

디스코드

디스코드는 많은 사람들이 쓰기 때문에 잘 알것이라고 생각한다. 나 같은 경우에는 주로 학교! 학과에서 디코를 사용 하였기 때문에 학교 디코에서 신기했던 노래 봇 이나 다양한 목적등으로 나눠진 채널을 눈여겨 보다가 이번 프로젝트 디스코드 서버에 적용하였다! 팀원들이 너무 좋아해줘서 기분도 좋고 , 보이스 채널을 통해 궁금한게 있으면 바로바로 물어볼수 있는게 최대 장점이었고, 다들 각자 위치에서 코딩 함에도 불구하고, 보이스 채널을 통해 노래를 들으면서 코딩을 하니 함께 있는 느낌을 받았다! (문제가 생길시, 빠르게 소통을 할수 있어서 코드 진행도 실제로 빨랐당) ㅡ1차 프로젝트가 끝난 현재 이름 대환장 파티가 되었당 귀엽게 봐주세용 애긔라 그래용_

내가 맡았던 것들

-알림창

이렇게 내가 생각했을때 info-bar 유형은 두가지가 있었는데 하나는 페이지로 직접 이동을 하는것이였고 하나는 옆에서 슬라이드 형식으로 나오는 것이였다. 지금은 두개 밖에 없지만 나중에 알람이 추가될 가능성을 생각하여, 컴포넌트로 만들었다 props로 인포바의 타입과 info-bar에 표기될 문구, 그리고 url을 함께 받는것으로 구현 하였다.

-네비게이션바

네비게이션은 카테고리 내용이 열렸을때와, 닫혔을때가 차이가 있는데, 그 차이를 두기 위해 클릭이 되었을때, 닫기 버튼과 다른 기능들이 작동이 되도록 구현하였다. 그리고 카테고리 창이 열렸을때 스크롤이 되어서 밑에 다른 컴포넌트가 보이는것을 막기위해 useState()를 이용하여 막아 주었다.

-검색 기능

검색 페이지는 백에서 전체 상품을 받아와서 그 데이터와 유저의 입력값을 비교해야 하는데 나의 경우에는 백에서 받아오는 데이터의 제목, 그리고 설명 부분에서 유저의 입력값과 동일한 값이 있으면 나타나게 하였다. 이때, 유저가 띄어쓰기를 안 할 경우를 생각하여, 정규식을 이용하여 입력한 문자열과 데이터의 공백을 전부 없앤 다음 includes로 찾아주었다.

-지도 api 사용

카카오 api는 꼭 한번 써보고 싶었는데, 원래 내가 하고 싶었던 것은 장소를 검색하면 전국에서 그 장소를 검색해 왼쪽에 리스트로 뽑아 내는 것 이었는데 단 시간안에 구현을 하려고 하니 힘들어서 그냥 특정 위치를 넘겨주고 지도에서 그 위치를 표시해주는것으로 타협했다. 다음에는 꼭 원래 구현 하려고 했던 의도대로 구현 해보고 싶다! (지도 api관해서는 카카오 dev 홈페이지 가면 가이드 잘 나와있어요!!)

-구매 페이지

구매 페이지는 거의 백엔드와 협업하는 부분이 많았는데 배송정보를 여기서 한번 입력 해놓으면, 다음 주문부터는 저장되어서 다시 입력할 필요가 없도록 했다. 여기서 편집을 눌리면 유저가 새로 입력한 정보가 put으로 db에 저장된 값들이 수정이 된다. 그리고 구매 예정 상품 확인 같은 경우에는, 장바구니 api를 get으로 데리고 와서 데이터를 확인용으로 내보내어 주었다. 그 후 주문 완료를 클릭하면 배송정보와 전체 합계 금은 넘어가도록 해주었다. 이렇게 넘어간 정보는 개인 페이지에서 주문 내역에서 확인할 수 있게 하였다.

-배포

확실히 ec2로는 배포를 예전에 해봤던 경험이 있어서 조금 괜찮았다! 근데 가물가물해서 여러군데 많이 찾고 멘토님께서 올려주셨던 자료를 참고하니 문제없시 잘 배포가 되었다. 확실히 과거에 윈도우에서.. 우분투로 했던것보다 맥이 리눅스 기반(?) 이다 보니 막 복잡하게 설정 안만져 주고 iterm 에서 바로 하니 편리했다.

내가 만났던 깃 오류

평상시에 내가 사용했던 깃 용어들은 git add , git commit , git push 뿐이었는데 협업을 하다보니 혼자서 푸시 할때와는 다르게 서로 같은 폴더에서 작업한 경우에 충돌이 나는 경우도 있었다. 이때 대부분의 경우는 충돌을 깃헙 페이지에서 해결할수 있었지만, 양이 많거나 (아직 정확히 어떤 경우에서 cli 커맨드를 쳐서 해결하라고 하였는지 밝혀 내지 못했다) 이럴때 vscode 터미널에서 git merge를 쳐서 하나하나 충돌을 풀어준다음, merge메세지를 쓰고 다시 push 를 해주면 정상적으로 merge 가 되었다! 그리고 이때까지 main - > develop → 개인 브랜치 이런식으로 코드 작업을 했던것이 아닌 작은 토이 프로젝트같은 것들을 할때는 바로 메인에서 브랜치를 만들어서 했다 보니 많이 헷갈려서 코드 작업을 하기 전에 git status를 쳐서 현재 브렌치 확인을 하는것이 습관이 되었다!!

추가적으로 하고 싶은 것 + 다음 프로젝트에서 보완할 것

-스테이트 관리

스테이트 관리는 아직 부트캠프에서 배우지는 않았지만 친구에게 우리 부트캠프에서 이런거 만들었어~!! 라구 했는데 그럼 스테이트 관리는 뭘로했어? 라고 물어봤는데 들어본 적이 없어서 그게 몬대…. 그거 어케 하는건데.. 라고 눈물 줄줄 흘리면서 물어봤다.. 리덕트..? 리듀스..? 내가 다 뿌셔줄게 근데 지금 당장 이해하고 2차 프로젝트에 적용 시키기엔 혼동이 있을것 같아 공부하고(블로그에 올려야징) 다음 토이 프로젝트에 적용 시켜 볼것같다!

-heroku 배포

이번에 아마존 ec2로 배포를 했는데 괜히 나중에 까먹고 있다가 돈나갈까봐 조금 무서워서 히로쿠에 배포를 하려니 계속 script 에러가 떴다.. 이부분은 아직까지 해결을 못하고 있는데 npm start하면 로컬에서는 잘 돌아가는데 왜 heroku에서 deploy 할려고만 하면 에러가 날까..?( react-script not found) 였다.. 그래서 package.json에서도 heroku npm i / 이런거 추가해서 deploy시, 저 명령어를 실행 하여 모든 패키지를 install 받게도 했었는데 아직 작동하지 않는다,.. 🥲 아마 이부분은 따로 글을 쓸것같다..;-;

1차 프로젝트를 마치며

사실 부트캠프 참가전에 번아웃도 왔고 코딩이랑 내가 안맞나..? 라는 생각을 하면서 다른길을 찾아봐야하나 라는 생각까지 했었는데 부트 캠프에 참가하고 이번 프로젝트를 하면서 내가 모르는 부분은 다른 팀원 한테 물어보고 팀원이 모르는 부분이 있으면 내가 아는한 설명을 해주며 서로 도움이 됨을 느끼며 뭔가 여러모로 자신감도 얻었다!! 내가 누군가에게 도움이 되다니? 이런 생각! 그리고 가장 걱정이 많았던 첫 프로젝트에 너무 좋은 사람들과 팀으로 무엇인가를 만들었다는 것에 너무 뿌듯하고 기분도 좋았다!!! 3팀 진짜 최고쟈냐~~~( 상유니🧅 기밍쿵야🍙 잼민서롸❄️ 우령쿤👻 기혀니✏️ 떵아웅니👶🏻 대짱잼민🙉 나!!! 까지 우리 너무너무 수고 했고 이거 본 팀원들 각자 머리 쓰담쓰담 해주면서 응떡 시키는걸루🍗) 처음쓰는 블로그에 회고록이라 많이 주절주절이었지만 ! 읽어주셔서 감사합니다 :-)

찐찐막으로 여러분 토론토에 첫눈 왔어요오!!!!! 엑소 첫눈 들으면서 마무리 할게용^_^ 뿅