Loading
인기글
전체보기
블로그 개발 일지 #2 - 기초 작업
작업 시작 프로젝트를 시작할 때 제일 먼저 환경 세팅을 했습니다. 프로젝트의 효율적인 개발 환경을 만들고 일관된 코드 스타일을 유지하기 위해 ESLint와 Prettier를 설정하고, 폰트와 Tailwind CSS를 추가한 다음, 간단한 메인 페이지를 만들어보았습니다. 이 사이트는 단순한 기술 블로그를 넘어 포트폴리오로 활용 가능한 공간을 목표로 했습니다. 또한, 프로젝트 과정에서의 기술적 성장과 배운 점을 기록하고 사용자 피드백을 통해 지속적으로 개선할 수 있는 플랫폼을 직접 운영해 보고자 했습니다. ESLint ESLint 설정 ESLint를 먼저 설정해준 이유는 코드를 작성할 때 바로 문제를 확인하고 수정할 수 있으며, 코드를 깔끔하게 유지할 수 있기 때문입니다. ESLint 설정 시 여러 블로그와 ChatGPT의 도움을 받아
2024년 11월 10일 · 0 개의 댓글·2
블로그 개발 일지 #3 - 공통 컴포넌트
추가적인 공통 컴포넌트 작업 토스트 팝업 전 팀 프로젝트에서 만들었던 토스트 팝업을 가져와서 사용하기로 했습니다. 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
블로그 개발 일지 #5 - API 제작
백엔드 개발 준비 백엔드 관련 공부를 본격적으로 해본 적은 없었지만, 이전 팀 프로젝트에서 MongoDB Atlas를 활용해 간단한 API를 만든 경험이 있었습니다. 당시 부트캠프에서 제공된 API 외에 추가적인 기능을 구현하고 싶어서 MongoDB Atlas를 사용하여 진행했습니다. 이번 블로그 프로젝트에서는 직접 백엔드 작업을 하고 서버를 배포하기로 했습니다. 이를 위해 선택한 기술은 Prisma와 PostgreSQL입니다. 기술 스택 선택 이유 Prisma 코드 가독성**: Prisma는 Schema-first 방식으로 데이터 모델링을 직관적으로 작성할 수 있어서 생산성이 높습니다. 자동화된 데이터베이스 관리**: 마이그레이션을 효율적으로 관리할 수 있습니다. 강력한 툴링**: Prisma Studio를 활용해 데이터베이스를 시각적으로 확인하고 조작할 수 있습니다. PostgreSQL
2024년 11월 18일 · 0 개의 댓글·2
블로그 개발 일지 #6 - API 연동
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
새로운 글
블로그 개발 일지 #13 - 게시글을 서버사이드로 변경
기존 게시글 기존 게시글 페이지는 [title]/page.tsx와 [title]/_components/clientPage.tsx로 구성되었습니다. prefetchQuery를 사용해 서버에서 데이터를 미리 불러와 캐싱하고, 클라이언트 측에서 이 데이터를 기반으로 화면을 그려주는 방식으로 제작되었습니다. 이 방식은 캐싱을 활용해 성능 면에서는 이점이 있었지만, SEO(검색 엔진 최적화)에 최적화되지 않은 문제가 있었습니다. 블로그 게시글의 특성상 대부분의 콘텐츠는 정적인 형태로 제공되며, 사용자와의 상호작용이 많지 않기 때문에 모든 화면을 클라이언트에서 렌더링하는 것은 비효율적이라고 판단했습니다. 수정된 게시글 수정된 게시글 페이지는 SEO 최적화를 위해 서버사이드 렌더링(SSR)을 도입했습니다. prefetchQuery를 사용해 데이터를 미리 가져오는 점은 동일하지만, 클라이언트 전용 컴포넌트인 clientPage를 제거하여 서버
2024년 12월 30일 · 0 개의 댓글·1
블로그 개발 일지 #12 - 메인 페이지
메인 페이지 메인 페이지는 방문자가 사이트에 접속했을 때 가장 먼저 접하는 공간으로, 사이트의 주요 내용을 효과적으로 전달하기 위해 다음과 같은 방식으로 설계했습니다. 최신 글과 인기 글의 배치 최신 글 섹션**: 메인 페이지 상단에 최신 글을 배치해 방문자가 사이트의 최신 활동을 바로 확인할 수 있도록 했습니다. 예를 들어, 최근에 작성한 기술 블로그 글이나 업데이트 내용을 첫 화면에서 쉽게 확인할 수 있습니다. 인기 글 섹션**: 하단에는 인기 글을 모아두어 사이트를 처음 방문한 사용자도 가장 주목받는 콘텐츠를 쉽게 찾을 수 있도록 했습니다. 구체적 구성: 조회수, 좋아요 수 등 객관적인 지표를 기반으로 콘텐츠를 정렬하여 신뢰성을 높였습니다. 콘텐츠 카드 디자인 카드형 레이아웃**: 최신 글과 인기 글은 모두 미리보기 형태의 카드 디자인을 적용했습니다. 카드에는 제목, 간단한 요약, 작성 날짜, 썸네일 이미지를 포함
2024년 12월 30일 · 0 개의 댓글·1
블로그 개발 일지 #11 - 썸네일 기능 추가
썸네일 기능 추가 썸네일 업로드 사이트 방문자가 게시글을 쉽게 파악할 수 있도록, 이제 게시글에 썸네일을 추가할 수 있는 기능을 제공합니다. 사용자가 썸네일을 업로드하면 해당 이미지가 게시글 미리보기 화면에 표시됩니다. 만약 사용자가 썸네일을 업로드하지 않으면, 게시글 내용 중 첫 번째 이미지를 자동으로 썸네일로 설정합니다. 코드 설명 1. 이미지 업로드 사용자가 이미지를 선택하면 handleImageSelection 함수가 실행되어 이미지를 서버로 업로드하고, 업로드된 이미지 URL을 coverImg 상태에 저장합니다. const handleImageSelection = async (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (file) { const ima
2024년 12월 23일 · 0 개의 댓글·1
블로그 개발 일지 #10 - 마크다운 에디터 기능 추가
마크다운 에디터 기능 추가 개발 블로그에서 글 작성 기능을 향상시키기 위해 마크다운 에디터에 두 가지 주요 기능을 추가했습니다: TOC (Table of Contents) 목차 기능 이미지 업로드 및 드래그 앤 드롭 지원 이 기능들은 글 작성과 읽기에 도움이 되도록 구현되었습니다. 1. TOC (Table of Contents) 목차 기능 기능 설명 TOC(목차) 기능은 마크다운에서 사용된 제목(h1, h2, h3)을 자동으로 탐색하여 목차를 생성합니다. 이를 통해 긴 글에서도 원하는 섹션으로 빠르게 이동할 수 있습니다. 구현 방법 1. 제목 탐색 및 ID 생성 정규 표현식을 사용해 마크다운 본문에서 제목을 찾고, 각 제목에 고유한 ID를 자동으로 생성합니다. const generateId = (text: string): string => text
2024년 12월 18일 · 0 개의 댓글·1