Dachae's DevLogs

프로토콜(Protocol) 인터넷은 어떻게 서로 다른 컴퓨터끼리 정보를 주고받을 수 있을까요? 브라우저에서 주소를 입력하면 어떻게 웹사이트가 열릴까요? 그 모든 과정의 중심에는 바로 프로토콜(Protocol)이라는 개념이 있습니다.이 글에서는 컴퓨터 네트워크에서 사용되는 프로토콜의 개념과 역할, 종류와 예시, 그리고 개발자가 꼭 알아야 할 핵심 프로토콜에 대해 쉽게 정리해보겠습니다. 1. 프로토콜(Protocol) 이란?프로토콜은 네트워크에서 데이터를 송수신하기 위한 규칙과 약속을 의미합니다. 사람이 언어를 통해 소통하듯, 컴퓨터나 장치들도 데이터를 주고받기 위해 공통된 규칙이 필요합니다.쉽게 말해, "같은 규칙으로 말하고 듣자"는 것이 프로토콜의 핵심입니다.일상 속 비유 : 전화 통화의 예전화가 울리면..

HTTP 상태 코드 웹에서 클라이언트(예: 브라우저, 앱)와 서버가 통신할 때, 서버는 요청에 대한 응답으로 HTTP 상태 코드를 함께 반환합니다. 이 상태 코드는 요청이 성공했는지, 실패했는지, 왜 실패했는지를 숫자로 요약해 알려주는 일종의 약속입니다.이 글에서는 HTTP 상태 코드의 5가지 분류, 자주 쓰이는 코드의 의미, 그리고 API 개발 시 올바른 상태 코드 사용법까지 정리해드립니다. 1. HTTP 상태 코드란?HTTP 상태 코드는 서버가 클라이언트의 요청을 어떻게 처리했는지 나타내는 3자리 숫자입니다.200 OK → 정상 처리됨404 Not Found → 요청한 리소스를 찾을 수 없음500 Internal Server Error → 서버 오류 발생상태 코드의 5가지 범..

RESTful API 웹 개발을 하다 보면 "REST API", "RESTful 설계", "HTTP 메서드" 같은 용어를 자주 접하게 됩니다. 이 글에서는 웹에서 데이터를 주고받는 표준적인 방식 중 하나인 RESTful API에 대해 자세히 알아보겠습니다. REST의 개념부터 RESTful하게 API를 설계하는 방법, 그리고 예제 코드까지 포함하여 RESTful API를 처음 접하는 개발자도 쉽게 이해할 수 있도록 설명합니다. 1. REST란 무엇인가?REST는 REpresentational State Transfer의 약자로, 2000년 로이 필딩(Roy Fielding)의 박사 논문에서 처음 소개된 웹 아키텍처 스타일입니다. 핵심은 리소스(Resource)를 URI로 표현하고, 그 리소스를 조작하는..

워터폴(Waterfall)과 애자일(Agile) 소프트웨어 개발 프로젝트를 시작할 때 가장 먼저 고려해야 할 것 중 하나는 어떤 개발 방법론을 선택할 것인가입니다. 그중에서도 가장 널리 알려진 두 가지 방식이 바로 워터폴(Waterfall)과 애자일(Agile)입니다.이 글에서는 워터폴과 애자일의 개념과 구조, 장단점, 실제 현장에서의 사용 예를 통해 두 방법론을 명확하게 비교해봅니다. 1. 워터폴(Waterfall) 모델이란?워터폴은 이름처럼 폭포처럼 단계적으로 내려가는 방식의 개발 프로세스를 의미합니다. 각 단계를 순차적으로 진행하며, 한 번 완료된 단계는 되돌아가지 않는 것을 전제로 합니다.워터폴 개발 단계요구사항 분석 → 설계 → 구현 → 테스트 → 배포 → 유지보수 각 단계는 문서화되며, 다음..

스코프(Scope) JavaScript에서 스코프(Scope)란 변수에 접근할 수 있는 범위를 말합니다. 코드를 짤 때 어떤 변수가 어디서 유효한지를 알아야 오류 없이 원하는 동작을 구현할 수 있죠. 이번 글에서는 함수, 블록, 전역 스코프 등 다양한 스코프의 개념과 var, let, const의 스코프 차이까지 예제 중심으로 정리합니다. 1. 스코프란? 스코프(Scope)는 변수에 접근할 수 있는 유효 범위를 의미합니다. 즉, "이 변수는 어디서부터 어디까지 쓸 수 있을까?"를 결정하는 규칙입니다. 2. 스코프의 종류a. 전역 스코프(Global Scope)코드 어디서든 접근 가능한 변수입니다.전역 객체(window, global)에 속합니다.var globalVar = "hello";functi..

실행 컨텍스트(Execution Context) JavaScript는 인터프리터 언어임에도 코드 실행 전 많은 준비 과정을 거칩니다. 그 핵심에는 실행 컨텍스트(Execution Context)가 있습니다. 이 글에서는 실행 컨텍스트가 무엇이고, 어떤 순서로 코드가 실행되는지, 그리고 호이스팅, 스코프, 클로저와 어떤 관계가 있는지를 명확하게 정리합니다. 1. 실행 컨텍스트란?실행 컨텍스트는 코드가 실행되는 환경(Context)을 정의하는 추상적인 개념입니다. JavaScript는 코드를 실행하기 전에 다음과 같은 준비를 합니다.어떤 변수들이 존재하는가?어떤 함수들이 선언되어 있는가?현재 어떤 객체(this)를 참조해야 하는가?이 모든 것을 관리하는 단위가 실행 컨텍스트입니다. 2. 실행 컨텍스트의 ..

호이스팅(Hoisting) JavaScript에서 var, let, const로 선언한 변수를 실행 전에 사용할 수 있을까? 결론부터 말하면,어느 정도는 가능하지만 조건이 있습니다. 이 글에서는 JavaScript의 호이스팅(Hoisting) 개념을 정리하고, 키워드별 차이점과 흔한 오류까지 실제 예제를 중심으로 설명합니다. 1. 호이스팅이란? 호이스팅(Hoisting)이란, JavaScript에서 변수, 함수 선언이 코드 실행 전에 메모리에 끌어올려지는 현상을 말합니다. 즉, 코드 순서상 나중에 등장하는 선언도, 실행 컨텍스트 생성 시점에서 이미 등록되어 있음을 의미합니다.예제console.log(x); // undefinedvar x = 5;실행되기 전에 var x; 선언이 끌어올려집니다.x = 5..

var, let, const - JavaScript 변수 선언 JavaScript에서 변수를 선언할 때 var, let, const 중 무엇을 써야 할지 헷갈리시나요? 이 세 가지는 비슷해 보이지만 스코프, 재할당, 호이스팅 등에서 중요한 차이를 가지고 있습니다. 1. var, let, const 비교표구분varletconst스코프함수 스코프블록 스코프블록 스코프재선언✅ 가능❌ 오류❌ 오류재할당✅ 가능✅ 가능❌ 불가능호이스팅✅ 됨 (초기화 안 됨)✅ 됨 (초기화 안 됨, TDZ 존재)✅ 됨 (초기화 안 됨, TDZ 존재)주 사용 시기과거 코드 유지보수용일반 변수 선언상수나 객체 참조 고정a. var (과거의 변수 선언 방식)function test() { if (true) { var x = 1..

TypeScript JavaScript는 웹 개발의 표준 언어입니다. 그러나 복잡한 애플리케이션이 늘어날수록 예상치 못한 버그와 유지보수 어려움이 따라옵니다. 이를 해결하기 위해 등장한 언어가 TypeScript입니다.이번 글에서는 TypeScript의 핵심 개념과 함께, JavaScript와 무엇이 다른지 비교해보겠습니다. 1. TypeScript란?TypeScript는 JavaScript에 정적 타입(static type)을 추가한 언어입니다. Microsoft에서 개발했으며, JavaScript의 상위 집합(Superset)으로 설계되어 기존 JS 코드를 그대로 사용할 수 있습니다.핵심 특징정적 타입 지원 : 컴파일 타임에 타입 오류 탐지ES6+ 문법 지원 : 최신 JS 문법 그대로 사용 가능강력..

검색 엔진 최적화 (SEO) SEO는 더 이상 마케터만의 영역이 아닙니다. SPA(싱글 페이지 애플리케이션), 정적 사이트, 서버 사이드 렌더링 등 다양한 기술이 사용되는 현대 웹에서는 개발자의 코드 설계가 SEO에 직접적인 영향을 미칩니다.이 글에서는 웹 개발자가 직접 고려하고 구현할 수 있는 기술 중심의 SEO 전략을 소개합니다. 1. SEO란 무엇인가? SEO(Search Engine Optimization)는 검색엔진(주로 Google, Bing 등)이 웹사이트를 더 잘 이해하고, 검색 결과 상단에 노출되도록 만드는 모든 기술적·콘텐츠적 작업입니다. 2. 개발자가 알아야 할 SEO 핵심 영역a. HTML 마크업 구조화 (Semantic HTML)검색엔진은 HTML을 통해 페이지 구조를 파악합..

localStorage, sessionStorage, Cookie 웹 페이지에서 데이터를 저장해야 할 때 localStorage, sessionStorage, cookie 중 무엇을 선택해야 할지 고민되시나요? 이 세 가지는 저장 위치는 같지만, 수명, 용량, 사용 목적이 다릅니다.이번 글에서는 각각의 차이점과 특징, 언제 어떤 걸 써야 하는지 실전 예제와 함께 정리합니다. 1. localStorage, sessionStorage, Cookie 비교 항목 localStorage sessionStorage Cookie 저장 위치브라우저브라우저브라우저수명브라우저에 영구 저장 (명시적 삭제 전까지)브라우저 탭을 닫을 때까지만료 시간 설정 가능용량 제한약 5~10MB약 5~10MB약 4KB서버 전송❌ 전송..

OpenID Connect (OIDC) OAuth는 인가(Authorization)를 위한 프로토콜이지, 사용자의 신원 확인(로그인) 기능은 없었습니다. 그 공백을 채우기 위해 등장한 것이 바로 OpenID Connect (OIDC)입니다.이 글에서는 OIDC가 어떤 배경에서 나왔고, OAuth와 어떤 관계인지, 실제로 어떤 정보를 제공하는지 정리합니다. 1. OpenID Connect란?OpenID Connect (OIDC)는 OAuth 2.0 위에 구축된 인증(Authentication) 프로토콜입니다.OIDC는 사용자의 신원을 확인하고, 그 정보를 표준화된 방식으로 전달해주는 역할을 합니다.OAuth는 접근 권한을 다루는 반면, OIDC는 누가 로그인했는지를 알려줍니다. 2. OIDC가 OAut..

OAuth (Open Authorization) “구글 로그인은 OAuth 기술로 구현되니까, OAuth는 로그인 인증 프로토콜이다?” 많은 개발자들이 이렇게 오해합니다.하지만 진실은 조금 다릅니다. OAuth는 로그인(Authentication) 기술이 아닙니다. OAuth는 인증(Authentication) 기술이 아니라 인가(Authorization) 프로토콜입니다.이번 글에서는 OAuth와 인증의 차이, 그리고 이를 보완하는 OpenID Connect (OIDC)에 대해 알아보겠습니다. 1.  OAuth는 인증 기술이 아니다?OAuth는 본질적으로 권한 위임(Authorization)을 위한 프로토콜입니다. 즉, 제3의 애플리케이션(클라이언트)이 사용자의 자원에 제한된 권한으로 접근할 수 있도록 ..

OAuth (Open Authorization) 현대 웹서비스에서 흔히 볼 수 있는 Google로 로그인, Kakao로 시작하기 같은 기능은 어떻게 작동할까요? 바로 이럴 때 사용하는 기술이 OAuth(Open Authorization)입니다. 이 글에서는 OAuth가 무엇인지, 왜 필요하며, 어떻게 동작하는지를 쉽고 명확하게 설명합니다. OAuth는 현재 대부분 OAuth 2.0 버전을 의미하며, 이 글에서도 OAuth 2.0 기준으로 설명합니다. 1. OAuth란?OAuth는 Open Authorization의 약자로, 타사 애플리케이션이 사용자의 비밀번호를 알지 않고도 자원에 접근할 수 있게 해주는 권한 위임 프로토콜입니다.예를 들어 어떤 웹사이트가 사용자의 구글 드라이브에서 파일을 가져오고 싶어..

이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing) 웹 페이지에서 클릭 이벤트를 처리할 때, 이벤트가 의도한 대로 작동하지 않아서 당황한 적 있으신가요? 이벤트 버블링과 캡처링은 DOM 트리 구조를 따라 이벤트가 전파되는 방식입니다. 이를 제대로 이해하면 이벤트 위임, 중첩 요소 처리, 성능 최적화 등 다양한 상황에서 스마트하게 코드를 작성할 수 있습니다. 1. 이벤트 흐름이란?브라우저는 DOM 요소에 이벤트가 발생하면 세 가지 단계로 이벤트를 처리합니다.캡처링 단계 (Capturing Phase)이벤트가 최상위 요소(document)에서 시작하여 이벤트가 발생한 실제 요소(target)까지 내려옵니다.타깃 단계 (Target Phase)이벤트가 실제로 발생한 요소..