분류 전체보기 (122) 썸네일형 리스트형 JavaScript this 바인딩 이해하기 핵심 개념JavaScript에서 this는 함수가 어떻게 호출되느냐에 따라 결정됩니다. 함수를 작성할 때가 아니라, 실행될 때 결정된다는 게 핵심입니다.1. 기본 바인딩 (Default Binding)함수를 그냥 호출하면 this는 undefined가 됩니다 (strict mode/모듈 환경).function sayName() { console.log(this.name);}sayName(); // TypeError: Cannot read properties of undefined2. 암시적 바인딩 (Implicit Binding)객체의 메서드로 호출하면 this는 .앞의 객체를 가리킵니다.const person = { name: '철수', sayName: function() { console... JavaScript 이벤트 루프: Task Queue vs Microtask Queue JavaScript는 싱글 스레드 언어입니다.그런데 어떻게 비동기 작업을 처리할 수 있을까요?**이벤트 루프(Event Loop)**를 사용할 수 있습니다.이벤트 루프란?이벤트 루프는 JavaScript 엔진이 비동기 작업을 처리하는 메커니즘입니다. 코드 실행을 관리하고, 대기 중인 작업들을 순서대로 처리합니다.핵심 구성 요소┌─────────────┐│ Call Stack │ ← 현재 실행 중인 코드└─────────────┘ ↓┌─────────────────┐│ Microtask Queue │ ← Promise, queueMicrotask (우선순위 높음)└─────────────────┘ ↓┌─────────────────┐│ Task Queue │ ← setTim.. TypeScript 인터페이스 확장: Declaration Merging과 Module Augmentation Next.js에서 NextAuth를 사용하여 인증 시스템을 구축하던 중, 다음과 같은 TypeScript 에러를 만났습니다.async session({ session, token }) { if (session.user) { session.user.id = token.id as string; // ❌ 에러! // Property 'id' does not exist on type } return session;}session.user에 id 속성을 추가하려고 했지만, TypeScript는 이 속성이 존재하지 않는다고 불평합니다. NextAuth의 기본 타입에는 name, email, image만 있고 id가 없기 때문이죠.이 문제를 해결하면서 TypeScript의 .. Sequelize vs Prisma: Node.js ORM 비교 분석 Node.js 생태계에서 가장 많이 사용되는 두 ORM인 Sequelize와 Prisma를 비교합니다. 두 도구는 근본적으로 다른 철학과 접근 방식을 가지고 있습니다.핵심 요약Sequelize: 모델 클래스를 직접 작성 (Active Record 패턴)Prisma: Schema 파일만 작성 → 코드 자동 생성 (Schema-first 접근)Trade-off: - Prisma: 자동화, 타입 안전성 우선- Sequelize: 유연성, 레거시 지원, 큰 커뮤니티Sequelize의 모델 정의 방식Sequelize는 Laravel의 Eloquent처럼 모델 클래스를 직접 작성하는 방식입니다.파일 구조project/├── models/│ ├── User.js│ ├── Post.js│ └── Catego.. Prisma로 Next.js 블로그 만들기: 데이터베이스 설정부터 마이그레이션까지 PostgreSQL과 Next.js로 블로그를 만들면서 Prisma ORM을 처음 도입하게 되었습니다. MySQL을 주로 사용하던 입장에서 새로운 도구를 배우는 과정에서 겪은 시행착오와 해결 방법을 공유합니다.Prisma가 뭔가요?Prisma는 Node.js와 TypeScript를 위한 차세대 ORM(Object-Relational Mapping) 도구입니다. 기존의 SQL 쿼리를 직접 작성하는 방식에서 벗어나, 타입 안전성을 보장하면서도 직관적인 방식으로 데이터베이스를 다룰 수 있게 해줍니다.왜 Prisma를 선택했나?기존에 Laravel의 Eloquent ORM과 비슷하지만, TypeScript 지원이 훨씬 뛰어납니다:타입 안전성: 데이터베이스 스키마에서 자동으로 TypeScript 타입 생성직관적인.. 웹 빌드 도구 비교: Webpack vs Vite vs Rollup 그리고 etc 모던 웹 개발에서 빌드 도구는 필수적입니다. 수많은 JavaScript 파일과 CSS, 이미지 등의 에셋을 최적화하고 번들링하여 브라우저가 효율적으로 로드할 수 있도록 만들어주죠. 하지만 선택지가 너무 많아서 어떤 도구를 써야 할지 고민되시나요? 이 글에서 주요 빌드 도구들을 비교하고, 여러분의 프로젝트에 가장 적합한 도구를 찾는 방법을 알려드리겠습니다.1. Webpack - 검증된 강자특징Webpack은 2012년부터 시작된 가장 성숙한 번들러입니다. 모든 것을 모듈로 취급하며, JavaScript뿐만 아니라 CSS, 이미지, 폰트 등 모든 에셋을 번들링할 수 있습니다.장점강력한 생태계: 수천 개의 플러그인과 로더 보유높은 커스터마이징: 복잡한 요구사항도 세밀하게 설정 가능코드 스플리팅: 동적 impo.. SSH 키 인증으로 비밀번호 없이 안전하게 서버 접속하기 들어가며서버 간 자동화 작업을 하다 보면 가장 먼저 마주치는 문제가 있습니다."스크립트에 비밀번호를 넣어야 하나?"# 이렇게 하면 안전할까요? ❌sshpass -p "password123" ssh user@server "command"답은 **"절대 아니요"**입니다.SSH 키 기반 인증을 사용하면 비밀번호 노출 없이 안전하게 자동화할 수 있습니다. 설정도 단 1분이면 충분합니다.SSH 키 인증이란?비밀번호 방식 (기존)클라이언트: "접속하고 싶어요. 비밀번호는 1234입니다"서버: "비밀번호 확인했습니다. 들어오세요"문제점:비밀번호가 네트워크로 전송됨스크립트에 평문으로 저장해야 함비밀번호 유출 위험무차별 대입 공격(brute force)에 취약SSH 키 방식 (권장)클라이언트: "접속하고 싶어요. 제 .. Vite: 차세대 프론트엔드 개발 도구 Vite란 무엇인가?Vite(프랑스어로 "빠르다"는 뜻)는 Evan You(Vue.js 창시자)가 만든 차세대 프론트엔드 빌드 도구입니다. 기존의 Webpack이나 Parcel 같은 번들러들이 가진 느린 개발 서버 시작 속도와 느린 HMR(Hot Module Replacement) 문제를 해결하기 위해 탄생했습니다.왜 Vite가 필요할까?기존 번들러 기반 개발 환경의 문제점을 이해하면 Vite의 필요성이 명확해집니다.전통적인 번들러의 한계느린 서버 구동: 프로젝트가 커질수록 개발 서버를 시작하는 데 수 분이 걸리기도 함느린 업데이트: 파일 하나를 수정해도 전체 번들을 다시 빌드해야 하는 경우가 많음비효율적인 리소스 사용: 필요하지 않은 모듈까지 번들링하여 메모리 낭비Vite의 핵심 원리1. ESM(ES .. 이전 1 2 3 4 ··· 16 다음
