반응형 분류 전체보기40 [React] AI 챗봇의 체감 속도를 높인 프론트엔드 최적화 여정 📂 GitHub 저장소 🌐 라이브 데모 💼 포트폴리오 대학 AI 챗봇 서비스 강냉봇의 프론트엔드를 개발하면서 "느린 AI 응답"이라는 근본적인 한계를 프론트엔드 기술로 어떻게 극복했는지 공유합니다. 📑 바로가기 🎯 문제 정의 🏗️ 아키텍처 🔥 도전과제 💡 해결 과정 📈 결과 🛠 기술 스택 🎯 문제 정의: 왜 AI 챗봇은 느리게 느껴질까? 강남대학교 학생들을 위한 AI 챗봇 서비스를 개발하면서 첫 번째로 마주한 현실은 AI 응답의 지연 시간이었습니다. LLM(Large Language Model) 기반 챗봇은 구조적으로 응답에 1~5초가 소.. 2025. 12. 25. [인턴IN메타] 발표 자료 작성법: 기획부터 디자인까지 A to Z 최근 '인턴IN메타' 4주차 과정에서 발표 자료 시각화 및 스토리보드 작성을 집중적으로 학습하며 과거의 경험을 되돌아보게 되었습니다. 이번 포스팅에서는 4주차에 학습한 실전 발표 자료 작성법 A to Z를 공유하고자 합니다. 이 글을 통해 여러분은 단순히 예쁜 자료가 아닌, '논리적으로 설득하고 목표를 달성하는' 기획서와 발표 자료를 만드는 것을 목표로 합니다. 1. 기획의 뼈대를 세우는 4MAT 프레임워크좋은 발표는 화려한 디자인이 아닌, 탄탄한 논리 구조에서 시작합니다. 청중은 "그래서 이걸 왜 해야 하죠?"라는 근본적인 질문에 대한 답을 원합니다. 이때 가장 효과적인 프레임워크가 바로 4MAT(4 Master of Art Teaching) 입니다. 4MAT은 세계적인 교육학자 버니스 매카시(Ber.. 2025. 8. 1. [인턴IN메타] React 사용자 경험을 극대화하는 카드 등록 페이지 구현기 : CardContext 활용하기 카드 등록 페이지 구현기 지난 포스팅에서는 상품 목록에 '담기' 버튼을 추가하고, 무한 스크롤 기능과 다크/라이트 모드에 상관없이 명확한 시인성을 확보하는 작업을 다뤘습니다. 이번 주차에는 지난 '담기' 기능에 이어 '구매' 기능을 구현해 보았습니다. 사용자가 '구매' 버튼을 클릭하는 순간, 우리는 새로운 과제에 직면합니다. 바로 결제 페이지, 그중에서도 핵심인 '카드 등록' 기능입니다.단순히 정보를 입력받는 폼(Form)을 넘어, 어떻게 하면 사용자가 안전하고 편리하게 자신의 결제 정보를 맡길 수 있을지 고민하는 것은 서비스의 신뢰도와 직결됩니다. 이번 3주차 인턴IN메타 챌린지에서는 고객의 요구사항을 기반으로 React를 활용하여 사용자 친화적인 카드 등록 페이지를 구현한 경험을 공유하고자 합니다. .. 2025. 7. 24. [인턴IN메타] React 실전 프로젝트: 요구사항 분석부터 무한 스크롤, 다크 모드 구현까지 이번 '인턴IN메타' 2주차에서는 React를 기반으로 실제 고객사의 요구사항이 담긴 상품 목록 페이지를 개발하는 과제를 수행했습니다. 단순한 기능 구현을 넘어, 사용자 경험(UX)과 코드의 안정성까지 고려하는 실전적인 프로젝트였습니다.본 포스팅에서는 주어진 요구사항을 어떻게 분석하고 기술적으로 해결했는지, 나아가 Intersection Observer를 활용한 무한 스크롤과 Context API를 이용한 다크/라이트 모드 전환 등 추가 기능을 왜, 그리고 어떻게 구현했는지 상세히 다뤄보겠습니다. 마지막으로 React Testing Library를 활용한 테스트와 GitHub Pages 배포, 그리고 프로젝트를 통해 얻은 교훈을 담은 KPT 회고까지 공유합니다.1. 프로젝트의 시작: 고객 요구사항 분석 .. 2025. 7. 19. 이전 1 2 3 4 ··· 10 다음 반응형
