블로그 게시글 목록

[블로그]블로그 개발 일지 #13 - 게시글을 서버사이드로 변경

기존 게시글 기존 게시글 페이지는 [title]/page.tsx와 [title]/_components/clientPage.tsx로 구성되었습니다. prefetchQuery를 사용해 서버에서 데이터를 미리 불러와 캐싱하고, 클라이언트 측에서 이 데이터를 기반으로 화면을 그려주는 방식으로 제작되었습니다. 이 방식은 캐싱을 활용해 성능 면에서는 이점이 있었지만, SEO(검색 엔진 최적화)에 최적화되지 않은 문제가 있었습니다. 블로그 게시글의 특성상 대부분의 콘텐츠는 정적인 형태로 제공되며, 사용자와의 상호작용이 많지 않기 때문에 모든 화면을 클라이언트에서 렌더링하는 것은 비효율적이라고 판단했습니다. 수정된 게시글 수정된 게시글 페이지는 SEO 최적화를 위해 서버사이드 렌더링(SSR)을 도입했습니다. prefetchQuery를 사용해 데이터를 미리 가져오는 점은 동일하지만, 클라이언트 전용 컴포넌트인 clientPage를 제거하여 서버

프론트엔드 FE TS React Next.js TailwindCSS

2024년 12월 30일

·1

[블로그]블로그 개발 일지 #12 - 메인 페이지

메인 페이지 메인 페이지는 방문자가 사이트에 접속했을 때 가장 먼저 접하는 공간으로, 사이트의 주요 내용을 효과적으로 전달하기 위해 다음과 같은 방식으로 설계했습니다. 최신 글과 인기 글의 배치 최신 글 섹션**: 메인 페이지 상단에 최신 글을 배치해 방문자가 사이트의 최신 활동을 바로 확인할 수 있도록 했습니다. 예를 들어, 최근에 작성한 기술 블로그 글이나 업데이트 내용을 첫 화면에서 쉽게 확인할 수 있습니다. 인기 글 섹션**: 하단에는 인기 글을 모아두어 사이트를 처음 방문한 사용자도 가장 주목받는 콘텐츠를 쉽게 찾을 수 있도록 했습니다. 구체적 구성: 조회수, 좋아요 수 등 객관적인 지표를 기반으로 콘텐츠를 정렬하여 신뢰성을 높였습니다. 콘텐츠 카드 디자인 카드형 레이아웃**: 최신 글과 인기 글은 모두 미리보기 형태의 카드 디자인을 적용했습니다. 카드에는 제목, 간단한 요약, 작성 날짜, 썸네일 이미지를 포함

프론트엔드 FE TS React Next.js TailwindCSS

2024년 12월 30일

·1

[블로그]블로그 개발 일지 #11 - 썸네일 기능 추가

썸네일 기능 추가 썸네일 업로드 사이트 방문자가 게시글을 쉽게 파악할 수 있도록, 이제 게시글에 썸네일을 추가할 수 있는 기능을 제공합니다. 사용자가 썸네일을 업로드하면 해당 이미지가 게시글 미리보기 화면에 표시됩니다. 만약 사용자가 썸네일을 업로드하지 않으면, 게시글 내용 중 첫 번째 이미지를 자동으로 썸네일로 설정합니다. 코드 설명 1. 이미지 업로드 사용자가 이미지를 선택하면 handleImageSelection 함수가 실행되어 이미지를 서버로 업로드하고, 업로드된 이미지 URL을 coverImg 상태에 저장합니다. const handleImageSelection = async (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (file) { const ima

프론트엔드 FE TS React Next.js TailwindCSS Thumbnail

2024년 12월 23일

·1

[블로그]블로그 개발 일지 #10 - 마크다운 에디터 기능 추가

마크다운 에디터 기능 추가 개발 블로그에서 글 작성 기능을 향상시키기 위해 마크다운 에디터에 두 가지 주요 기능을 추가했습니다: TOC (Table of Contents) 목차 기능 이미지 업로드 및 드래그 앤 드롭 지원 이 기능들은 글 작성과 읽기에 도움이 되도록 구현되었습니다. 1. TOC (Table of Contents) 목차 기능 기능 설명 TOC(목차) 기능은 마크다운에서 사용된 제목(h1, h2, h3)을 자동으로 탐색하여 목차를 생성합니다. 이를 통해 긴 글에서도 원하는 섹션으로 빠르게 이동할 수 있습니다. 구현 방법 1. 제목 탐색 및 ID 생성 정규 표현식을 사용해 마크다운 본문에서 제목을 찾고, 각 제목에 고유한 ID를 자동으로 생성합니다. const generateId = (text: string): string => text

프론트엔드 FE TS React Next.js TailwindCSS

2024년 12월 18일

·1

[블로그]블로그 개발 일지 #9 - 댓글 기능 추가

댓글 UI 제작 및 기능 구현 댓글 UI 제작 댓글 시스템을 구현하기 위해 React와 다양한 라이브러리를 활용했습니다. 댓글 작성, 답글 기능, 그리고 좋아요 버튼을 포함하여 사용자 경험을 최적화했습니다. 댓글 작성 기능 댓글 작성 UI는 react-hook-form을 사용해 간결하고 효율적으로 작성할 수 있도록 설계했습니다. 코드 분석** Comments.tsx 파일의 핵심 코드입니다: const { register, handleSubmit, reset, formState: { isSubmitting } } = useForm<Com

프론트엔드 FE TS React Next.js TailwindCSS react-hook-form

2024년 12월 17일

·1

[블로그]블로그 개발 일지 #8 - 게시글 검색 기능 개선

게시글 검색 기능 개선 기존에는 단순히 제목 검색만 가능했던 기능에 초성 검색, 태그 검색, 카테고리 검색을 추가하며 사용자 경험(UX)을 한층 더 향상시키고자 했습니다. 이 과정을 통해 무엇을 고민했고, 어떤 방식으로 구현했는지 상세히 설명드릴게요. 1. 제목 검색 기능 개선 문제점 기존 검색 기능은 게시글 제목에 검색어가 포함되어 있는 경우에만 결과를 반환했습니다. 하지만 사용자가 원하는 게시글을 쉽게 찾기엔 한계가 있었습니다. 특히 제목이 길거나 특정 단어를 초성으로만 기억하는 경우, 검색이 어렵다는 피드백이 있었습니다. 개선 과정 사용자의 검색 편의성을 높이기 위해 초성 검색 기능을 추가하기로 했습니다. 이를 위해 토스에서 개발한 es-hangul 라이브러리를 활용했습니다. 기존 방식:** 검색어 입력 → 서버에서 게시글 제목 조회

프론트엔드 FE TS React Next.js TailwindCSS es-hangul

2024년 12월 12일

·1

[블로그]블로그 개발 일지 #7 - 블로그 페이지

블로그 페이지에 API 연동하기 이전에 연결한 API를 활용하여 블로그 페이지를 동적으로 구현하고자 합니다. 이번 글에서는 게시글 목록 페이지에 API를 연동하여 무한 스크롤이 제대로 동작하는지 확인한 과정을 다루겠습니다. 게시글 목록 페이지 API 연동 이전에는 임시 데이터를 이용해 무한 스크롤 기능을 구현했었는데, 이번에는 실제 API와 연동하여 데이터가 정상적으로 표시되는지 확인했습니다. image 아래는 API를 통해 게시글 목록을 가져와 페이지에 출력하는 코드입니다. import { useInfiniteQuery } from "@tanstack/react-query"; import Link from "n

프론트엔드 FE TS React Next.js TailwindCSS Prisma ReactQuery TanstackQuery

2024년 11월 25일

·1

[블로그]블로그 개발 일지 #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 =

프론트엔드 FE JS React Next.js TailwindCSS Prisma PostgreSQL API Axios

2024년 11월 21일

·2

[블로그]블로그 개발 일지 #5 - API 제작

백엔드 개발 준비 백엔드 관련 공부를 본격적으로 해본 적은 없었지만, 이전 팀 프로젝트에서 MongoDB Atlas를 활용해 간단한 API를 만든 경험이 있었습니다. 당시 부트캠프에서 제공된 API 외에 추가적인 기능을 구현하고 싶어서 MongoDB Atlas를 사용하여 진행했습니다. 이번 블로그 프로젝트에서는 직접 백엔드 작업을 하고 서버를 배포하기로 했습니다. 이를 위해 선택한 기술은 Prisma와 PostgreSQL입니다. 기술 스택 선택 이유 Prisma 코드 가독성**: Prisma는 Schema-first 방식으로 데이터 모델링을 직관적으로 작성할 수 있어서 생산성이 높습니다. 자동화된 데이터베이스 관리**: 마이그레이션을 효율적으로 관리할 수 있습니다. 강력한 툴링**: Prisma Studio를 활용해 데이터베이스를 시각적으로 확인하고 조작할 수 있습니다. PostgreSQL

프론트엔드 FE JS React Next.js Tailwind CSS Prisma PostgreSQL

2024년 11월 18일

·2

[블로그]블로그 개발 일지 #4 - 임시 블로그 목록

블로그 페이지 제작 블로그 게시글 목록 블로그 페이지는 Velog의 디자인을 참고하여 제작하기로 했습니다. 먼저 블로그 게시글 목록 페이지를 제작하였습니다. 게시글 목록 디자인 우선 게시글 목록 페이지의 디자인을 임시로 제작하였습니다. 아래는 해당 디자인의 이미지입니다: 게시글 목록 디자인 이 디자인을 바탕으로 게시글 데이터를 어떻게 처리할지 계획하고, Post 모델의 목(mock) 데이터를 생성하기로 했습니다. 이 과정에서 ChatGPT를 활용하여 아래와 같은 형식으로 데이터를 구성했습니다: // data/db.json { "posts": [ { "id": 1, "coverImage": "/images/

프론트엔드 FE JS React Next.js Tailwind CSS Prisma PostgreSQL

2024년 11월 15일

·1