1. 녹템 오더
프로젝트는
pwa + next.js를 사용한 손님이 커피를 주문할 수 있는 모바일 버전과
next.js 만 사용한 매장이 손님의 주문을 확인하고 주문을 받을 수 있으며, 매장 내 음료 매진 처리, 판매 데이터를 확인할 수 있는 pc 버전 두가지를 만들었다.
각각을 따로 repository를 파서 만들었다!
저번 SSG.com 클론코딩에서는 명확하게 어떤 부분을 맡아 진행할지 나눠서 나는 상품 카테고리와 상품 상세보기, 상품 주문을 맡아서 진행했지만
이번 커피 오더 프로젝트에서는 분명 개인의 역할이 있긴 하지만 어떤 부분에서는 다른 사람의 코드를 보고 다른 사람의 코드를 수정하기도 하면서 프로젝트를 진행했다. 물론 conflict을 피하기 위해서 현재 수정하고 있는 페이지를 건드리게 될 것 같으면 미리 말을 하고 다른 부분 진행하고,,, 그렇게 진행했다!
서비스 이름은 녹템 오더로 녹템은 밤샘을 뜻한다고 한다.
커피랑 이미지도 맞는것 같고 우리의 프로젝트 마음가짐도...! 묘하게 밤이 주는 이미지가 신비한 이미지도 있구 해서 전반적인 컨셉은 마법사로 진행했다.
특히 등급 네이밍을 엄청나게 고민했다!
등급 네이밍이 별건가 그냥 하면 안되나 생각할 수 도 있지만 우리는 컨셉에 진심이니깐!
등급 네이밍은 포션 등급 -> 엘릭서 등급 -> 파워 엘릭서 등급
전반적인 UI는 스타벅스의 사이렌 오더를 벤치마킹 했다
나의취향파악 원 그래프를 내가 직접 구현한건 아니지만 너무 귀여워서 마음에 드는 포인드!
nivo라이브러리를 사용했는데 너무 귀엽다!
Home | nivo
nivo.rocks
다음번에 표를 만들만한 프로젝트를 진행한다면 내가 맡아서 해보고 싶다!
디자인 넘 귀여워
신경써서 만들었던 부분
상품을 클릭했을때 카테고리가 해당 상품의 카테고리에 포커스 되도록 하는 부분이다.
사실 만들고 보면 어렵지 않아 보일 수 있지만 처음에 상태관리를 잘못 하기도 했고
음료만 생각하고 만들다가 마감 일주일 전에 급하게 푸드 데이터를 넣으면서 꼬여가지고 생각보다 고생했던 부분이다.
그래도 해결되어서 다행이다
그리고 보시면 알겠지만 다크모드가 적용되어있다!
다크모드 역시 내가 구현한건 아니구 우리 팀원분께서 만들어주셨다
2. 기술 스택
next.js를 사용하는것도 typescript를 사용하는것도 처음이라 정말 어려움이 많았다. 특히 typescript를 사용하는데 있어서 기초적인 공부를 하고 시작한게 아니라 그냥 일단 맨땅에 헤딩! 한거라 진짜 계속 오류를 만났다.
거기다 eslint는 엄청 까다로웠고...린트도 처음써보는거라 린트 오류도 진짜 많았다.
next.js, typescript 둘 다 코딩앙마님의 강의를 들었다
next.js는 이 강의를 처음부터 쭉 봤고,
typescript는 마땅히 좋은 강의가 없어서 이 강의를 중심으로 보고, 그 이후엔 에러가 나는 부분을 중점으로 그냥 블로그 검색을 했다ㅠ
프로젝트를 진행하다가 기초적인 이해가 부족하다보니 이슈가 너무 많았고 프로젝트 중반 이후부터
단숨에 배우는 타입스크립트 책을 통해 기초부터 다지기 시작했다.
근데 프로젝트가 끝난 이 시점... 아직 책 다 못읽었음ㅠㅠ 시간 내에 프로젝트를 진행하려고 하다 보니 시간이 부족했다.
지금은 프로젝트 끝났으니깐!
다시 처음부터 읽어봐야지!
기초가 중요하지 아무렴!
3. CSR 과 SSR
프로젝트를 진행하면서 가장 고민했던 부분은 어디서 SSR을 사용하고 어디서 CSR 을 사용할지였다.
next.js는 SSR 환경을 제공하니 우리는 이 환경을 적제적소에 사용할 수 있어야 할텐데 강의를 봐도
'그래서 우리가 이걸 어느 페이지에 적용해야하는데!'
를 잘 모르겠었다. 팀원들이랑 다른 팀원의 프론트 분들이랑도 이야기해봤는데 어떤 분은 이건 이래서, 여기가 SSR 어떤 분은 아니다 이건 이래서 여기는 CSR! 의견이 다른 부분이 있어서 개인적으로 어떻게 사용하는게 좋았을지 작성해본다
CSR
- 매장 페이지 대부분의 페이지 : 매장 페이지의 경우에는 주문의 상태를 변경하거나, 품절 상태를 변경하는 등 상태를 변경해야하는 페이지가 주를 이룬다, 그러므로 빠른 페이지 확인 보다는 매장 페이지를 이용하는 이용자와의 즉각적인 상호작용이 더 중요하지 않을까 생각했다.
SSR
- 유저 페이지 카테고리 부분, 유저 페이지 음료 상세 페이지 : 사용자가 어떤 음료가 있는지 시각적으로 빠르게 확인하고 음료 정보를 빠르게 확인할 수 있어야 한다고 생각했다. 음료를 선택했다가 세부 정보를 보고 음료를 주문할지 말지 결정하므로 일단 빠르게 정보 습득하는게 중요하지 않을까?
이것은 개인적인 생각
이 부분이 사용자 UX에 많은 영향을 미치니 프론트 입장에서는 가장 중요한 부분이 아니었나 싶다.
4. 오류
노션에 오류를 만날 때 드문드문 기록해 두었다. 더 꼼꼼히 기록할걸....
내가 해결한 방법 등을 추가로 블로그에 기록해 볼 예정이다.
Curly braces are unnecessary here.
**여기에서는 곱슬곱슬한 교정기는 필요 없어요.**몬가 귀여웠던 오류
저건 그냥 중괄호{}를 지우면 되는 간단한 오류였다.
가장 많이 마주친 오류는 타입스크립트 오류와 린트 오류...
5. 프로젝트 결과
스파로스 아카데미 최종 프로젝트 우수상 수상했다!
같이 고생한 프로젝트가 우수상까지 수상해서 너무 좋기도 하고, 컨셉을 재미있게 잡았다보니 프로젝트를 진행하는 과정도 너무 재미있었다. 역시 재미있는 컨셉을 가진 프로젝트는 개발할 때도 재미있다.
후반부에 취업 준비로 자주 프로젝트에 빠져서 팀원들에게 미안한 마음이 계속 남아있다... 그래도 좋은 결과를 얻어서 다행이다
프로젝트 회고 첨 써보는거라 이렇게 쓰는게 맞는가