Project/resume

Zustand와 Flask 미들웨어로 구현한 인증 시스템 : Refresh Token과 CORS 에러 해결

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

2024.09.06

Project/resume

Flask와 Next.js를 이용한 인증 시스템 구현 (JWT, Authlib)

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

2024.08.29

Project/resume

AI Chatbot 응답 개선 : 프론트엔드 코드 최적화

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

2024.08.24

Project/resume

MongoDB, Flask, Next.js 를 활용한 동적 블로그 컴포넌트 구현

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

2024.08.17

Project/resume

AI Chatbot 추천 질문 시스템 구현 / OpenAI Assistant Intruction 을 활용한 AI 응답 지정

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

2024.08.17

Project/resume

[Github Actions] CI/CD 파이프라인 구축 / Github Actions 사용법 / Snyk Application CI 파이프라인 통합 / EC2 배포 자동화

CI/CD란?빠르게 변화하는 기술 환경 속에서 시장과 고객의 요구에 신속하게 대응하는 것은 기업의 중요한 과제입니다. 이를 해결하기 위한 방법 중 하나가 바로 CI/CD(Continuous Integration/Continuous Delivery)입니다. CI/CD는 애플리케이션 개발과 배포의 모든 단계를 자동화하여 효율적이고 빈번한 배포를 가능하게 합니다. 간단히 말해, CI/CD는 개발 프로세스를 자동화하여 제품을 빠르게 시장에 출시하고, 업데이트할 수 있도록 하는 프로세스라 볼 수 있습니다.Github Actions 소개Github Actions는 특정 이벤트가 발생했을 때 자동으로 원하는 작업을 실행할 수 있도록 도와주는 툴입니다. 이 도구를 사용하면 다양한 트리거 이벤트에 대해 설정된 작업을 자..

2024.08.13

Project/resume

MongoDB를 이용하여 Python에서 IP기반 요청 제한 구현

안녕하세요 이번 시간에는 이전에 생성한 Chatbot 코드 내 IP 기반 요청 제한 코드를 추가하여 악의적인 사용자가 지속적인 질문을 하기 어렵게 하기 위해 요청 IP Address 기반으로 시간당 5회 질문이 가능하도록 구현한 코드를 기반으로 포스팅을 진행하겠습니다. MongoDB를 이용한 요청 횟수 추적MongoDB는 NoSQL DB로 데이터를 "Key:Value" 형태로 저장합니다.이번 블로그 포스팅에서는 MongoDB를 이용해 Client IP Address 및 요청 시간을 각 요청 마다 MongoDB에 저장하여 들어오는 요청을 추적하는 방식을 사용하였습니다.아래 코드를 살펴보며 구현된 로직에 대해 좀 더 자세하게 알아보겠습니다.코드 구현def mongo_find_ip(ip): try: ..

2024.08.12

Project/resume

OpenAI API를 이용한 이력서 기반 AI ChatBot 백엔드 코드 구현

안녕하세요. 지난 시간에 이어 이력서 홈페이지 제작 프로젝트 과정 중 AI 챗봇 백엔드 코드를 구현한 내용을 포스팅 하도록 하겠습니다.기초 지식우선 AI ChatBot을 구축하기 전 OpenAI 에서 제공해주는 API들에 대해 가볍게 알아보도록 하겠습니다.Assistant ?Open AI 공식 문서에는 AI 모델을 호출하고 도구를 사용하여 작업을 수행할 수 있는 도우미라고 표기되어 있는 것으로 확인할 수 있습니다.즉, Assistant 는 한마디로 자신만의 챗봇 모델이라고 볼 수 있고, OpenAI에서 제공해주는 Assistant API 가 있는데 이는 애플리케이션 내 자신만의 Assistant를 구축할 수 있도록 도와주는 도구(Toolkit)이라 생각하시면 될 것 같습니다.자세한 내용은 공식 문서 참고..

2024.07.19

Project/resume

이력서 홈페이지 제작 프로젝트 (feat. 이력서 기반 AI챗봇)

소개안녕하세요. 이번 포스팅에서는 6월 초부터 진행한 알토르 멘토링에서 최종적으로 수행할 프로젝트와 프로젝트 진행 내역 등에 대한 내용을 포스팅하도록 하겠습니다. " data-og-host="itscholar.notion.site" data-og-source-url="https://itscholar.notion.site/efbf71b995b84d9486d0c3fce580b461?v=acf33b5d42b4481bab9a1d6550b6ddb2" data-og-url="https://itscholar.notion.site/efbf71b995b84d9486d0c3fce580b461" data-og-image="https://scrap.kakaocdn.net/dn/SAo4N/hyWzpnwXmP/GwEDDdi4Oe..

2024.07.09