반응형 프론트엔드12 [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. [HTML/CSS/JS] React를 통해 useState()를 사용해 보자 : 상태를 업데이트 해보자 usdState() 함수는 리액트에서 컴포넌트 요소들의 값을 간편하게 생성하거나 업데이트하는 도구를 제공한다. 아래의 예시를 보자. state라는 변수에 초기값을 0으로 설정 ex) const [state, setState] = useState(0); setState()를 통해 state의 값을 변경할 수 있다. ex) setState(state + 1); 실제 예시를 적용해 보자 See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. useState() 함수를 왜 사용하는 걸까? 그저 변수를 선언하고 변경할 뿐이라면 useState()를 사용할 필요가 있는지 의문이 들 수 있다. 하지만, 많이 사용하는 기존의 방식대로 let이나 var를 통해 변수를 선언하.. 2023. 8. 13. [HTML/CSS] calc()를 통해 속성값을 계산해 보자 : 사칙연산을 통한 속성값 계산 calc() 함수는 다양한 속성들의 속성값 계산을 가능하게 만들어 준다. 아래 예시를 보자. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. 계산 법칙과 우선순위는 사칙연산과 동일하다. 괄호 안을 계산 곱셈과 나눗셈을 계산 덧셈과 뺄셈을 계산 동순위 연산이 2개 이상이면, 왼쪽부터 오른쪽 순으로 계산 계산의 대상으로 px, % 등을 함께 계산하는 것이 가능하다. See the Pen Untitled by me_in_sk (@sleepyMS) on CodePen. calc() 함수를 통해 요소의 너비나 높이 뿐만 아니라 다양한 속성들의 속성값을 계산하는 것이 가능하며, 코드의 확장성을 위해 :root를 통한 변수를 통제하여 일정 값들을 계산하는 것 또한.. 2023. 6. 21. 이전 1 2 3 다음 반응형
