분류 전체보기 (51) 썸네일형 리스트형 클라이언트와 서버 간 데이터를 안전하게 주고받는 법: 양방향 암호화 Payload 이야기 양방향 암호화가 필요한 이유HTTPS가 암호화해 주는데 굳이 또 암호화할 필요가 있을까?많은 경우 HTTPS만으로도 충분하지만, 아래와 같은 상황에서는 애플리케이션 레벨 암호화가 큰 도움이 돼요.사용자가 입력한 매우 민감한 정보를 백엔드에서 다시 로그로 남길 가능성이 있을 때서버에서 클라이언트로 특정 정보를 줄 때 노출을 최소화하고 싶을 때토큰, API 키, 주민번호 일부 등 평문 그대로 저장되면 안 되는 정보 처리쉽게 말해, HTTPS는 전송 구간을 안전하게 하고, 애플리케이션 레벨 암호화는 그 내용을 안전하게 만드는 역할을 해요. 대칭키 암호화와 비대칭키 암호화웹 애플리케이션에서 가장 흔히 쓰는 암호화 방식은 두 가지가 있어요.대칭키 암호화 (AES 등)같은 키로 암호화와 복호화를 모두 처리해요.속도.. Next.js에서 토큰 전략 제대로 이해하고 설계하기 Next.js 앱에서 토큰이 필요한 이유Next.js는 SSR(Server-Side Rendering), CSR(Client-Side Rendering), API Routes 등 다양한 렌더링 방식을 혼합할 수 있어요.이 말은 인증 정보(토큰)가 클라이언트와 서버 모두에서 필요할 수 있다는 뜻이죠.클라이언트 측 페이지 전환 시에도 사용자 상태 유지서버 측에서 SSR 할 때도 로그인된 사용자 정보 필요API Routes 보호즉, 토큰 전략을 제대로 세워야 모든 렌더링 방식에서 일관되게 인증이 유지됩니다. Next.js에서 주로 쓰는 토큰 전략HttpOnly 쿠키서버에서 응답할 때 쿠키에 토큰을 심음클라이언트 JS에서는 접근 불가능 (XSS 안전)자동으로 요청에 쿠키가 포함돼서 SSR에서 인증 확인이 쉬움✅.. 웹 인증의 핵심, 세션과 토큰 관리 완전 정복! 1. 세션이 뭐예요?간단히 말해, 세션은 “사용자가 로그인 상태임을 서버가 기억하는 방법”이에요.전통적인 웹은 로그인 성공 시 서버가 세션 ID를 만들어서 브라우저 쿠키에 넣어줍니다.그리고 사용자가 페이지를 이동하거나 새로고침해도, 쿠키 덕분에 서버가 ‘누구인지’ 알아보고 로그인 상태를 유지할 수 있어요.서버가 직접 사용자 정보를 메모리에 저장하거나 데이터베이스에 관리해요.클라이언트는 오직 ‘세션 ID’만 주고받습니다.2. 토큰이 뭐죠?요즘은 JWT(JSON Web Token) 같은 토큰 기반 인증이 대세입니다.이 방식은 서버가 아닌 클라이언트가 직접 사용자 정보를 담은 토큰을 보관해요.토큰 안에는 사용자 ID, 만료 시간 같은 정보가 들어 있고, 서버가 서명해서 위변조를 방지합니다.클라이언트가 로컬스토.. NextAuth.js로 Next.js에서 간편하고 강력한 OAuth 2.0 로그인 구현하기 1. NextAuth.js란?NextAuth.js는 Next.js 환경에 최적화된 완성도 높은 인증 라이브러리입니다.복잡한 OAuth 2.0과 OpenID Connect 흐름을 내부에서 알아서 처리해주고,간단한 설정만으로 구글, 깃허브, 페이스북, 카카오 같은 다양한 OAuth 제공자를 연동할 수 있습니다. 2. NextAuth.js의 주요 특징간편한 설정: 몇 줄만 코드 작성하면 바로 소셜 로그인 구현 가능다양한 인증 제공자 지원: 구글, 깃허브, 네이버, 카카오 등세션과 JWT 지원: 원하는 방식으로 토큰 및 세션 관리 가능서버 사이드 렌더링(SSR) 호환: Next.js 특성에 맞게 최적화확장성: 콜백, 이벤트, 커스텀 인증 로직 자유롭게 추가 가능3. 설치하기npm install next-auth.. OAuth 2.0과 OpenID Connect 완벽 이해하기 OAuth 2.0이란 무엇인가?OAuth 2.0은 “권한 위임”을 위한 프로토콜입니다.쉽게 말해, 사용자가 자신의 로그인 정보를 직접 앱에 넘기지 않고도,앱이 사용자를 대신해 다른 서비스(구글, 페이스북 등)에서 정보를 얻을 수 있게 해줍니다.예를 들어 “구글 계정으로 로그인”을 할 때, 내 비밀번호가 내 앱 서버에 저장되거나 전달되지 않고,구글만이 사용자를 인증하고, 앱은 구글이 발급해준 ‘토큰’으로 필요한 정보에 접근하는 방식이죠.OAuth 2.0의 주요 구성요소OAuth 2.0은 다음 네 가지 주체가 상호작용하며 동작합니다.Resource Owner(리소스 소유자)즉 실제 사용자입니다.Client(클라이언트)사용자의 권한을 위임받아 리소스 서버에 접근하려는 앱 또는 서비스입니다.Authorizati.. Anime.js 사용법 완벽 정리 Anime.js는 간결하면서도 강력한 API를 제공하는 가벼운 애니메이션 라이브러리로,CSS 속성, SVG, DOM 요소 등 다양한 대상을 쉽게 애니메이션할 수 있습니다.이번 포스팅에서는 Anime.js의 핵심 개념과 사용법, React 프로젝트에서의 적용법까지 자세히 다뤄보겠습니다. 1. Anime.js란?오픈소스 자바스크립트 애니메이션 라이브러리CSS 프로퍼티, SVG 속성, DOM 속성, JS 객체 등 거의 모든 것을 애니메이션 가능작고 빠르며, 복잡한 타임라인 없이도 자연스러운 애니메이션 작성 가능다양한 easing 함수 지원keyframes를 통한 복잡한 단계별 애니메이션도 가능2. 설치 npm install animejs 3. Anime.js 기본 사용법Anime.js는 anime() 함수를 .. React에서 Framer Motion 사용법 완벽 정리 React 프로젝트에서 부드럽고 직관적인 애니메이션을 구현할 때,Framer Motion은 가장 인기 있고 강력한 라이브러리 중 하나입니다.이 글에서는 Framer Motion의 핵심 사용법과 React 연동법을 단계별로 소개합니다. 1. 설치하기npm install framer-motion 2. Framer Motion 핵심 개념motion 컴포넌트: 기본 HTML 요소를 확장해 애니메이션을 선언적으로 작성 가능initial: 애니메이션 시작 상태 지정animate: 애니메이션 종료 상태 지정transition: 애니메이션 진행 시간 및 방식을 설정상태별 애니메이션: whileHover, whileTap 등 인터랙션 상태 애니메이션 지원layout: 레이아웃 변화 시 부드러운 트랜지션 적용3. 기본 애.. React에서 GSAP 사용법 완벽 정리 React 프로젝트에서 세련된 애니메이션을 구현하고 싶다면, GSAP(GreenSock Animation Platform) 는 매우 강력한 도구입니다.이 글에서는 GSAP의 기본 개념부터 React에서의 실습 적용 방법까지 친절히 소개합니다. 1. GSAP 설치먼저 프로젝트에 GSAP을 설치합니다.npm install gsap 2. React에서 GSAP을 사용할 때의 핵심 포인트GSAP은 DOM에 직접 접근해서 애니메이션을 적용합니다.따라서 React에서는 보통 다음 조합으로 사용합니다:useRef: DOM 요소 접근useEffect: 컴포넌트 마운트 타이밍에 애니메이션 실행3. 기본 예제 – 박스를 오른쪽으로 이동시키기import React, { useEffect, useRef } from "reac.. 이전 1 2 3 4 ··· 7 다음 목록 더보기
