나아지는 중입니다.

Fetch API는 자바스크립트에서 HTTP 요청(Request) 과 응답(Response) 을 다루기 위한 표준 인터페이스입니다.예전에는 XMLHttpRequest(XHR)를 많이 썼고, 그 위에서 jQuery 같은 라이브러리가 편의 기능을 제공했지만, 현재는 브라우저에서 fetch() 하나로 비동기 통신을 깔끔하게 처리하는 방식이 일반적입니다. Fetch API가 다루는 것: Request / Response / Headers HTTP 통신은 기본적으로 아래 세 가지가 핵심입니다.Request(요청): “어떤 주소로, 어떤 방식(GET/POST 등)으로, 어떤 데이터를 보낼지”Response(응답): “서버가 돌려준 결과(상태 코드, 헤더, 본문 데이터 등)”Headers(헤더): “데이터 형식(Co..

async는 “이 함수는 비동기 함수다”라고 표시하는 키워드입니다핵심 규칙async가 붙은 함수는 항상 Promise를 반환합니다.함수 안에서 return 값을 해도, 실제로는 Promise.resolve(값) 형태로 감싸져서 나갑니다.예시:async function f() { return 10;}f().then(v => console.log(v)); // 10겉으로는 10을 리턴했지만, 실제 반환 타입은 Promise입니다. await는 “Promise가 끝날 때까지 기다렸다가 결과를 꺼내는 키워드”입니다핵심 규칙await는 Promise 앞에만 붙일 수 있습니다.await somePromise는Promise가 성공하면: 그 resolve 값을 반환Promise가 실패하면: 그 즉시 에러를 던짐(th..

promise 체인(then().then()...)은 “단계를 순서대로 이어 붙인다”는 점에서 매우 유용합니다.하지만 단계가 늘어나면, 코드를 읽을 때 계속 .then(...)을 따라가야 해서 흐름이 끊기는 느낌이 들 수 있습니다.이럴 때 async/await를 쓰면 비동기 흐름을 동기 코드처럼 위에서 아래로 읽을 수 있게 만들 수 있습니다. 먼저 개념: async/await는 Promise를 “기다렸다가 결과를 변수에 담는 문법”이다핵심만 잡으면 이것 한 줄입니다.await는 Promise가 끝날 때까지 기다린 뒤 그 결과를 반환합니다.await는 Promise에만 붙일 수 있습니다.에러 처리는 try/catch로 합니다. (Promise의 .catch()와 같은 역할)즉:Promise 체인: then..

비동기 코드를 처음 접하면 Promise, then, resolve, reject가 한꺼번에 등장해서 흐름이 헷갈릴 수 있습니다.그런데 Promise를 “시간이 걸리는 작업의 결과를 나중에 받는 규칙”이라고만 잡아두면, 복잡해 보이던 코드도 한 단계씩 읽히기 시작합니다.이번 글에서는 “전화 연결 상태”를 예로 들어, Promise 체인(then 체인) 으로 상태를 순차적으로 바꾸는 흐름을 정리합니다.001: 전화 연결 시작002: 통화중003: 통화 종료 전체 코드아래 코드는 세 단계 흐름을 Promise 체인으로 연결한 예제입니다.// 1) 1초 뒤 "전화 연결 시작(001)"을 반환하는 비동기 작업const callStart = () => { return new Promise((resolve, re..

자바스크립트를 처음 공부할 때 가장 당황스러운 순간 중 하나가 Promise, then, resolve, reject 같은 단어를 만나는 순간입니다.겉보기엔 “1초 뒤에 console.log 찍는 코드”인데, 왜 이렇게 구조가 복잡해 보일까요? 목표: 이 코드가 정확히 뭘 하는지let callStart = new Promise((resolve, reject) => { setTimeout(() => { resolve("1초후 실행됨"); }, 1000);});callStart.then((message) => { console.log(message);});이 코드는 한 줄로 요약하면:“1초를 기다린 뒤”“Promise를 성공 상태로 끝내고”“그 성공 결과로 받은 "1초후 실행됨"을 콘솔에 출력한..

개발 환경에서 쓰는 React dev server는 “개발 편의”가 목적이고,운영 환경에서 쓰는 Nginx는 “배포/운영 안정성”이 목적입니다.그래서 운영에서는 보통 Nginx(또는 Caddy)를 앞단에 두고, 프론트/백엔드를 한 도메인으로 묶습니다. 개발 환경에서의 구조(로컬 개발)예: CoffeeNote 개발 중프론트(React dev server): http://localhost:5173백엔드(Spring Boot): http://localhost:8080개발 서버의 특징은 다음과 같습니다.코드 변경 시 즉시 반영(HMR)디버깅(소스맵) 친화적빠르게 개발하기 위한 설정(개발용 프록시 등)즉, “잘 운영하기”보다 “빨리 개발하기”에 최적화되어 있습니다. 운영 환경에서의 구조(Nginx 앞단)운영에서는..

들어가며웹 개발을 하다 보면 “배포했습니다”라는 말이 단순히 서버에 올리는 것처럼 들릴 때가 많습니다.하지만 실무에서 배포는 보통 빌드(산출물 생성) 과 실행(서빙/요청 처리) 을 분리해서 관리합니다. Docker와 컨테이너는 무엇인가Docker는 애플리케이션을 “환경까지 묶어서” 실행하기 위한 도구입니다. 여기서 핵심은 컨테이너(Container) 입니다.컨테이너는 가상머신과 다릅니다컨테이너는 보통 다음처럼 이해하는 것이 정확합니다.가상머신(VM): 운영체제까지 통째로 가상화합니다. 무겁고 분리도가 큽니다.컨테이너: 운영체제는 공유하고, 프로세스/파일시스템/네트워크를 격리해서 실행합니다. 가볍고 빠릅니다.즉, 컨테이너는 “서버 한 대 위에서 여러 서비스를 서로 간섭 없이 돌리기 위한 실행 단위”로 많이..

구글 로그인을 붙이다 보면 “Redirect URI가 맞지 않다”, “HTTPS가 아니면 차단된다” 같은 문제를 자주 만나게 됩니다.이 글에서는 OAuth 2.0의 대표 흐름인 Authorization Code Flow를 기준으로, 왜 Redirect URI가 보안상 필수인지, 그리고 왜 HTTPS가 사실상 강제되는지를 단계별로 정리합니다. OAuth는 무엇을 해결하려는 방식인가OAuth는 한 문장으로 정리하면 다음과 같습니다.내 서비스가 비밀번호를 직접 받지 않고도구글(또는 카카오/네이버 등)에게 “이 사용자가 누구인지 확인”을 맡기고로그인/동의가 끝나면 결과를 내 서비스로 안전하게 되돌려 받는 방식입니다.즉, 사용자는 로그인 과정에서 구글 페이지로 이동하고, 완료 후 다시 내 서비스로 돌아옵니다.이 ..

웹 서비스를 운영할 때 가장 흔한 구조는 브라우저가 백엔드(Spring)로 바로 붙는 구조가 아니라, 그 앞에 Nginx/Caddy 같은 웹서버(리버스 프록시) 를 두는 구조입니다. 웹서버(Web Server)란 무엇인가웹서버는 기본적으로 HTTP 요청을 받아서 응답을 내려주는 서버입니다. 대표적으로 Nginx, Apache, Caddy가 있습니다.웹서버의 대표 역할은 크게 두 가지입니다.(1) 정적 파일(Static) 제공입니다정적 파일이란 그대로 내려주기만 하면 되는 파일입니다.HTML, CSS, JS이미지(PNG/JPG), 폰트React/Vue 빌드 결과물(예: index.html, assets/*.js)즉, “프론트엔드 앱을 배포한다”는 말은 보통프론트 빌드 결과물(정적 파일)을 웹서버가 제공한..

웹 개발을 하다 보면 “요청이 서버에 간다”는 말을 정말 많이 듣습니다.그런데 실제로는 요청이 서버에 도착하기까지 DNS, HTTPS, 연결 과정 등 여러 단계가 있습니다.이 글에서는 주소창에 도메인을 입력했을 때 벌어지는 과정을 DNS → HTTP/HTTPS → 브라우저 요청/응답 흐름 순서로 정리합니다. DNS: 도메인을 IP로 바꾸는 이유사람은 naver.com 같은 도메인을 기억하지만, 컴퓨터는 IP 주소로 통신합니다.그래서 브라우저가 서버에 접속하려면 먼저 “이 도메인의 IP가 뭔지” 알아야 합니다. 이 역할을 하는 것이 DNS(Domain Name System) 입니다.예를 들어,naver.com → 125.209.222.141DNS 조회는 보통 다음 순서로 진행됩니다.브라우저/OS 캐시 확인..