전체 글

☁️구름톤 지원하기작년에 부트캠프에서 같이 교육 듣던 친구가 추천해준 해커톤! 특별한 계기보다는 재미있어 보였다! 13기 모집 알림을 신청해두었고, 드디어 문자로 알림이 왔다. 구글폼에 들어가 보니 예상보다 작성할 내용이 꽤 많았다.(선택) 시중에 나와 있는 디자인 시스템(Material Design, Radix UI, Chakra UI)을 사용해 본 적이 있나요? 있다면 어떤 디자인 시스템을 사용했고, 어떻게 활용했는지 구체적으로 설명해주세요.(선택) 다른 디자이너나 개발자와 협업하여 디자인시스템 라이브러리를 배포하거나 개선한 경험이 있나요? 있다면 구체적인 작업 내용을 설명해주세요.구름톤 참여 동기를 작성해주세요.(공란 포함 최대 300자)지원자께서 생각하시는 최근 제주도가 직면한 사회 문제는 무엇이..

🏷️들어가며 해당 글은 "next": "14.2.6" 버전을 바탕으로 한 프로젝트입니다. SSE는 HTTP 표준 기술 중 하나이므로 특정 버전이 존재하지 않습니다.   ❓SSE를 선택한 이유는?우리FIS아카데미에서 진행한 최총 프로젝트에서 우리의 핵심 기능은 '정산'이었다. 이때 신속한 정산을 위해 ‘정산 요청’, ‘정산 시작’, ‘정산 완료’ 등의 정보를 여행원 간 실시간으로 공유할 필요성을 느꼈고 우리는 실시간으로 서비스를 구현할 기술을 찾고 있다.   SSE(Server-Sent Events) VS Polling VS WebSocket 방식 연결  방식 데이터 흐름 실시간성 서버 부하 브라우저 지원 사용 사례 SSE (Server-Sent Events)단방향 (서버 → 클라이언트)서버에..

🏷️들어가며 해당 글은 "next": "14.2.6", "@storybook/nextjs": "8.4.1" 버전을 바탕으로 한 프로젝트입니다.  🤗Storybook 이란? Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.공식문서에서 찾아보면 "스토리북은 UI 구성 요소와 페이지를 독립적으로 제작하는 프론트엔드 작업 환경입니다. 수천 개의 팀이 UI 개발, 테스트, 문서화를 위해 Storybook을 사용하고 있으며, 오픈 소스..

우리fis아카데미에서 사이드 프로젝트를 진행하면서 랭킹기능을 구현하게 되었다. 페이지네이션이랑 무한스크롤 중에 고민하다가 일일이 클릭하며 페이지를 이동하는게 번거롭다고 느꼈고 InfiniteScroll을 구현해보고 싶었다!왜 InfiniteScroll을 사용했는가?사용자 경험 향상: 사용자가 스크롤을 내릴 때 자동으로 추가 데이터를 불러옴으로써, 페이지를 수동으로 전환할 필요 없이 매끄럽고 연속적인 데이터 로딩 경험을 제공성능 최적화: 초기 데이터 로딩 시 모든 데이터를 한 번에 가져오는 것이 아니라, 필요한 만큼의 데이터만 순차적으로 불러와서 성능을 최적화편리한 데이터 처리: 다음 페이지 데이터를 가져오는 로직이 명확하게 분리되어 있어, 유지보수와 확장성이 용이 1. react-infinite-scro..

✅React Testing Libraries란?? React Testing Library는 React 애플리케이션의 컴포넌트를 테스트하기 위한 라이브러리이다. 주로 사용자 관점에서의 컴포넌트 동작을 테스트하도록 설계되어 있으며, 컴포넌트가 실제로 어떻게 동작하는지를 검증하는 데 중점을 둔다.  ※ 프론트엔드 테스트 종류 더보기항목React Testing LibraryVitestCypress목적단위 테스트, 통합 테스트단위 테스트, 통합 테스트엔드 투 엔드(E2E) 테스트, 통합 테스트실행 환경노드 환경에서 가상의 DOM 사용노드 환경에서 Vite와 통합해 빠르게 실행실제 브라우저 환경에서 테스트사용 용도컴포넌트의 단위 테스트컴포넌트/함수의 단위 및 통합 테스트전체 애플리케이션 흐름, UI 상호작용 테스트..

✅문제 상황 서버에서 날짜와 시간 데이터를 받아와야하는데 타입이 LocalDateTime이었다. 프론트에서는 input에 으로 날짜만 보내고 있었던 상황 그래서 다음과 같은 에러가 떴다. Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize value of type `java.time.LocalDateTime` from String "2024-09-22 00:00": Failed to deserialize java.time.LocalDateTime: (java.time.format.DateTimeParseException) Text '2024-09-22..

✅next-auth 란 무엇인가?Auth.js(NextAuth.js)는 Next.js 프로젝트의 사용자 인증 및 세션 관리를 위한 라이브러리이다. Google, GitHub 등의 다양한 인증 공급자를 지원하며, (그중에서도 내가 구현한거는 Keycloak과의 인증이다 )Next.js의 서버와 클라이언트 측 모두에서 인증 및 세션 관리를 손쉽게 처리할 수 있다. ✅NextAuth.js를 이용한 Keycloak과의 인증 처리 과정단계파일명동작로그인 버튼 렌더링AuthStatus.js사용자가 로그인 상태인지 확인하고, 로그인 버튼을 클릭하면 signIn 함수를 호출하여 Keycloak으로 로그인 요청 전송.Keycloak 로그인 처리auth.jsKeycloak 제공자와의 통신을 설정하고, JWT 토큰을 사용한..

📌session 이란 무엇인가?  클라이언트와 서버 간의 연결 상태를 의미, 즉 클라이언트가 브라우저에 접속하여 서버와 접속이 종료하기 전의 상태를 의미한다.  📌session 동작 순서 사용자가 로그인을 한다서버측에서는 로그인 정보를 통해 사용자를 확인한다.서버측에서 세션 저장소에 사용자 세션 생성을 요청한다.사용자의 고유한 ID값을 부여하여 세션 저장소에 저장하고, 이와 연결되는 세션 ID를 발행한다.사용자는 서버에서 해당 세션ID를 받아 쿠키에 저장한다인증이 필요한 요청을 할 때 헤더에 쿠키를 실어 요청한다서버에서는 쿠키를 받아 세션 저장소에 대조를 한다인증 후 요청된 정보를 가져온다인증이 완료되고 서버는 사용자에게 맞는 데이터를 보내준다 📌session 과 cookie저장위치클라이언트서버라이..