rexondex's blog

React 애플리케이션에서의 JWT 기반 사용자 인증 시스템 구현

React 애플리케이션에서의 JWT 기반 사용자 인증 시스템 구현React 환경에서 JSON Web Token(JWT)을 활용한 사용자 인증 시스템 구축과, 효과적인 로그아웃 전략에 대해서 정리했습니다.1. JWT 인증 흐름사용자 로그인 요청서버 인증 및 JWT 발급클라이언트 JWT 저장 (HttpOnly Cookie 권장)인증 필요 요청 시 JWT를 Authorization 헤더에 담아 전송서버 JWT 검증 후 응답2. React 구현 단계2.1. 로그인 컴포넌트 및 API 연동로그인 UI 컴포넌트 개발로그인 API 호출 및 JWT 수신HttpOnly Cookie를 통한 JWT 저장 권장2.2. JWT 저장 및 관리HttpOnly Cookie: XSS 방어에 효과적, JavaScript 접근 불가Axi..

세션 기반 인증 vs 토큰 기반 인증: 차이점과 사용 사례

세션 기반 인증 vs 토큰 기반 인증세션 기반 인증과 토큰 기반 인증은 웹 애플리케이션에서 사용자를 식별하고 권한을 관리하는 두 가지 주요 방식입니다. 작동 방식과 특징에 뚜렷한 차이가 있으며, 특정 상황에 더 적합한 방식이 있습니다.1. 작동 방식세션 기반 인증 (Session-based Authentication):사용자 인증 성공 시, 서버는 사용자 정보를 저장하는 세션(Session)을 생성하고 고유한 세션 ID를 발급합니다.세션 ID는 쿠키(Cookie)를 통해 클라이언트에게 전달됩니다.이후 요청 시 클라이언트는 쿠키를 통해 세션 ID를 서버에 전송하여 인증 상태를 유지합니다.로그아웃 시 서버는 해당 세션을 파기합니다.토큰 기반 인증 (Token-based Authentication):사용자 인..

[Next.js] 현대적인 웹 애플리케이션 개발을 위한 React 프레임워크

Next.js: 현대적인 웹 애플리케이션 개발을 위한 React 프레임워크정의 (Definition)Next.js는 사용자 경험(User Experience)과 개발자 경험(Developer Experience)을 극대화하기 위해 설계된 React 기반의 풀스택 웹 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원하며, 간편한 라우팅, API 엔드포인트 생성, 최적화된 빌드 및 배포 기능을 제공하여 현대적인 웹 애플리케이션 개발을 효율적으로 만들어줍니다.핵심 개념 (Core Concepts)파일 시스템 기반 라우팅 (File-system Routing):pages 디렉터리 내의 파일 구조를 기반으로 자동으로 라우트..

[DB] 관계형 데이터베이스 설계를 위한 데이터베이스 정규화

관계형 데이터베이스 설계를 위한 핵심: 데이터베이스 정규화데이터베이스 정규화는 관계형 데이터베이스를 설계하는 데 있어 데이터 중복을 최소화하고 데이터 무결성을 확보하기 위한 필수적인 과정입니다. 이 체계적인 구조화 과정을 통해 데이터베이스는 더욱 효율적이고 안정적으로 운영될 수 있습니다.왜 데이터베이스 정규화가 중요할까요?정규화의 궁극적인 목표는 다음과 같습니다.데이터 중복 제거: 불필요한 데이터 중복을 줄여 데이터베이스의 저장 공간 활용도를 높입니다.데이터 무결성 유지: 데이터의 일관성과 정확성을 확보하여 데이터에 대한 신뢰도를 향상시킵니다.이상 현상 방지: 데이터의 삽입, 삭제, 수정 시 발생할 수 있는 예기치 않은 문제점들을 예방합니다.정규화의 단계별 이해정규화는 여러 단계를 거치며, 각 단계마다 ..

[Next.js] 환경 변수 보안을 위한 프리픽스 (NEXT_PUBLIC_)

Next.js 환경 변수 보안 가이드Next.js 애플리케이션에서 환경 변수를 안전하게 관리하는 것은 매우 중요합니다. 특히 클라이언트 측 코드에 노출되어서는 안 되는 민감한 정보의 경우, 주의 깊은 처리가 필요합니다. Next.js 공식 문서를 기반으로 환경 변수 사용과 보안에 대한 지침을 정리했습니다.1. 환경 변수 로드 방식Next.js는 .env, .env.local, .env.[environment], .env.[environment].local 등의 파일을 통해 환경 변수를 로드합니다. 로드된 환경 변수는 process.env 객체를 통해 접근할 수 있습니다.2. NEXT_PUBLIC_ 프리픽스의 중요성Next.js에서 환경 변수명 앞에 NEXT_PUBLIC_ 프리픽스를 붙이는 것은 해당 변수..

웹팩(Webpack) 모듈 번들러와 Vite의 핵심 개념 및 특징

웹팩(Webpack) 모듈 번들러웹팩은 자바스크립트 애플리케이션을 위한 정적 모듈 번들러입니다. 웹팩은 애플리케이션을 구성하는 JavaScript, CSS, 이미지, 폰트 등 다양한 자원들을 모듈로 취급하고, 이 모듈들 간의 의존성 관계를 분석하여 브라우저에서 효율적으로 로딩할 수 있는 하나 또는 여러 개의 번들(묶음)로 만들어줍니다.핵심 개념:엔트리(Entry): 웹팩이 번들링을 시작하는 지점입니다. 보통 애플리케이션의 메인 JavaScript 파일이 됩니다.아웃풋(Output): 웹팩이 생성한 번들된 파일들의 출력 경로와 이름을 설정합니다.로더(Loader): JavaScript 파일이 아닌 다른 타입의 파일(CSS, 이미지, 폰트 등)을 웹팩이 이해하고 처리할 수 있도록 변환하는 도구입니다. 예를 ..