.d.ts 타입 정의 파일?.d.ts 파일은 TypeScript에서 "Declaration File"로 불리며, JavaScript 라이브러리나 기존 코드의 타입 정보를 정의하기 위한 파일이다. 이 파일들은 실제 코드 구현을 포함하지 않고, 오직 타입 선언만 제공하여 TypeScript 컴파일러가 해당 라이브러리나 모듈의 구조와 인터페이스를 이해할 수 있게 도와준다. 이를 통해 타입 안전성을 확보하고, 자동 완성 및 타입 검사를 강화할 수 있다. .d.ts 파일의 역할타입 선언 제공:JavaScript 라이브러리나 기존 코드에 대해 함수, 변수, 클래스, 인터페이스 등의 타입 정보를 명시타입 안전성 강화:TypeScript 컴파일러는 .d.ts 파일을 참조하여 타입 검사를 수행하므로, 타입 관련 오류를 ..

TypeScript란TypeScript는 Microsoft에서 개발한 오픈 소스 프로그래밍 언어로, JavaScript의 superset이다.TypeScript는 정적 타입 시스템을 도입하여 코드 작성 시 타입 오류를 미리 확인할 수 있으며, 최종적으로 순수 JavaScript로 트랜스파일되어 실행된다.이 과정은 JavaScript의 동적 타입 특성을 보완하면서, 개발자가 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있도록 도와준다. TypeScript의 동작 원리컴파일(트랜스파일) 과정TypeScript 코드는 TypeScript 컴파일러(tsc)를 통해 JavaScript 코드로 변환됩니다. 컴파일 단계에서 정적 타입 검사를 수행하여, 타입 불일치나 문법 오류를 미리 잡아낸다.정적 분석: 코드 작..

1. MVC 패턴 개요MVC 패턴은 애플리케이션을 세 가지 주요 구성 요소로 분리하여 개발하는 아키텍처 패턴이다.많이들 들어봤을 법한 이 방식은 각 구성 요소가 서로 다른 역할을 담당함으로써 코드의 모듈성, 유지보수성, 확장성을 높이는 것인데 이에 대해 좀 더 자세히 알아보자. 2. 각 구성 요소의 역할Model애플리케이션의 데이터 및 비즈니스 로직을 담당한다.데이터베이스와의 연동, 데이터 저장, 처리 및 검증을 수행하며, 애플리케이션 상태를 관리한다.View사용자에게 정보를 제공하고, 인터페이스(UI)를 구성하는 역할을 한다.Model에서 제공하는 데이터를 기반으로 사용자에게 시각적으로 표현되며, 사용자의 입력(예: 버튼 클릭, 폼 입력)을 Controller에 전달한다.ControllerModel과 ..

OAuth란OAuth는 "Open Authorization"의 약자로,써드파티 애플리케이션이 사용자의 비밀번호 없이 제한된 자원에 접근할 수 있도록 허용하는 표준 프로토콜을 말함OAuth의 정의사용자가 자신의 자격 증명을 직접 제공하지 않고도, 외부 애플리케이션에 자신의 데이터(예: 이메일, 연락처 등)에 접근할 권한을 부여할 수 있도록 설계된 인증/인가 프로토콜OAuth의 사용 이유보안 강화: 사용자의 실제 비밀번호를 공유하지 않고도 애플리케이션이 필요한 데이터에 접근할 수 있어 보안 위협 감소접근 권한의 세분화: 사용자는 어떤 데이터에 접근할지 세밀하게 제어할 수 있고, 필요 시 권한 취소 가능사용자 편의성: 여러 서비스에서 하나의 계정으로 인증할 수 있어 로그인 과정이 단순화위와 같은 이유로 OAu..

RESTful API의 개념과 주요 제약 조건RESTful API의 개념REST(Representational State Transfer)는 네트워크 기반 애플리케이션을 설계하기 위한 아키텍처 스타일로, HTTP 프로토콜의 장점을 활용하여 자원(Resource)을 표준화된 방식으로 관리합니다. RESTful API는 REST 원칙을 준수하는 API로, 다음과 같은 특징을 가집니다:자원(Resource) 중심: 모든 데이터나 서비스는 URI(Uniform Resource Identifier)로 식별됩니다.HTTP 메서드 활용: GET, POST, PUT, DELETE 등을 통해 CRUD(Create, Read, Update, Delete) 연산을 수행합니다.표현(Representation): JSON, X..

1. 개요JWT(JSON Web Token)는 서버가 사용자를 인증한 후 클라이언트에게 토큰을 발급하여, 클라이언트가 이후 요청 시 토큰을 포함시켜 인증 상태를 유지하도록 하는 방식이다. React와 같은 SPA(Single Page Application)에서는 이 토큰을 활용해 사용자의 로그인/로그아웃 상태를 관리할 수 있다.JWT의 기본 개념, React 내에서의 인증 상태 관리, 그리고 로그아웃 구현 로직에 대해 알아보자. 2. JWT 인증 흐름로그인 과정사용자가 로그인 폼에 자격 증명을 입력하면, 백엔드 서버는 해당 정보를 검증인증에 성공하면 서버는 사용자의 정보를 포함한 JWT를 생성하여 클라이언트에 전달클라이언트는 이 토큰을 안전한 저장소(예: localStorage, sessionStorag..

세션 기반 인증과 토큰 기반 인증1. 세션 기반 인증 (Session-Based Authentication)동작 방식사용자 로그인 시 서버는 세션 ID를 생성해 클라이언트(브라우저) 쿠키에 저장합니다.이후 클라이언트 요청 시 세션 ID를 서버로 전송하며, 서버는 세션 저장소(DB, Redis 등)에서 해당 ID를 검증합니다.특징상태 유지 (Stateful): 서버에 세션 정보를 저장해야 합니다.보안: CSRF 공격에 취약하지만, 쿠키 옵션(HttpOnly, Secure)으로 보완 가능합니다.확장성: 서버 확장 시 세션 저장소를 공유해야 합니다.적합한 상황 예시소규모 애플리케이션: 단일 서버 환경에서 간편하게 구현 가능합니다.실시간 로그아웃 필요 시: 세션 삭제로 즉시 접근을 차단할 수 있습니다.(예: 금..

Next.js란?React 라이브러리의 프레임워크.React를 사용하면 되는데 왜 또 Next.js를?Next.js를 사용하는 가장 큰 이유는 바로 SSR(Server Side Rendering)때문이다.물론 React에서도 SSR 구현이 가능은 하지만 굉장히 복잡한 일인데, Next.js는 이 SSR을 보다 쉽게 구현할 수 있도록 도와준다.왜 SSR이 필요한가?가장 중요한 필요성은 SEO(검색 엔진 최적화)이다.이전 포스트에서도 설명했듯 CSR은 최초에 빈 HTML문서를 서버에서 응답해주므로 검색엔진에 콘텐츠가 노출되기 어렵다.그러나 Next.js의 SSR은 최초 원하는만큼 렌더링된 HTML을 응답하고 이후에 부족한 부분을 다시 렌더링할 수 있고 이에 SSG방식까지 생성가능하므로 상대적으로 큰 이점이 ..