Frontend/Next.js

🏷️들어가며 해당 글은 "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..

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

📌React fetch 방법 import { useEffect,useState } from "react"; export default function tomato() { const [isLoading, setIsloading] = useState(true) const [movies, setMovies] = useState([]); const getMovies = async () => { const response = await fetch("https://nomad-movies.nomadcoders.workers.dev/movies"); const json = await response.json(); setMovies(json); setIsloading(false); } useEffect(() => { g..

✅Layouts Next.js는 처음에는 layout 컴포넌트에 있는 export된 디폴트 컴포넌트를 렌더링한다. react규칙으로 내부에 있는 컴포넌트들은 자동으로 children이라는 props로 바뀌게 된다. 레이아웃은 중첩이 가능하다. 제일 하위에 있는 폴더로 들어가면 모든 상위에 있는 layout다 출력되는 것이다. 제일 상위에 있는 폴더는 하위에 있는 폴더가 다 노출되지 않는다. ✅(폴더이름) route groups은 폴더 이름을 괄호로 묶어줘야 한다. 괄호로 묶은 폴더는 url에 전혀 영향을 미치지 않는다. routes를 그룹화해서 logical groups으로 만들 수 있다. 이것을 사용함으로써 일부 레이아웃을 선택하거나 선택 해제하여 복잡한 일을 할 수 있다. ✅Metadata 웹의 he..

📌스크롤 유도 가이드 구현 "use client"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; export default function page() { const [isSpecialCase, setIsSpecialCase] = useState(false); const handleScrollGuideClick = () => { if (isSpecialCase) { window.scrollTo({ top: 0, behavior: "smooth", //스크롤 부드럽게 }); } }; useEffect(() => { const handleScroll = () => { const isScrollAtBottom = w..

📌가로 스크롤바 구현 page.js "use client"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; export default function page() { const scrollSectionRef = useRef(null); const scrollContentRef = useRef(null); useEffect(() => { const scrollSection = scrollSectionRef.current; const scrollContent = scrollContentRef.current; const handleScroll = () => { const scrolled = window.pageYOff..