Project

본 글에서는 최근 진행한 이력서 포트폴리오 프로젝트의 Admin 페이지 구축 경험을 공유하고자 합니다. 특히 상태 관리와 보안 강화에 초점을 맞추어, Zustand를 이용한 상태 관리, Flask 미들웨어를 통한 토큰 검증 과정, 그리고 Refresh Token 구현에 대해 상세히 설명하겠습니다.1. 상태 관리 라이브러리 선택: Zustand프로젝트에서 상태 관리 라이브러리로 Zustand를 선택한 이유는 다음과 같습니다: 간결성과 사용 편의성: Zustand는 API가 간단하고 직관적이어서 학습 곡선이 낮습니다. 보일러플레이트 코드가 적어 빠르게 구현할 수 있습니다. 성능: 작은 번들 크기로 앱의 성능에 미치는 영향이 적습니다. 불필요한 리렌더링을 최소화하여 효율적입니다. Redux 대비 장점: Red..

안녕하세요, 오늘은 제가 최근에 진행한 이력서 포트폴리오 프로젝트의 일환으로 개발한 안전한 Admin 페이지 구축에 관한 경험을 공유하려 합니다.1. 프로젝트 배경 및 개요이 프로젝트는 제 개인 이력서 및 포트폴리오 웹사이트를 개발하는 과정에서 시작되었습니다. 웹사이트의 콘텐츠를 효율적으로 관리하고 업데이트하기 위해 안전하고 사용하기 쉬운 admin 시스템이 필요했습니다. (About Me 컴포넌트가 정적으로 구성되어 있는데 이를 동적으로 쉽게 변경하게 설정하기 위함) 이를 위해 Flask를 이용한 백엔드 서버와 Next.js를 이용한 프론트엔드 애플리케이션을 구현하기로 결정했습니다.주요 목표는 다음과 같았습니다:안전한 관리자 인증 시스템 구축이력서 및 포트폴리오 콘텐츠의 동적 관리사용자 친화적인 adm..

안녕하세요. 오늘은 AI 챗봇 프로젝트의 최근 개선 사항에 대해 공유드리고자 합니다. 이전 포스팅에서 소개드렸던 AI Chatbot Component의 추천 질문 시스템 통합에 이은 후속 작업입니다.사용자 경험 개선을 위한 지속적인 노력의 일환으로, 이번에는 챗봇 응답의 가독성 문제를 해결하는 데 초점을 맞췄습니다. 테스트 과정에서 발견된 주요 이슈는 챗봇의 응답이 단일 라인으로 출력되어 가독성이 현저히 떨어진다는 점이었습니다.이 문제를 해결하기 위해 프론트엔드 최적화 작업을 진행하게 되었습니다. 본 포스팅에서는 이 과정에서 직면한 기술적 과제, 그에 대한 해결 방안, 그리고 실제 구현 방법에 대해 상세히 다뤄보도록 하겠습니다. 문제의 원인먼저, 문제의 근본 원인을 분석해보았습니다.문제의 근본 원인은 백..

이번 포스팅에서는 MongoDB, Flask, Next.js 를 활용하여 동적 블로그 컴포넌트를 구축한 경험을 공유합니다.해당 과정의 경우 현재 기존 티스토리 블로그 포스팅을 크롤링하여 MongoDB에 저장하고 이를 Next.js 프론트엔드에서 동적으로 출력할 수 있도록 한 방법을 설명합니다.개요해당 프로젝트에서는 MongoDB, Flask, Next.js 를 사용하여 동적 블로그 컴포넌트를 구축하였습니다.기존 티스토리 블로그 포스팅을 크롤링하여 MongoDB에 저장하고, Flask API를 통해 Next.js 프론트엔드에서 데이터를 동적으로 렌더링할 수 있도록 구현하였습니다.블로그 포스팅 크롤링 및 데이터 저장우선 첫 번째 단계는 기존 티스토리 블로그에 포스팅한 데이터를 크롤링하여 MongoDB에 저장..

이번 시간에는 현재 구현된 AI Chatbot 시스템에서 기존에 작성된 OpenAI Instruction 에 추가로 특정 문구를 추가하여 추천 질문을 사용자에게 전달할 수 있는 시스템을 구현한 내용을 기반으로 블로그 포스팅을 진행하도록 하겠습니다. 추천 질문 시스템해당 게시글에서 다루는 추천 질문 시스템은 사용자가 AI Chatbot 과 상호작용 과정에서 다음에 어떤 질문을 할 수 있을지에 대한 제안을 사용자에게 출력해주는 시스템입니다.이를 통해 사용자는 더욱 향상된 경험을 얻을 수 있고, 효과적으로 정보를 전달할 수 있을 것으로 생각되며, 특히 사용자가 Chatbot 에게 무엇을 물어봐야 할 지 모르는 상황이 있을 수 있는데 이때 효과적인 대안이 될 것으로 생각됩니다.OpenAI Assistant In..