Loading
# Prisma
블로그 페이지에 API 연동하기 이전에 연결한 API를 활용하여 블로그 페이지를 동적으로 구현하고자 합니다. 이번 글에서는 게시글 목록 페이지에 API를 연동하여 무한 스크롤이 제대로 동작하는지 확인한 과정을 다루겠습니다. 게시글 목록 페이지 API 연동 이전에는 임시 데이터를 이용해 무한 스크롤 기능을 구현했었는데, 이번에는 실제 API와 연동하여 데이터가 정상적으로 표시되는지 확인했습니다. image 아래는 API를 통해 게시글 목록을 가져와 페이지에 출력하는 코드입니다. import { useInfiniteQuery } from "@tanstack/react-query"; import Link from "n
2024년 11월 25일
·댓글 0
·1
API 연동 전 준비 Axios 설정 Axios를 사용하여 API를 연동하기 전에, 먼저 Axios의 instance를 제작하였습니다. 이렇게 생성한 instance는 반복되는 설정을 쉽게 재사용할 수 있도록 해줍니다. // src/services/axios.ts import axios from "axios"; import { getCookie } from "cookies-next"; const instance = axios.create({ baseURL: process.env.NEXT_PUBLIC_BASE_URL, headers: { "Content-Type": "application/json", }, }); // 요청 인터셉터 설정 - 모든 요청에 Authorization 헤더에 accessToken을 포함 instance.interceptors.request.use((config) => { const token =
2024년 11월 21일
·댓글 0
·2
백엔드 개발 준비 백엔드 관련 공부를 본격적으로 해본 적은 없었지만, 이전 팀 프로젝트에서 MongoDB Atlas를 활용해 간단한 API를 만든 경험이 있었습니다. 당시 부트캠프에서 제공된 API 외에 추가적인 기능을 구현하고 싶어서 MongoDB Atlas를 사용하여 진행했습니다. 이번 블로그 프로젝트에서는 직접 백엔드 작업을 하고 서버를 배포하기로 했습니다. 이를 위해 선택한 기술은 Prisma와 PostgreSQL입니다. 기술 스택 선택 이유 Prisma 코드 가독성**: Prisma는 Schema-first 방식으로 데이터 모델링을 직관적으로 작성할 수 있어서 생산성이 높습니다. 자동화된 데이터베이스 관리**: 마이그레이션을 효율적으로 관리할 수 있습니다. 강력한 툴링**: Prisma Studio를 활용해 데이터베이스를 시각적으로 확인하고 조작할 수 있습니다. PostgreSQL
2024년 11월 18일
·댓글 0
·2
블로그 페이지 제작 블로그 게시글 목록 블로그 페이지는 Velog의 디자인을 참고하여 제작하기로 했습니다. 먼저 블로그 게시글 목록 페이지를 제작하였습니다. 게시글 목록 디자인 우선 게시글 목록 페이지의 디자인을 임시로 제작하였습니다. 아래는 해당 디자인의 이미지입니다: 게시글 목록 디자인 이 디자인을 바탕으로 게시글 데이터를 어떻게 처리할지 계획하고, Post 모델의 목(mock) 데이터를 생성하기로 했습니다. 이 과정에서 ChatGPT를 활용하여 아래와 같은 형식으로 데이터를 구성했습니다: // data/db.json { "posts": [ { "id": 1, "coverImage": "/images/
2024년 11월 15일
·댓글 0
·1
추가적인 공통 컴포넌트 작업 토스트 팝업 전 팀 프로젝트에서 만들었던 토스트 팝업을 가져와서 사용하기로 했습니다. react-hot-toast를 참고해서 만들었습니다. 토스트는 Toast.ts, Toaster.tsx, ToastStore.ts로 이루어져 있으며, Zustand를 활용하여 전역으로 상태를 관리하였습니다. Toast ToastStore을 이용해서 토스트를 추가, 수정, 삭제하는 함수를 제공합니다. success, error, warning, info, loading 함수 : 각각 성공, 에러, 경고, 정보, 로딩 상태의 토스트 메시지를 표시합니다. 메시지와 타입("success", "error", 등), 지속 시간(duration)을 인수로 받습니다. **
2024년 11월 12일
·댓글 0
·2
작업 시작 프로젝트를 시작할 때 제일 먼저 환경 세팅을 했습니다. 프로젝트의 효율적인 개발 환경을 만들고 일관된 코드 스타일을 유지하기 위해 ESLint와 Prettier를 설정하고, 폰트와 Tailwind CSS를 추가한 다음, 간단한 메인 페이지를 만들어보았습니다. 이 사이트는 단순한 기술 블로그를 넘어 포트폴리오로 활용 가능한 공간을 목표로 했습니다. 또한, 프로젝트 과정에서의 기술적 성장과 배운 점을 기록하고 사용자 피드백을 통해 지속적으로 개선할 수 있는 플랫폼을 직접 운영해 보고자 했습니다. ESLint ESLint 설정 ESLint를 먼저 설정해준 이유는 코드를 작성할 때 바로 문제를 확인하고 수정할 수 있으며, 코드를 깔끔하게 유지할 수 있기 때문입니다. ESLint 설정 시 여러 블로그와 ChatGPT의 도움을 받아
2024년 11월 10일
·댓글 0
·2
사이트를 만들게 된 이유 프론트엔드 개발자로서 기술을 정리하고 경험을 기록할 수 있는 개인 사이트를 만들어 보고 싶었습니다. 이 사이트는 단순한 기술 블로그를 넘어 포트폴리오로 활용 가능한 공간을 목표로 했습니다. 또한, 프로젝트 과정에서의 기술적 성장과 배운 점을 기록하고 사용자 피드백을 통해 지속적으로 개선할 수 있는 플랫폼을 직접 운영해 보고자 했습니다. 기획 개인 사이트 제작을 위해 기획부터 시작했습니다. 이 사이트를 통해 기술 역량을 어필할 수 있는 구조를 만들고자 했고, 이를 위해 크게 메인 페이지, 블로그 페이지, 포트폴리오 페이지로 나누어 기획했습니다. 메인 페이지**: 메인 페이지는 방문자가 사이트에 들어왔을 때 가장 먼저 보게 되는 곳입니다. 따라서 사이트의 전반적인 내용을 쉽게 파악할 수 있도록 최신 글과 인기 글을 한눈에 볼 수 있는 구조로 설계했습니다. 또한 **스크롤을 통해
2024년 11월 7일
·댓글 0
·1