Bitda 프로젝트 회고.

Bitda 링크
git hub 링크

저희 서비스는 빚다 입니다.

빚다의 뜻은 전통주를 만든다 빚는다는 말에서 가지고 온 이름입니다. 그래서 '사용자들의 취향을 빚어, 전통주를 추천해주는 서비스이기 때문에 이름을 빚다라고 하였습니다.

저희 팀장님께서 술을 좋아하셔서... 또 전통주가 이렇게 많은데 사람들이 몰라주는것에 아쉬움이 담긴! 혼이 담긴! 프로젝트라고 말할 수 있겠습니다 :)

(랜딩 페이지 gif)

빚다 속 나의 역할

퍼스트 프로젝트와 같이 저는 프론트 엔드를 맡았습니다.
프로젝트를 하면서 제가 했던 Works :

1. 전체적인 와이어 프래임 및 전체 화면 구성

• UX 기반 UI 페이지 설계
• 아토믹 패턴 페이지 구성
• 로고 및 화면 일러스트 작업
• 반응형 페이지(546px까지 지원)
• 리덕스 기본 세팅(스토어 / 액션 / 액션 크리에이터 / 이니셜 스테이트)

2. 랜딩 페이지

• 랜딩 페이지 구현 / 랜딩 페이지 디자인과 애니메이션
• 캐러셀 라이브러리 사용하여 구현

3. 메인 전통주 리스트 페이지

• 메인 전통주 페이지 구현
• 스크롤 다운시 무한 스크롤 기능 구현

4. AWS 배포

• S3 버켓 생성 후 배포

5. 로그인 및 회원가입

• 유저 정보 페이지 구현 (axios 요청 및 오어스 연결), 디자인 및 애니메이션 효과

6. 마이 프로필 페이지

• 마이 프로필 페이지 구현(전체적인 구성 및 axios 요청)

7. Nav bar 와 Footer

• 네비게이션 바와 풋터 구현 / 디자인
• 풋터 도장 로고 일러스트 작업

사용한 기술 스택

• React
• React Hooks
• React-Router-Dom
• Redux
• React-Redux
• styled-components
• AWS(S3)

(메인 페이지gif)

프로젝트 목표와 만족도

목표
퍼스트 프로젝트와는 달리 파이널 프로젝트에서는 좀 더 높은 목표를 가지고 시작했습나다. 아이디어가 특출 나지 않더라도 유용하게 쓸 수 있고, 배포를 목표로 파이널을 끝내고 싶었기 때문이었습니다.

만족도
90 out of 100.
다행이도 저의 목표대로 이번 프로젝트를 잘 끝낼 수 있었습니다.
우선, 팀원 덕분에 아주 훌륭한 아이디어로 시작했고, 또 휼룽한 팀원들 덕분에 이번에도 감정 싸움없이 처음 부터 끝까지 웃으며 프로젝트를 임했으며, 우리가 구상했던 모든 기능을 구현하면서 프로젝트를 마쳤습니다!
또 퍼스트때 하지 못하고 파이널때 꼭 해보겠다고 다짐한 로그인,오어스 기능도 제가 하게되었습니다.
first project 회고 보러가기!

조금 아쉬운점도 있었습니다. 제 성격상 만족을 잘 안하는 성격이라서 그런지 몰라도 결과는 무척이나 훌륭하지만, 아쉽다고 생각하는 부분은 저 자신이었습니다.
'내가 좀 더 잘 했더라면...', 라이브러리를 사용하지 않고도 캐러셀을 만들 수 있었을 것이고, CSS나 다른 기능을 완벽하게 할 수 있었을것라는 생각이 지금도 듭니다.

프로젝트를 진행하면서 있었던 팩트s.

첫번째 주
첫주는 목요일부터 시작했기때문에, 3일정도 시간이 있었습니다. 이 3일 동안은 팀원들과 모여 API문서 작성, 와이어 프래임, 목업등을 확실하게 만들고 시작하게되었습니다. 그 이유는 퍼스트 프로젝트때 뼈저리게 느꼈던 SR의 중요성 때문이었는데, 이 앞단을 완벽하게 하지 않는다면 중간에 필요한것을 추가하거나 바꾸는 경우가 있기 때문에 이런 상황을 방지하기 위해 많은 시간을 공들이게 되었습니다.

두번째 주
파이널 프로젝트는 퍼스트 프로젝트와 조금 다른 성격을 가지고 있습니다. 퍼스트는 제가 코드 스테이츠에서 배운 스택을 토대로 구현하는거였다면, 파이널 프로젝트는 필요하다고 느껴지는 새로운 스택을 공부한 후에 프로젝트를 만드는 시간이었기 때문에 좀 더 자유롭고 난이도가 높은 프로젝트였습니다.
그래서 이번에 정적인 컴파일이 가능한 타입 스크립트, 스테이트 관리를 위해서 리덕스, 마지막으로 컴포넌트의 구조화와 재사용성을 위해서 아토믹 디자인 패턴과 스타일드 컴포넌트를 공부하게 되었습니다. 아토믹 디자인 패턴은 스택은 아니지만 새로운 개념이었기에 공부할 시간이 조금 필요했습니다.

세번째 주
4주 중 첫 1주일을 이렇게 새로운 스택을 공부하는데 시간을 사용한 후에는 본격적으로 프로젝트의 구조를 잡았고, 같이 프론트 작업을 할 분과 분담하여 코드를 써내려갔습니다.
충분히 공부를 했다고 생각해서 프로젝트에 들어갔지만, 처음부터 너무 힘들게 한부분이 있습니다. 그것은 바로 반응형 버튼...... 새로운 스택으로(스타일드 컴포넌트) 반응형을 만드는것이 마냥 쉽지만은 않았습니다(사실 엄청 스트레스를 받았습니다...). 다행이도 열심히 구글링하고 연구 한 끝에 구현하기는 했지만, 이 버튼을 만드는데 하루 이상을 소비했기에.... 시작부터 진이 빠진 상태로 다른 기능을 만들기 시작했습니다.
이 후에 다행이도 로그인(+오어스), 인피니티 스크롤, 파일 데이터 서버로 전송하기, 리덕스를 사용하여 상태 저장하기 등은 쉽게 끝낼수 있었다.
이렇게 기능을 다 입히고 나서 서버와 연결을 시도했었습니다. 조금씩 수정할 부분이 있긴했었지만, 서버와 연결이 잘 되었습니다.

마지막 주
서버와 연결이 잘 된것을 확인한 후에는 바로 디자인에 들어갔습니다. 우선 제가 맡았던 페이지 랜딩, 로그인, 회원가입 등을 다시 맡아 디자인을 추가하였습니다.
랜딩 페이지에서 캐러셀을 만들어야했습니다. 프로젝트때 최대한 라이브러리를 피하고 싶었기에 다른 부분보다 좀 더 많은 시간을 투자하였습니다. 그러나 아쉽게도 시간이 조금 모자라서 라이브러리 Slick을 사용했습니다. 개발하면서 처음 사용해본 라이브러리였습니다.
또 페이지의 완성도를 높이기 위해서 UX/UI를 공부할때 혼자 습득했던 일러스트와 XD를 사용해서 나름 고퀄리티의 그림을 그려 여러 페이지에 추가하기도 했습니다.

느낀점.

첫번째 주
다행이도 모든 팀원들이 SR단계가 중요하다는것을 알고 있었기에 모두 다 첫 주를 완벽하게 하고자 하는 마음이 있었습니다. 그래서 이번에도 팀을 잘 만났고, 시작이 좋다는 느낌을 받았다. 그리고 SR을 잘 마치고 나니 저번과 같은 실수를 하지 않았다는 생각에 더 잘 할 수 있을거 같은 느낌도 들었습니다.

두번째 주
처음 새로운 스택을 공부할때, 해야한다고 생각했을땐 사실 겁이 났었습니다. 무려 1주일동안 4개 스택을 공부 해야되기때문에 이걸 정말 다 배워서 프로젝트를 마무리 할 수 있을까하는 두려움이 자리 잡고 있었습니다.
이런 생각을 했다는 사실이 어이없게도 배우는 재밌가 있다는 생각이 들었습니다. 타입 스크립트는 자바스크립트와 비슷해서 (제네릭 같은 개념은 어렵기 했었지만) 생각보다 접근하기 쉬웠고, 리덕스도 이전에 맛을 잠깐 본적이 있어서 해볼만 했고, 스타일드 컴포넌트도 사용방법이 생각보다 간단해서 쉽게 배울 수 있었습니다. 문제는 아토믹 디자인 패턴이었습니다.
지금 생각해보면 당연했던것인데, 처음에는 탬플릿은 어떻게 구성되어야하는지, 오가니즘의 범위는 어디까지인지 등과 같은 생각이 조금 혼란스럽게 느껴졌었지만, 프로젝트를 끝 마친 지금에는 사용하기 정말 잘했다는 생각이 들었습니다.

세번째 주
앞에서 구조를 잡고나서 각 컴포넌트에 기능을 입히기 시작했습니다. 정말 반응형 버튼을 제외하고는 어려웠던것은 없었습니다. 커먼 스트럭쳐에서 쉽게 쉽게 구현했던 반응형 버튼을 처음부터 시작했는데, 아토믹과 스타일드 컴포넌트를 사용하다보니 어떻게 해야 버튼을 만들 수 있을지 고민만 반나절을 보내고, 구현하는데 하루가 너무 넘게 걸렸었던거 같습니다. 당시에는 처음부터 이렇게 어려워서 어쩌나 하는 생각에 너무 스트레스를 받았었습니다... 그래도 정말 풀고자 하는 노력에 하루 이상은 걸렸지만 마무리했습니다. 또 어려움을 내 힘으로 풀었다는 생각에 정말 뿌듯했습니다.
버튼을 제외하고 개인적으로 인피니티 스크롤 기능이 어려울거라고 생각했지만, 생각보다 너무 간단해서 쉽게 끝낼 수 있었고, 오어스도 오래걸리지않고 금방 끝냈습니다.
또 서버도 연결이 거의 한번에 성공! 뿌듯함이 배가 되는 순간이었습니다!!

마지막 주
CSS는 항상 기쁨과 스트레스를 주는 녀석들이었습니다. 기본적으로 틀을 잡고, 일반적인 기능과 애니매이션 추가 등은 너무 재밌었지만 사용자들의 위해서 반응형을 만들어야했기 때문에 기존에 rem으로 엘리먼트를 정해놨었지만, %으로 고치는등 수정 작업들이 많았습니다. 개인적으로 이렇게 디테일 잡는것을 싫어하지않아서 다른 팀원들보다는 덜 힘들었을거 같기도합니다만 조금 스트레스를 받았다는것은 사실입니다.ㅎㅎ
반응형은 조금은 스트레스였다면 캐러셀은 절 좀 힘들게했습니다. 잘하고 싶은마음에 라이브러리를 손대고 싶지않았고, 시간도 많이 할애할 수 없었습니다. 그래서 혼자 열심히 찾아보면서 구현에 힘을썼지만, 라이브러리를 손댈 수 밖에 없었습니다. 그래서 구현하지 못한 아쉬움에 언젠간 나혼자 캐러셀을 꼭 만들어봐야겠다는 다짐을...!!!

배운점 및 교훈

1. 아토믹 패턴과 스타일드 컴포넌트

이번에 아토믹 패턴과 스타일드 컴포넌트를 사용하였습니다. 그 이유는 퍼스트 프로젝트때 컴포넌트를 구조화와 재사용성에 대해 무심했었습니다. 그래서 컴포넌트들이 너무나 많았고, 정리가 안되어서 복잡하다는 느낌을 많이 받았습니다. 그래서 이번 프로젝트에서는 이 부분을 개선하고자 사용하게 되었습니다.

처음 공부해본 패턴이고 스택이기에 처음에 많이 버벅거렸지만, 지금 생각해보면 정말 잘 사용했다는 생각이 듭니다. 특히 아토믹 패턴 덕분에 숲을 더 넓게 볼 수 있는 눈을 가진거 같았고, 재사용을 함으로써 복잡함도 많이 줄 일 수 있었습니다.

물론, 처음부터 완벽하지는 않았습니다. 처음에 구조를 잡을 당시 재사용성의 매력에 빠져 그냥 버튼이면 버튼, 버튼과 글이 합쳐진 몰레큘즈 등만 만들어 놓고 여러 페이지에 사용했었습니다. 이 실수때문에 제가 나중에 디자인 작업에 생각치 못한 시간을 허비하게 되었습니다.
예를들어 이미 만들어진 버튼 아톰을 빨갛게 만들면, 원하지 않았던 페이지의 버튼도 빨갛게 변해있었습니다.....

그래서 고치기 위해서 찾은 방법은 기준을 잡아 아톰 컴포넌트를 생성하는것이었습니다. 저같은 경우에는 유아이를 기준으로 컴포넌트를 만들고, 조금 수정해야할 부분이 있다면 프롭스로 내려서 조금씩 수정할 수 있게 변경하였더니, 제가 원하는데로 다 디자인을 입힐 수 있었습니다. 정말 숲은 보지 못하고 나무를 정밀 조사했었던 경험이었습니다.

그래도 이 삽질 덕에 교훈을 얻을 수 있었습니다.
첫번째는 좀 더 숲을 볼 수 있는 능력을 키운거 같아서 의미있는 삽질이었다고 말하고 싶습니다.
두번째는 컴포넌트의 구조화와 재사용성을 위해서는 기능과 유아이를 분리해서 작성하는것이 나중에 제가 한 삽질을 되풀이하지 않을 수 있다는 점도 교훈 리스트에 푸시했습니다.

2. 상태관리를 위해 사용했던 리덕스.

첫 프로젝트때, 여러 페이지에서 상태관리가 잘 되지않아서 땀 좀 흘렸던 기억이 있습니다. 그래서 이번에 같은 실수를 방지하고자 리덕스를 도입하게 되었습니다. 순진하게도 도입할때만해도 우린 완벽해! 를 외쳤었는데요. 다른 페이지에서는 리덕스를 정말 잘 활용해서 스테이트를 잘 관리 할 수 있었습다만 제가 잘 못 생각했었던 점이 있었습니다.

그것은 바로 '로그인 상태를 유지를 리덕스로 쉽게 할 수 있겠다'라는 생각이었습니다.
새로고침을 하면 가지고 있던 스테이트가 초기화 되는것을 알고 있었습니다. 그래서 로그인 유지 상태 지속 시키기 위해서.... 리덕스를 사용하면 해결 할 수 있겠다고 생각했었지만, 새로고침을 하니 리덕스 스토어에 저장된 스테이트도 같이 하늘로 날아가는것을 발견하고... 잠시 멍때렸던 기억이 있습니다.... ㅎㅎ

이 문제는 생각보다 간단하게 풀었습니다. 저번과 같이 로컬 스토리지를 사용하여 로그인 유지를 시켰었습니다. 그 당시에 로컬 스토리지를 사용하는것에 부정적이었지만, 무지했기에... 그렇게 생각했던거 같습니다. 분명 로컬 스토리지를 사용하는 방법보다 더 좋은 방법을 사용할 수 도 있겠이지만, 그 부분은 댓글로 달아주시면 다음에 좀 더 공부해보는걸로 하겠습니다 !

잘한점

1. 커뮤니케이션.

이번 파이널에서도 커뮤니케이션은 좋았던거 같습니다. 저는 프로젝트를 할때, 항상 팀 분위기를 좋게 가지고가야 덜 힘들고, 재밌게 할 수 있었던거 같습니다. 당연히 좋은 결과도 따라오고요. 이 때문에 분위기를 띄우려고 노력도 했고, 좋은 결과를 위해 팀원들과 사소한것까지 의견 공유를 했었습니다.

2. 믿음

퍼스트때 프로젝트가 잘 될까라는 의심을 했었습니다. 회고에서도 그건 잘 못된것이기에 다음 프로젝트를 할때는 안해야지라는 생각을 가지고 이번 프로젝트를 참가하였습니다. 그래서 그런지 몰라도 정말 내 믿음대로 잘 나왔고, 항상 즐겁고 자신감을 갖고 일하는것이 최고라는 생각을 했습니다 :)

어려웠던 점 또는 아쉬운점

아쉬운점이라면 위에서도 언급했듯이 2프로 부족했던 저의 실력이었습니다.. 제가 잘한다고 생각하지도 않지만, 못한다고 생각하지도 않습니다. 그런데 이번에 캐러셀을 만들면서... 또 반응형 버튼을 만들면서... 제가 좀 더 잘 했더라면 더 많은 기능 또는 CSS를 더 잘할 수 있었지 않았을까? 라는 생각이 들었습니다.

회고를 끝으로...

다음 프로젝트 또는 계획에 이야기하고 싶지만,

4주동안(말은 4주지만 ... 실상 3주...) 새로운 스택을 배우고, 팀원들과 행복하게 코딩하고, 결과물까지 완벽하게 배포한 제에게 칭찬을 먼저 해주고 싶다.
퍼스트와 파이널을 휴식 없이 달려왔기에 휴식을 주고 싶지만, 아직 취업이라는 인생의 숙제와 우리 프로젝트를 더 디벨로 시키고자하는 욕망에 리팩토링이 남아있습니다. 또 코드 스테이츠에서 준비해준 이력서 작성하는 스프린트까지. 아직 쉴 수 없는거 같습니다.

어쨋든, 같이 프로젝트 작업한 우리 팀원들 너무 고맙다. 또 내일이 마지막인 코드 스테이츠 스탭님! 덕분에 재밌게 코딩하고 결과물도 잘 나왔습니다. 정말 감사합니다!!

위의 사진은 일반 유저에게는 보이지않지만, 어드민 계정으로 들어오면 데이터를 추가할 수 있는 어드민 페이지입니다.