rexondex's blog

React에서 JWT를 이용한 사용자 인증 시스템 구현 및 로그아웃

JWT 기반 사용자 인증 시스템 구현 (React)React 애플리케이션에서 JWT를 사용하여 사용자 인증 시스템을 구축하는 일반적인 흐름은 다음과 같습니다.1. 로그인 (Login):사용자가 아이디와 비밀번호를 입력하여 로그인 요청을 서버로 보냅니다.서버는 사용자의 인증 정보를 확인하고 유효한 경우 JWT를 생성하여 클라이언트 (React 애플리케이션)에게 응답합니다. 이 JWT에는 일반적으로 사용자 정보 (예: 사용자 ID, 이름)와 만료 시간 등이 포함됩니다.React 애플리케이션은 이 JWT를 안전한 저장소 (예: localStorage, sessionStorage, HttpOnly 쿠키)에 저장합니다. HttpOnly 쿠키는 XSS 공격에 더 안전하지만, JavaScript에서 직접 접근할 수 ..

먼저 배포중이던 [RakaFeed](https://rakaso598.github.io) 라는 피드형 게시판이 있었는데, 포트폴리오나 개발 현황 등을 구체적으로 정리하고 공유하기 위해 새로운 포트폴리오 페이지를 만들었습니다. 이번 포트폴리오 배포 페이지는[나의 개발 포트폴리오](https://rakaso598.github.io/portfolio/) 라는 제목으로 정했습니다. 나의 개발 포트폴리오[프로젝트 1 이름] [프로젝트 1에 대한 설명입니다. 이 프로젝트를 통해 무엇을 배우고 성취했는지, 어떤 기술적 도전을 극복했는지 등을 구체적으로 작성해 주세요. 가능하다면 프로젝트의 주요rakaso598.github.io 빠른 로딩속도와 간편한 조작을 위해 HTML,CSS,JS로 이루어진 단일 html 파일로 구..

Windows, WSL, Git Bash, Chocolatey 동작 계층 및 관계Windows 운영체제, WSL (Windows Subsystem for Linux), Git Bash, 그리고 Chocolatey가 서로 어떤 관계를 가지고 어떤 단계에서 동작하는지 설명하는 문서입니다.동작 계층 비유마치 건물의 층처럼 각 기술 요소의 동작 단계를 이해해 보겠습니다.🧱 가장 아래층 (기반): Windows 운영체제역할: 컴퓨터의 가장 기본적인 토대로, 모든 소프트웨어와 하드웨어가 동작하는 기반 환경을 제공합니다. 파일 시스템 관리, 메모리 관리, 장치 드라이버 관리 등 핵심적인 운영체제 기능을 수행합니다.비유: 건물의 땅이자 콘크리트 기반공식 레퍼런스: Microsoft Windows 공식 홈페이지🏠 1..

표준프레임워크 포털 eGovFrame본문 내용 바로가기 대메뉴 바로가기 소개 구성 구성상세 버전별 구성 오픈소스 SW 현황 아키텍쳐 라이선스 적용사례 추진성과 기술지원내역 컨트리뷰션 센터소개 지원서비스 적용지원 서비스www.egovframe.go.kr표준프레임워크 포털 eGovFrame자바 스프링에 대한 학습이 스스로 더 필요하다고 생각되어, 전자정부 표준프레임워크를 통해 풀스택 개발환경에 익숙해지고 싶었습니다. 자바 스프링부트, 그리고 풀스택적인 역량을 늘리기 위해 백엔드뿐만 아니라 프론트엔드도 같이 실행하여 동작 방법을 확인하고 컴포넌트 구현 예제나 디자인패턴 등을 익히기 위해 전자정부프레임워크를 로컬에 복제하여 실행하고 결과를 확인해보기로 했습니다. 먼저 표준프레임워크 깃허브로 접속해 원본 저장소를..

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

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

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

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

Next.js란 무엇인가요? Next.js는 풀스택 웹 애플리케이션을 빌드하기 위한 React 프레임워크입니다.React Components를 사용하여 사용자 인터페이스를 빌드하고 Next.js를 사용하여 추가 기능과 최적화를 구현합니다. 후드 아래에서 Next.js는 번들링, 컴파일 등과 같이 React에 필요한 툴링을 추상화하고 자동으로 구성합니다. 이를 통해 구성에 시간을 들이는 대신 애플리케이션 빌드에 집중할 수 있습니다. 개인 개발자이든 대규모 팀에 속한 사람이든 Next.js는 대화형, 동적인, 빠른 React 애플리케이션을 구축하는 데 도움을 줄 수 있습니다. https://nextjs.org/docs Introduction | Next.jsWelcome to the Next.js Docum..