Frontend

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

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

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

✅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저장위치클라이언트서버라이..

📢SVG란? SVG는 'Scalable Vector Graphics' 의 약어로각 위치 값을 표시하는 벡터와 같은 방식의 2차원 그래픽용 XML 기반의 형식을 이야기한다.   ✅SVG를 사용하는 이유는? PNG나 JPG는 비트맵 기반의 이미지로 각 항목에 하나 이상의 정보 비트를 가지고 있는 표현이다.반면 SVG는 벡터 기반으로 각 좌표에 점을 이어서 만들어지는 개념이다. 벡터 기반의 아이콘은 확대나 축소를 해도 깨지지 않는 것과 같은 원리이다.  ✅프로젝트에서의 SVG 활용 사례내가 참여한 프로젝트에서는 MobileFooter 컴포넌트에 SVG 아이콘을 활용하여 사용자 경험을 개선했다하단 네비게이션 메뉴에서 각 아이콘을 클릭하면 fill이 채워지도록 하졌고 css의 scale을 이용해 크기를 자연스럽..

📢Electron이란? 일렉트론이란 데스크톱 애플리케이션을 구축하는 도구 Electron은 데스크톱 애플리케이션을 개발하기 위한 오픈소스 프레임워크이다. HTML, CSS, JavaScript와 같은 웹 기술을 사용하여 Windows, macOS, Linux에서 실행 가능한 크로스플랫폼 데스크톱 애플리케이션을 만들 수 있다. 물론 Angular, React, Vue도 사용가능하다.   추가로 매년마다 갱신되는 프론트엔드 로드맵 마지막 쪽에서 electron을 찾아볼 수 있다. 그만큼 프론트엔드에서도 나름 중요한 역할을 차지하고 있다는 거 아닐까?   ✅Electron을 활용한 대표적인 애플리케이션우리가 알고 있는 많은 앱들이 이미 electron을 이용하고 있고 추가로 notion,postman도 el..

🧐useSWR란? useSWR은 React에서 데이터를 자동으로 캐싱하고, 재검증하며, 동기화하는 데 도움을 주는 훅(hook)이다. SWR은 Stale-While-Revalidate의 약자로, 오래된 데이터와 새로운 데이터를 함께 처리하는 전략에서 이름을 따왔다. 이 훅은 비동기 데이터 요청에 관련된 복잡한 로직을 쉽게 처리할 수 있도록 설계되었다. ※ 데이터를 자동으로 캐싱한다. 한 번 가져온 데이터를 저장해 두고, 같은 데이터를 다시 요청할 때 서버로 또다시 요청하지 않고 저장된 데이터를 사용하는 것 📌주요기능데이터 가져오기(fetching)useSWR은 주어진 키(key)와 fetcher 함수(API 호출 등을 수행하는 함수)를 사용하여 데이터를 가져온다. 자동 캐싱데이터를 캐시(Cache)하..