사이드 프로젝트 - forYourRecipe (No.1 Recipe) - 프로젝트 계획

도메인이 no1recipe.com 으로 결정되었다.
recipe 와 관련하여 둘 이 생각을 하고 또 해보는데 도저히 도메인이 생각나지 않았다..

도메인 후보로는

 

- recipenote

- appfanatic

- cook4me

- cookcoo

- no1recipe

 

이정도가 있었는데 일단 저걸로 하기로

 

(도메인 정하기 진짜 어려웠다...)

 

이번 사이드 프로젝트는 기준을 정해놓고 시작하였다.
첫째. 최대한 짧게 진행할 수 있도록 최소한의 기능만 만든다.!
두번째. 사용해보지 않았지만 해보고싶다 라고 생각이 드는게 있으면 해보는 것.!!

그리고 역할 분담
프론트, 백 각자 역할을 나눠서 개발을 진행한다.
원래 이렇게 하는거 아닌가 생각할 수 있지만 지금의 회사는 프론트와 백을 나누지 않는다. 각자 맡은 기능이 따라 화면을 만들고 거기에 맞는 api 또한 만든다.

그래서 이번엔 각자의 역할을 나눠서 개발해보기로 했다.
거기서 나는 프론트를 맡고 백엔드 보조를 하기로 했다.

여기서 첫번째 조건에 맞춰 최소한의 화면과 기능 (CRUD)의 조건만 맞추고 배포하기로 했다.
두번째 조건 안써본 것을 활용해보자.

 

프론트

---

1. vue cli 3
기존에는 vue cli 2 로 개발을 해왔는데 올 해 개발부 계획 중 하나인 3 버전으로 업그레이드 한다고 하나 미리 선행할 수 있는 좋은 기회라고 생각하여 2 버전이 아닌 3 버전으로 개발해보기로 했다.

2. scss 사용
scss의 경우 다른 프로젝트에서 써봤지만 scss 기능을 연습한다고 불필요한 부분에도 함수를 만들어서 쓰고 여러 믹스인을 붙이는 식으로 했어서 다른 사람이 보기 힘든 코드를 만들었었다.
그래서 이번엔 최대한 다른 사람이 봐도 쉽게 읽을 수 있는 방향으로 해볼 생각이다.

3-1. 컴포넌트 관리
지금 회사의 방향은 컴포넌트를 쪼개어 관리하는 것 보다 굳이 쪼갤 이유가 없다면 그냥 한 템플릿에서 관리하자 이다. 그래서 그렇게 개발을 해왔는데 이번에 사이드 프로젝트 - 닷투에서 리액트 코드의 컴포넌트 관리를 보고 신선한 충격이었다. 공통 버튼, 폰트, 인풋 등등 여러방면에서 활용할 수 있는 요소를 공통의 컴포넌트로 만들어서 사용하는 것이었다. 분리하여 몇개의 props 를 넘겨줌으로써 사이트 전체에서 하나의 컴포넌트로 여러 타입의 버튼, 폰트 등 적용되는 걸 보고 vue에도 적용시켜볼 생각이다.

3-2. 컴포넌트 관리 - 스토리북 사용
이전까지 스토리북의 역할이 궁금했다.
스토리북이라는 글을 자주 읽게 됐고 도대체 이걸 왜 써야하는가??? 그래서 이걸 어떻게 활용하는가?
처음에 이런 생각이였는데 막상 써보니까 확실히 알겠다.
음.. 쉽게 생각하면 부트스트랩 docs 느낌일까??
현재 개발되어 있는 컴포넌트들을 하나의 페이지에서 다 볼 수 있고, prop 에 따라 어떻게 바뀌는지 어떤 액션을 하는지 까지 볼 수 있게 해준다.

4. 디자인 영역...
처음에 이거 때문에 고민이 많았다.. 하 디자인을 어떻게 해야하나..
일단 컨셉을 정하자 해서 초기 프로토타입은 귀엽게 만들어보자라고 의견을 냈었고 귀여움을 바탕으로 레이아웃 잡아 나갔다.
그래서 후에 디자인이 바뀌더라도 이 레이아웃 안에서 해결 가능하도록 구성을 잡아나갔다.

백엔드

---

1. api 문서는 스웨거를 활용해보자
예전부터 스웨거를 활용해보고 싶었는데 지금 회사에서는 굳이 스웨거 코드를 작성해야하는가...너무 지저분해보이고 이거 하나하나 작성하는게 일을 더 늘리는게 아닐까 라는 말을 작년에 하셨었는데?? 그래서 여지껏 엑셀로 한땀한땀 작성했었는데 요즘도 그런 생각이실까.. 모르겠네..

어쨋든 내가 먼저 api 문서 관리를 스웨거를 사용해보자고 제안한 만큼 백엔드 스웨서 초기 세팅을 해서 전달드렸고,
기대 이상으로 잘 작성해주셔서 편하게 프론트 개발을 하고 있다.

인프라

---

1. aws에 배포

이 프로젝트에서 가장 해보고 싶었던 부분이 배포관련 이었다.

닷투 프로젝트에서 프론트와 백엔드를 배포하여 원활한 통신을 하기까지 거진 두 달 가까이 걸렸었다...

너무 고생을 했었기 때문에 그때를 계기로 혼자서 배포를 해보고 싶었다.

바로 성공을 한건 아니였지만 그래도 서버를 배포하여 프론트랑 원활하게 통신하는데 까지 4시간 정도 걸렸던 것 같다.

 

(2 개월 걸렸던 걸 4시간으로 단축 👏👏👏)

 

2. 도커 컨테이너 빌드

도커에 관련한 지식이 부족하다고 느끼고 있기 때문에 이번 프로젝트에서 백엔드 서버를 먼저 도커에 올려보고 싶었다.

기회가 된다면 프론트도 도커에 같이 올려서 하나의 ec2에서 관리하는게 최종 목적!!

 

3. 여유가 된다면 github action으로 자동 배포까지

이부분은 일단 생략..

 

4. 프론트엔드 호스팅 변경 (Netlify -> Ec2)

시간적으로 여유가 된다면 github action 보다 먼저 해보고 싶은 부분이다.

현재 no1recipe는 프론트 Netlify, 백엔드 ec2 로 배포되어있다.

이 부분을 하나의 ec2에서 관리되도록 변경해보고 싶다.

 

여기까지가 이 프로젝트의 주된 목표이다.

프로젝트의 1차 목표의 경우 거의 마무리 단계이다.