본문 바로가기
반응형

프로그래밍/프론트엔드26

[React] 사용자 이탈을 0%로: 인앱 브라우저 감지 및 리다이렉트 구현 여정 📂 GitHub 저장소🌐 라이브 데모💼 포트폴리오카카오톡, 에브리타임 등 인앱 브라우저에서 Google OAuth 로그인이 차단되는 문제를 분석하고, 앱별 URL 스킴을 활용한 외부 브라우저 리다이렉트 솔루션을 구현한 과정을 공유합니다. 📑 바로가기🎯 문제 정의🔍 원인 분석🔥 도전과제💡 해결 과정📈 결과🛠 기술 스택🎯 문제 정의: 왜 카카오톡에서 구글 로그인이 안 될까?대학 커뮤니티 에브리타임이나 카카오톡에서 공유된 링크를 클릭하면, 해당 앱 내부의 인앱 브라우저(In-App Browser)에서 웹페이지가 열립니다. 문제는 이 환경에서 Google OAuth 로그인이 완전히 차단된다는 것입니다.사용자가 "Google로 계속하기" 버튼을 누르면, 다음과 같은 에러 메시지가 표시됩니다:".. 2026. 1. 20.
[React] 자연어 기반 시간표 자동 생성을 위한 프론트엔드 최적화 여정 📂 GitHub 저장소🌐 라이브 데모💼 포트폴리오대학생 AI 챗봇 서비스 강냉봇에 "자연어 기반 시간표 자동 생성" 기능을 추가하면서, 기획 부재 상황에서 애자일하게 MVP를 구현하고, 프론트엔드 주도적인 개발 방식을 통해 난관을 극복한 과정을 공유합니다. 📑 바로가기🎯 문제 정의🏗️ 아키텍처🔥 도전과제💡 해결 과정📈 결과🛠 기술 스택🎯 문제 정의: 수강신청은 왜 항상 힘들까?대학생들에게 수강신청 기간은 전쟁입니다. 듣고 싶은 과목들은 많은데, 어떤 과목이 어떤 시간에 열리는지, 내 공강 날짜와 겹치지는 않는지 하나하나 따져봐야 합니다. 기존의 시간표 서비스들은 대부분 수동 검색 방식이었습니다."알고리즘 A반 넣어보고... 안되네? B반으로 바꿔볼까? 아 그럼 데이터베이스랑 겹치네.... 2026. 1. 10.
[React] AI 챗봇의 체감 속도를 높인 프론트엔드 최적화 여정 📂 GitHub 저장소🌐 라이브 데모💼 포트폴리오 대학 AI 챗봇 서비스 강냉봇의 프론트엔드를 개발하면서 "느린 AI 응답"이라는 근본적인 한계를 프론트엔드 기술로 어떻게 극복했는지 공유합니다. 📑 바로가기 🎯 문제 정의🏗️ 아키텍처🔥 도전과제💡 해결 과정📈 결과🛠 기술 스택 🎯 문제 정의: 왜 AI 챗봇은 느리게 느껴질까? 강남대학교 학생들을 위한 AI 챗봇 서비스를 개발하면서 첫 번째로 마주한 현실은 AI 응답의 지연 시간이었습니다. LLM(Large Language Model) 기반 챗봇은 구조적으로 응답에 1~5초가 소요됩니다. 여기에 네트워크 통신 시간까지 더.. 2025. 12. 25.
[React] map() 함수를 사용한 리스트 렌더링 : key 속성으로 반복되는 컴포넌트를 만들어 보자 1. map() 함수란?map() 함수는 JavaScript 배열 함수 중 하나로, 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아 새로운 배열을 반환한다. React에서 map() 함수는 주로 배열 데이터를 컴포넌트로 변환할 때 사용된다. JavaScript 사용 예시const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled); // [2, 4, 6, 8, 10]  2. React에서 map() 함수 사용하기React에서 map() 함수는 배열 데이터를 JSX 요소로 변환하는 데 자주 사용된다. 아래의 예시는 사용자 목록을 렌더링한 예시이다. 여기서 users .. 2024. 5. 18.
반응형