제프 딘의 애완견

[React] Mouse Follewer 구현

2026.08.01·

Frontend/React

Mouse Follewer특정 요소가 DOM 내부에서 마우스를 따라다니는 인터랙티브 기능을 뜻한다.구현Reactimport type { ReactNode } from 'react';import { useEffect, useRef } from 'react';import styles from "./MouseFollowerWrapper.module.scss";type Props = { children: ReactNode; leapFactor?: number;};export const MouseFollowerWrapper = ({ children, leapFactor = 0.05 }: Props) => { const ref = useRef(null); const mousePos = useRef({ x: ..

[CSS] 에어비앤비 CSS 속성 순서 컨벤션

2026.07.13·

Style Sheet/Css

1. Positioning (배치)요소가 문서 흐름에서 어떻게 위치하는지positiontop / right / bottom / leftinsetz-index2. Display & Box Model (레이아웃 & 박스 모델)displayflex / flex-direction / flex-wrap / flex-flowflex-grow / flex-shrink / flex-basisjustify-content / align-items / align-content / align-selfgap / row-gap / column-gapgrid / grid-template-columns / grid-template-rows / grid-template-areasgrid-column / grid-row / grid-a..

[React] Framer-motion

2026.07.09·

Frontend/React

Framer-motion모달과 같은 요소의 등장과 퇴장에 애니메이션을 줘야할 때 요소의 언마운트와 같은 기능을 특정 애니메이션이 완료된 후에 실행할 수 있게 해주는 브라우저의 하드웨어 가속을 이용한 라이브러리.Npmnpm install framer-motionComponentsmotionFramer-motion의 가장 기본이 되는 컴포넌트. div, p, h 태그 등 기존 HTML태그를 motion.로 붙혀 사용한다.import { motion } from "framer-motion";export const MotionComponent = () => { return ( hello world );};propproptypedefaultfeatureinitialTarget | Var..

[CSS] CSS Animation

2026.07.09·

Style Sheet/Css

Animation웹페이지의 HTML 요소가 자바스크립트의 도움 없이 스스로, 시간에 따라 부드럽게 스타일이 변하도록 만드는 기능.Animation의 8가지 세부 속성실무에서는 주로 한 줄로 축약해서 쓰지만, 원래는 아래와 같이 8가지의 독립된 속성들로 이루어져 있다. 이 속성들을 조합해 원하는 움직임을 정밀하게 제어한다.1. animation-name(필수)실행할 애니메이션의 이름을 지정한다..modal { animation-name: reveal;}2. animation-duration(필수)애니메이션이 진행되어 완료되기까지의 시간을 지정한다..modal { animation-duration: 1s;}3. animation-timing-function애니메이션의 속도 변화를 지정한다. 처음엔 빠르다..

[Scss] Mixin

2026.06.24·

Style Sheet/Scss

MixinMixin은 scss가 제공하는 재사용 가능한 CSS 코드 묶음이다. 함수처럼 인자를 받을 수 있고, @include로 원하는곳에 불러다 쓴다. 종복 코드를 한곳에서 관리하는것이 Mixin의 핵심 목적이다.기본 문법// mixin 선언@mixin flex-center { display: flex; justify-content: center; align-items: center;}.card { @include flex-center; // @include로 mixin값 사용}인자(Arguments) 넘기기Mixin은 함수처럼 인수를 전달할 수 있다.@mixin button($bg, $color: #fff) { background: $bg; color: $color; padding: 10..

[NextJs] NextJs에서 Google 폰트 사용하기

2026.06.24·

Frontend/Next.js

서론현대 웹 개발에서 폰트 최적화는 필수로 자리잡았다. 과거에는 구글 폰트를 사용하기 위해선 하지만 Next.js의 내장 기능인 next/font/google를 이용하면 빌드 시점에 폰트를 자동으로 다운로드하여 서버에 로컬 저장하기 때문에 UX를 챙길 수 있다.next/font/googleNext.js 13부터 도입된 next/font/google는 Google Fonts를 빌드 타임에 다운로드해서 자체 호스팅하는 기능이다. 기존 방식(태그로 Google Fonts CND 직접 연결)과 비교했을 때 장점이 뚜렷하다. 1. 외부 네트워크 요청 없음: 폰트 파일이 Next.js 서버에서 직접 서빙된다. 2. 레이아웃 쉬프트(CLS)방지: font-display: swap및 사이즈 조정이 자동 적용된다. 3..

OAuth 2.0

2026.06.23·

Computer Science/Network

OAuth 2.0OAuth 2.0(Open Authorization 2.0)은 인터넷 사용자들이 비밀번호를 노출하지 않고, 다른 웹사이트나 애플리케이션에 자신들의 데이터(프로필, 이메일 등)에 접근할 수 있는 권한을 부여하기 위한 글로벌 표준 인증·인가 프로토콜이다.OAuth 2.0의 4가지 역할1. 리소스 소유자(Resource Owner) OAuth 2.0 프로토콜을 사용하여 보호되는 리소스에 대한 액세스 권한을 부여하는 사용자(엔티티). 클라이언트를 인증(Authorize)하는 역할을 수행한다. 예를 들어 네이버 로그인에서 네이버 아이디를 소유하고 third-party 애플리케이션(클라이언트)에 네이버 아이디로 소셜 로그인 인증을 하는 사용자를 의미한다. 2. 클라이언트(Client)OAuth 2...

[NestJs] DTO (with class-validator)

2026.06.22·

Backend/NestJs

DTO(Data Transfer Object)DTO는 말 그대로 계층 간 데이터 교환을 위한 객체이다. 클라이언트가 보낸 요청 데이터가 Controller를 거쳐 Service로 들어올 떄, 이 데이터의 모양과 규격을 정의하는 역할을 한다. 보통 class-validator 패키지를 사용하여 정의한다.npmnpm install class-validatorDTO의 필요성인라인 타입의 한계DTO 없이 인라인 타입으로 바디를 받을 수도 있다.@Post('signup')signup(@Body() body: { email: string; password: string; nickname: string }) { return this.authService.signup(body.email, body.password, ..

[NestJs] NestJs + Jwt

2026.06.21·

Backend/NestJs

NestJs + JwtNestJs에서 로그인/인증 기능을 구현할 때 가장 표준적으로 쓰이는 조합은 @nest/jwt와 @nestjs/passport를 함께 쓰는 방식이다. NestJs의 공식문서의 인증 챕터에에서도 이 조합을 기본 예제로 다루고 있고, 대부분의 실무 프로젝트가 이 패턴을 따른다.흐름회원가입/로그인 → 토큰 발급 → 보호된 라우트에서 토큰 검증Npmnpm install @nestjs/jwt @nestjs/passport passport passport-jwtnpm install -D @types/passport-jwt각 패키지의 역할패키지역할@nestjs/jwt토큰 발급(서명). JwtService.sign()으로 로그인 시 토큰 생성@nestjs/passportNestJS와 Passpo..

[NestJs] NestJS CLI

2026.06.20·

Backend/NestJs

NestJS CLINestJS 프로젝트를 빠르게 생성하고 관리할 수 있게 해주는 공식 커맨드라인 도구.Npmnpm install -g @nestjs/cli주요 명령어nest g module 모듈 생성nest g controller 컨트롤러 생성nest g service 서비스 생성nest g resource 모듈, 컨트롤러 서비스 모두 생성nest g resource REST API, GraphQL, WebSocket, Microservice 중 어떤 방식으로 만들지 선택할 수 있고, 선택과 동시에 기본 CRUD 코드(Create, FindAll, FindOne, Update, Remove)까지 자동 생성된다. 실무에서 새 리소스를 추가할 때 가장 많이 쓰는 명령어.REST API일반적인 웹 API (기..

[NestJs] NestJs 시작하기

2026.06.20·

Backend/NestJs

NestJsNestJs는 Node.js 위에서 동작하는 서버사이트 프레임워크이다. Express(기본값) Ehsms Fastify를 내부 HTTP엔진으로 사용하면서, 그 위에 구조화된 아키텍처를 얹어준다.NestJs의 특징1. TypeScript 기반처음부터 TypeScript를 1급 시민으로 지원한다.2. 모듈화 아키텍쳐기능별로 모듈을 나눠서 관리한다.3. 의존성 주입(DI)Angular와 유사한 DI 컨테이너를 내장하고 있어 객체 간 결합도를 낮춘다.4. 데코레이터 기반 문법@Controller(), @Injectable(), @Module() 같은 데코레이터로 역할을 명확히 표시한다.Npmnpm install -g @nestjs/cliNextJs는 프로젝트 생성, 모듈/컨트롤러/서비스 생성 등을 도..

[NestJs] NestJs + Swagger

2026.06.19·

Backend/NestJs

Swaager개발자가 만든 백엔드 API가 어떻게 생겼는지 한눈에 볼 수 있도록 시각적인 웹 문서(API 명세서)를 자동으로 만들어주는 도구.Npmnpm i @nestjs/swagger기본 설정main.ts 설정import { NestFactory } from '@nestjs/core';import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';import { AppModule } from './app.module';async function bootstrap() { const app = await NestFactory.create(AppModule); // Swagger 문서 옵션 설정 const config = new DocumentBui..

티스토리툴바