개요드디어 길다면 길었고 짧다면 엄청 순식간에 지나갔던 7개월간의 유레카 2기 과정이 끝이 났다.수료식은 OT와 같은 장소인 LG U+ 마곡사옥에서 진행됐다.수료식 당일 입구에서부터 이렇게 성대하게? 맞이해 주었다. 유레카 2기의 전반적인 교육 과정과 수료 후기에 대해 기술해 보고자 한다.수업나는 프론트엔드 대면반에서 수업을 들었고 김동근 강사님이 수업을 진행하셨다.김동근 강사님은 SAFFY에서 강의를 하시던 분이셨다. HTML/CSS/JS, 알고리즘, Springboot, Figma, React, Web Security, Next.js 등 다양한 것들을 배웠다. 알고리즘같은 경우엔 자바로 수업을 진행하였고 나는 C++이 자바보다 더욱 익숙하였기에 강사님께 양해를 구한 후, 강의를 C++로 따라갔었다...

개요3주간의 유레카 종합 프로젝트가 끝이 났다.이번 프로젝트의 주요 과업은 스트리밍과 이전 대화 내용을 기억하는 요금제 추천 챗봇 구현 이었고 우리 조의 주제는 개인과 가족이 함께 쓸수 있는 LGU+ 요금제 추천 챗봇 및 가족 스페이스 기반 플랫폼 MODi 였다.나는 카카오 로그인과 챗봇 구현 파트를 맡았다.프로젝트를 진행하며 했던 고민과 구현 과정을 정리해보고자 한다.카카오 로그인카카오 로그인은 최대한 카카오 공식 문서의 flow를 따르려고 했다.카카오 공식 문서에서 권장하는 flow는 다음과 같다.이번 프로젝트에서는 클라이언트를 Next.js, 서버를 Spring boot로 사용하였기 때문에 사용자 클라이언트를 Next.js 서비스 서버를 Spring boot로 두고 해당 플로우대로 구현하려고 했다...

개요유레카 종합프로젝트 주요 과업으로 요금제 추천 챗봇 구현이 있었다.일반적인 llm api를 사용할 경우 존재하지 않는 요금제를 추천해 주거나, 타사 요금제를 추천해 주는 문제가 발생할 수 있다.때문에 이러한 환각 현상이나 답변 신뢰성 문제를 해결하기 위해 gpt api를 파인 튜닝하는 방법에 대해 다룬다.파인 튜닝 가능 모델gpt api는 파인 튜닝이 가능한 모델이 정해져 있다.때문에 다음 공식 문서에서 파인 튜닝이 가능한 모델이 있는지 확인하는 것을 추천한다. https://platform.openai.com/docs/pricing#fine-tuning학습 전 꼭 읽어야 하는 문서https://platform.openai.com/docs/guides/fine-tuning-best-practices ..

개요이번에 유레카에서 진행한 유유상종 프로젝트는 세션 로그인 방식을 채택하였기 때문에 백엔드를 https로 배포하여야 했다.https://github.com/SongMinQQ/UUSangJong GitHub - SongMinQQ/UUSangJong: LG유플러스 유레카 2기 미니프로젝트 경매 플랫폼 유유상종LG유플러스 유레카 2기 미니프로젝트 경매 플랫폼 유유상종. Contribute to SongMinQQ/UUSangJong development by creating an account on GitHub.github.com본 글에서는 nginx를 사용하여 호스팅 서버에서 Spring boot 프로젝트를 https로 배포하는 방법에 대해 기술하였다.443번 포트와 80번 포트를 미리 포트포워딩 해두는 것..

개요경매 플랫폼 유유상종 프로젝트에서 JWT 방식이 아닌 세션 방식으로 로그인 기능을 구현했었다. 세션 방식은 로그인이 성공할 경우 클라이언트에 JSESSIONID라는 토큰을 전송한다. 클라이언트는 토큰을 쿠키에 저장하고 요청을 보낼 때 withCredentials : true 옵션으로 요청에 쿠키를 자동 전송한다. 서버는 요청과 함께 온 세션 토큰을 검증하는 방식으로 인증을 진행한다. 위 방식을 사용하기 위해선 서버와 클라이언트 둘 다 https를 사용해야 한다. 본 글에서는 Next.js 프로젝트를 개발 환경에서 https로 동작하게 하는 법과 저장된 쿠키를 확인하는 법에 대해 다룬다.Next.js 프로젝트를 https로 실행하기next.js 13.5.0버전부터 로컬 환경에서 https로 프로젝트를 ..

개요Next.js는 리디렉션을 처리하는 여러 방법이 있다. Next.js에서 지원하는 리디렉션 api는 다음과 같다.APIPurposeWhereStatus Coderedirect사용자 동작 또는 이벤트 후 리디렉션Server Components, Server Actions, Route Handlers307 (Temporary) or 303 (Server Action)permanentRedirect사용자 동작 또는 이벤트 후 영구 리디렉션Server Components, Server Actions, Route Handlers308 (Permanent)useRouter클라이언트 측 내비게이션 수행클라이언트 컴포넌트의 이벤트 핸들러N/Aredirects in next.config.js경로 기반으로 들어오는 요..

개요본 글은 Next.js에서의 에러 핸들링, 로딩 UI, 그리고 스트리밍을 활용한 성능 최적화와 사용자 경험 향상 방법을 다룬다. 애플리케이션을 개발하다 보면 사용자의 입력 실수나 네트워크 문제 등으로 예상 가능한 에러가 발생하거나, 코드 상의 문제로 인한 예상치 못한 에러가 발생할 수 있다. Next.js는 이러한 에러들을 효과적으로 처리하기 위해 명시적 상태 관리 기법과 에러 경계를 제공하며, 이를 통해 사용자에게 원활한 서비스를 제공할 수 있게 한다. 또한, 데이터를 가져오는 과정에서 사용자에게 빈 화면을 보여주는 대신 의미 있는 로딩 UI를 제공하고, 페이지 로딩 속도를 개선하는 스트리밍 기법을 사용할 수 있다. Next.js는 React의 Suspense를 기반으로 페이지를 점진적으로 렌더링하..

개요App Router는 라우팅 및 내비게이션에 하이브리드 접근 방식을 지원한다. 즉 Next.js는 라우팅 시 서버와 클라이언트를 적절히 섞어서 사용한다. 서버에서 애플리케이션 코드는 경로 세그먼트에 의해 자동으로 분할된다. 예를 들어 app 폴더에 있는 코드끼리 분할되고 dashboard 폴더에 있는 코드끼리 분할된다. 클라이언트에서 Next.js는 경로 세그먼트를 사전 로드하고 캐시한다. 즉 Next.js는 사용자가 다음에 갈 수도 있는 경로를 미리 받아서 캐시한다. 즉 사용자가 새 경로로 네비게이션할 때 모든 페이지를 다시 렌더링하는것이 아닌 바뀐 부분만 바꿔치기한다. 이를 통해 사용자 경험을 향상시킨다. 본 글에서는 Next.js의 코드 분할, 사전 로드, 캐싱, 부분 렌더링, 소프트 네비게이션..