YELOPER

드디어 1차 개발이 완료되었다! 어떤식으로 배포를 진행할까 고민하던 찰나.. vercel로 많이 한다길래 처음이니까 ㅎㅎ vercel로 배포를 진행했다! 🚀 Vercel이란? Next.js에서 제공하는 배포 플랫폼 빌드, 배포, 호스팅 제공, 공식문서에서도 Vercel을 통한 Front Project 배포 권장 Github Repository를 통해 쉽게 배포 가능 1️⃣ pakage.json에 script 추가 및 수정 { "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } } 처음에 블로그를 보며 이렇게 script를 수정하고 빌드를 진행하였는데 PrismaClientInitializationError: Pris..

드디어 마지막 관문인 게시판 만들기! 전 회사에서도 CRUD 정도는 해봤지만,, 백엔드 분이 만들어 주신 api를 받아서 프론트 쪽 작업만 했었기에,, 항상 api 만드는 과정이 궁금했었다 😳 다음 개인프로젝트에서 무조건 게시판을 만들어봐야겠다라고 결심한지 어언 몇 개월,, 드디어 실행에 옮겼다! 1️⃣ 글 작성페이지 만들기 (CREATE) 우선 퍼블리싱은 다 해놓은 상태니,, 데이터만 붙이이면 다 되니까 빨리 끝나겠지 ㅎㅎ 라고 생각했다면 경기도 오산 😧 1. schema.prisma 에서 필드 정의하기 model Post { id String @default(cuid()) @id title String content String? published Boolean @default(false) autho..

✅ 저번에는 전체 칵테일에 대한 api를 불러왔었다면 이번에는 개별 상세 데이터 불러오기와 검색 기능을 구현하였다! ✅ 그 과정에서 원래 구현하려고 했던 추천 칵테일, TOP10 칵테일 api는 유로라는 것을 발견하였고.. 어찌해야할까 고민하다가 결국 약간 디자인을 변경하기로 결정했다. 1️⃣ 변경된 메인페이지 디자인 메인페이지에 넣으려고 했었던 추천 레시피, TOP10 레시피가 빠지니까 너무 휑해보이고 그렇다고 레시피 페이지에 있는 전체 리스트를 또 메인페이지에 보여주는 건 아닌 것 같고,,, 고민하다가 조금 감각적(?)으로 가는 것도 좋을 것 같아서 이런 식으로 변경하기로 결정했다! 저 디자인에 비하면 조악하지만,, 나름 애니메이션도 들어있다 하하 최종디자인은 아니라 조금씩 고쳐나가면 그래도 좀 괜찮..

🚀 Redux-Toolkit 내부 thunk로 비동기 처리 Redux-Toolkit에는 내부적으로 thunk를 내장하고 있어서, 다른 미들웨어를 사용하지 않고도 비동기 처리를 할 수 있음 createAsyncThunk와 createSlice를 사용하여 Redux Toolkit만으로 비동기 처리를 쉽게 할 수 있으며, redux-saga에서만 사용할 수 있었던 기능까지 사용할 수 있음 https://redux-toolkit.js.org/usage/usage-with-typescript Usage With TypeScript | Redux Toolkit redux-toolkit.js.org 난 타입스크립트로 하고 있기 때문에 이 공식문서를 참고하면서 만들었다! 1️⃣ thunk 만들기 - createAsyn..

일단 제일 큰 고비였다고 생각한 회원가입, 로그인 부분이 끝났으니 이제 진도만 쭉쭉 나가면 된다!! ✅ 해야할 것 1. 메인페이지 퍼블리싱 2. 서브페이지 퍼블리싱 - 레시피 페이지 - 게시판 페이지 - 마이페이지 3. 로그아웃 1️⃣ 메인페이지 퍼블리싱 1. 메인페이지 ('/') - 추천 레시피, TOP10 레시피 누르면 레시피 페이지로 이동 2️⃣ 서브페이지 퍼블리싱 1. 레시피 페이지 ('/recipe') - 더미데이터로 아이디만 따로 만들어서 레시피를 클릭하면 상세페이지로 이동하게끔 하였다. 2. 레시피 상세페이지 ('/recipe/${id}') 3. 게시판 페이지 ('/board') - 게시판 페이지도 마찬가지로 게시글을 클릭하면 상세페이지로 이동하게끔 하였다 4. 게시판 상세페이지 ('/boa..

🚀 Next-Auth로 로그인, 회원가입 구현 모든 걸 나 혼자 정해야하니까 어떤 라이브러리로 해야 좋을지 고민하는 시간만 한 세월.. 열심히 찾아보다가 next-auth가 일반 이메일 가입뿐만 아니라 구글, 네이버, 카카오 등 sns 로그인도 제공하고 있어서 결정! 나중에 sns 로그인도 추가할 예정이라,, ㅎㅎ https://next-auth.js.org/ NextAuth.js Authentication for Next.js next-auth.js.org next.js app-router에 관한 정보도 별로 없을 뿐더러 app-router에 next-auth를 적용한 사례도 많지 않아서 괜찮을까 하는 중에 아주 좋은 블로그를 발견해서 그 글을 참고해 개발을 하려고 한다! https://mycoding..

🚀 Next.js 14 사용하기 - 예전 회사에서는 Next.js 13의 Pages Router를 주로 써봐서 App-Router에 대해 자세히 모르기도 했고 얼마전 Next14버전이 업데이트가 되었다는 소식에 새로운 것을 해보고 싶어 Next.js 14 App-Router로 하기로 결정했다. https://nextjs.org/blog/next-14 Next.js 14 Next.js 14 includes included performance, stability for Server Actions, a new course teaching the App Router, and more. nextjs.org 📚 Pages-Router vs App-Router 1. Pages-Router 정적인 공통 마크업은 _d..

🫣 개요 1. 왜 Cock!인가요? - 개인 프로젝트로 뭐를 하면 좋을까 생각하다가.. 내가 좋아하는 주제로 하고 싶어서 ㅎㅎ,, 마침 칵테일 관련 api도 많은 것 같아 칵테일 레시피 사이트를 하기로 마음 먹었다! - Cock!은 칵테일의 칵!을 따와서 만든 이름이고,, 그냥 내가 앞글자 따서 이름 짓는 걸 좋아해서 그렇게 지었다 ㅎㅎ (tmi 우리집 로봇청소기 이름은 로로이다) 2. 프로젝트는 어떤 언어, 프레임워크를 사용할 건가요? - 프로젝트에 시작하기에 앞서 어떤 기능들이 들어갈지,, 디자인은 어떻게 해야할지 고민하다 예전부터 써보고 싶었던 피그마를 통해 기획, 디자인을 하기로 결정! - Next.js, typescript, styled-components, Node.js, RestAPI, mo..