rexondex's blog

웹 스토리지: 로컬 스토리지, 세션 스토리지, 쿠키의 차이점

웹 스토리지: 로컬 스토리지, 세션 스토리지, 쿠키의 차이점웹 애플리케이션에서 클라이언트 측에 데이터를 저장하는 주요 메커니즘은 로컬 스토리지(localStorage), 세션 스토리지(sessionStorage), 그리고 쿠키(Cookies)입니다. 이들은 각각 다른 특징과 용도를 가지며, 데이터의 지속성, 접근 방식, 보안 측면에서 중요한 차이를 보입니다.1. 로컬 스토리지 (localStorage)특징지속성: 영구적입니다. 사용자가 명시적으로 데이터를 삭제하지 않는 한, 브라우저를 닫았다가 다시 열어도 데이터가 유지됩니다.범위: 동일한 출처(origin - 프로토콜, 호스트, 포트)를 가진 모든 창과 탭에서 접근 가능합니다.접근: 클라이언트 측 JavaScript 코드를 통해 동기적으로 접근합니다.서..

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

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

세션 기반 인증 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..

리액트 컴포넌트의 이해: 함수형 vs 클래스형리액트에서 컴포넌트는 UI를 구축하는 핵심적인 building block이며, 독립적이고 재사용 가능한 코드 단위입니다. 컴포넌트를 통해 복잡한 사용자 인터페이스를 작고 관리하기 쉬운 조각으로 분할하여 개발 효율성과 유지보수성을 크게 향상시킬 수 있습니다.리액트 컴포넌트는 탄생 초기부터 존재했던 클래스 컴포넌트와 이후 등장하여 주류가 된 함수형 컴포넌트 두 가지 주요 유형으로 나뉩니다.함수형 컴포넌트 (Functional Components)정의:함수형 컴포넌트는 JavaScript의 일반적인 함수로 작성됩니다. 이 함수는 props (properties) 라는 입력 객체를 인자로 받아, 리액트 엘리먼트를 기술하는 JSX (JavaScript XML) 를 반환..