반응형 react6 [React] AI 챗봇의 체감 속도를 높인 프론트엔드 최적화 여정 📂 GitHub 저장소 🌐 라이브 데모 💼 포트폴리오 대학 AI 챗봇 서비스 강냉봇의 프론트엔드를 개발하면서 "느린 AI 응답"이라는 근본적인 한계를 프론트엔드 기술로 어떻게 극복했는지 공유합니다. 📑 바로가기 🎯 문제 정의 🏗️ 아키텍처 🔥 도전과제 💡 해결 과정 📈 결과 🛠 기술 스택 🎯 문제 정의: 왜 AI 챗봇은 느리게 느껴질까? 강남대학교 학생들을 위한 AI 챗봇 서비스를 개발하면서 첫 번째로 마주한 현실은 AI 응답의 지연 시간이었습니다. LLM(Large Language Model) 기반 챗봇은 구조적으로 응답에 1~5초가 소.. 2025. 12. 25. [인턴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. [인턴IN메타] React의 '왜'를 파고들다: 레거시 코드에서 배우는 최신 프레임워크의 본질 아는 것과 '설명할 수 있는 것'의 차이베테랑 개발자일수록 기본기의 중요성을 강조합니다. 저 역시 이번 인턴IN메타 1주 차 React 기본 개념 학습을 통해 그 중요성을 다시 한번 체감했습니다. 익숙하다고 생각했던 개념들이었지만, '왜 그렇게 동작하는가?'라는 스스로의 질문 앞에서 순간 머뭇거리게 되더군요.특히 퀴즈의 오답들은 React가 클래스 컴포넌트에서 함수형 컴포넌트와 Hook으로 진화해 온 이유를 명확하게 보여주는 '살아있는 역사'와 같았습니다. 이 글을 통해 단순히 'state는 변경 가능, props는 불가능'과 같은 단편적인 지식을 넘어, React의 핵심 철학과 발전 방향을 함께 고찰해보고자 합니다. 1. 틀린 문제에서 발견한 성장의 기회: React의 진화와 '왜'기존에 다수의 Rea.. 2025. 7. 13. 이전 1 2 다음 반응형
