블로그 제작 프로젝트를 진행하면서 회고록 및 메모를 동시에 남겨보려고 합니다. 1인 프로젝트를 하게되면서, 프론트와 서버를 손수 개발해야하기 때문에 비교적 지식과 경험이 부족한 서버단을 잘 구현하기 위해서는 정리가 지속적으로 필요할 것 같아서 회고록이라는 수단을 써보려고 합니다. (ㅎㅎ)
목표
이번 프로젝트 목표는 명확합니다. 회사에서 신입개발자로서 경험하기 힘들었던 부분들을 학습해보고 싶습니다.
- github action을 통한 CI/CD 구축 - cypress
- 유닛 테스트 - jest
- 배포 - 아직 고민 중
계획
1. MVP
몇차까지 개발하게 될지는 모르겠으나, 이번 개발에서는 핵심 기능만 넣을 것 입니다.
- 전체 포스트 보여주는 기능 (메인 페이지)
- 포스트 보여주는 기능 (세부 페이지)
- 제목, 게시 날짜, 글내용 - 작성, 수정 기능이 있는 작성 페이지
- 웹 에디터 라이브러리 사용 X, 이번 단계에서는 글과 사진을 업로드 하는 정도(추가 구현으로 코드도 올릴 수 있으면 좋겠네요)
앞으로 집중 할 방향은 에디터 쪽이 될 것 같습니다. 제일 카피하고 싶은건 네이버 블로그 웹에디터인데, 일단 최소 개발사항은 마친 후에 점점 업그레이드 해 나아갈 예정입니다. (1월 한달 안에 끝내는 게 목표입니다.)
2. 디자인 및 기술 확정
디자인에는 큰 공을 들이지 않을 것입니다. (그럴 능력이 부족하기 때문에...) 깔끔하게 만드는 것에 집중해서 포스타입의 세부 글페이지 디자인과 기능을 참고할 예정입니다.
메인페이지에 시간을 들일 수 있다면 단순히 글을 나열하는 것이 아닌, 원하는 글을 노출 시킬 수 있는 기능이 있으면 좋겠네요. 보통 저는 이어지는 글을 자주 쓰기에 카테고리 대신 '시리즈'라는 컨셉을 잡아서 시리즈 별로 메인에 노출 할 수 있으면 좋겠습니다.
프론트엔드는
- react.js, typeScript, next.js, styled-components, (상태관리는 무엇으로 할지 아직 못정함..)
백은
- mysql, prisma, next.js에서 api 만들 수 있다 해서 그 기능을 사용하려고 합니다.
- DB설계에서 시간이 많이..필요할 수도?
3. 초기세팅
백, 프론트를 한 레포에 넣어서 관리할 것입니다.
필요한 세팅
1. eslint, prettier
2. prisma, mysql
memo
planetScale
next.js에 mysql이랑 prisma를 사용하는 방법을 검색하니 planet Scale을 쓰는 게 나왔다. mysql -> planetScale로 변경
설명과 장점은 아래 블로그 참고
https://jake-seo-dev.tistory.com/169
연동방법은
1. planetScale에 가입 후 새로운 database 설정
2. connect에서 'connect with prisma'하여 시키는대로 databaseUrl 획득..
next api routers
