새로고침 없는 웹, Fetch(AJAX)

인터넷 초창기 웹페이지는 단순했습니다. 버튼을 클릭하거나 폼을 입력하면, 브라우져는 페이지 전체를 새로 불러와 다음 화면을 보여줍니다. 로그인이나 댓글을 작성 할 때마다 화면이 깜박이던 시절이었죠.오늘날 웹서비스는 다릅니다. 메신저, 지도, 쇼핑몰, 은행 앱까지.화면을 깜박이지 않고도 매끄럽게 데이터가 오고 가는데요. 이런 경험을 가능케 만든 핵심 기술이 바로 AJAX(Asynchronous JavaScript and XML)입니다. 폼 요청폼(form) 태그를 통한 전통적인 데이터 전송 방식을 생각해 볼까요.사용자가 값을 입력하고 제출 버튼을 누르면브라우져는 페이지 전체를 지우고 새로운 요청을 보냅니다.서버가 응답을 보내면 브라우져는 다시 전체 페이지를 그립니다. 이 방식은 단순하지만 그만큼 느립니다. 작은 동작 하나에도 전체 화면을 갈아엎는 구조이기 때문이에요. AJAX의 등장화면은 그대로 두고 데이터만 주고 받을 수 있다면 어떨까요? 필요한 부분만 바꾸어 훨씬 매끄러운 사용감을 제공할 수 있을 겁니다.이런 방식을 가능하게 해주는 것이 바로 AJAX입니다.Asynchronous: 페이지 전체를 동시에 요청하지 않고, 데이터만 비동기로 주고 받습니다.JavaScript: HTML form 대신 자바스크립트 코드로 네트워크 요청을 보냅니다.XML: 초창기에는 데이터를 XML로 주고 받았지만, 지금은 가벼운 JSON이 거의 표준입니다. AJAX를 구현한 첫 인터페이스는 XMLHttpRequest(XHR) 객체였습니다.오래된 방식이지만 여전히 많은 브라우져에서 동작합니다.콜백 기반 인터페이스라 다루기 번거롭지만, 과거에는 이것이 표준이었습니다. 시간이 지나면서 Fetch API가 등장합니다.fetch() 함수 하나로 간단히 네트워크 요청을 만들 수 있습니다.프로미스(Promise) 기반이라 비동기 로직을 깔금하게 작성할 수 있습니다.거의 모든 브라우져가 지원합니다. 특별히 구형 브라우져를 신경 쓰지 않는 다면, fetch 하나만으로도 충분합니다. 데이터 형식AJAX 요청은 단순히 "보냈다, 받았다"에서 그치지 않습니다. 어떤 형식으로 데이터를 주고 받느냐도 중요합니다.폼 데이터(FormData, urlencoded): HTML form과 유사한 방식으로, 로그인이나 간단한 값을 전달할 때 적합합니다.JSON: 구조화된 데이터를 교환할 때 널리 쓰입니다. 읽고 쓰기 쉽고, 자바스크립트 객체와 호환성이 높아 표준처럼 사용합니다.Blob, ArrayBuffer: 이미지, 영상 같은 대용량 바이너리를 전송할 때 사용합니다. 응답(Response) 다루기요청을 받은 서버는 응답(Response)을 보내는데요, fetch는 응답을 프라미스로 감싸서 반환합니다.status, ok: 응답이 성공했는지를 나타내는 숫자 혹은 불리언 값headers: 응답 헤더를 담은 객체text(), json(), blob(): 응답 본문을 다양한 형식으로 읽기 위한 함수 예를 들어, 로그인 API 서버가 JSON을 응답하면, 프론트엔드에서는 json() 함수를 통해 자바스크립트 객체로 변환해 사용할 수 있습니다.const jsonData = await response.json(); jsonData // { authenticated: true }이 과정을 통해 화면 일부만 바꾸거나, 사용자에게 알림을 띄우는 식으로 유연한 인터랙션을 만들 수 있습니다. AJAX가 바꾼 웹생각해보면, 우리가 매일 쓰는 웹 서비스의 매끄러움은 대부분 AJAX 덕분입니다.SNS에서 좋아요를 눌러도 화면이 리프레시되지 않는 것지도를 드래그할 때 매끄럽게 새로운 영역이 나타나는 것쇼핑몰 장바구니가 즉시 업데이트되는 것 모두 AJAX와 Fetch API가 만들어낸 새로고침 없는 웹의 풍경입니다. 결론HTTP는 단순히 "요청과 응답" 으로만 설계된 프로토콜이었습니다. 하지만 AJAX가 등장하면서 웹은 앱(APP)처럼 반응성이 좋아지게 됩니다. 웹이 이렇게 변화한 배경과 더불어 아래 주제들을 먼저 익혀 두신다면, 훨씬 폭 넓은 문제 해결 역량을 갖추실 수 있을 겁니다.폼 요청과 AJAX의 차이Fetch API의 기본 사용법다양한 데이터 형식 (JSON, FormData 등)응답 처리 (Response 객체) 더 깊게 이해하고 싶으시다면 제가 준비한 강의 「웹 개발의 핵심, HTTP 완벽 가이드」 3편을 참고해 보세요. 한 단계 성장한 개발자로 나아가는 좋은 출발점이 될 것입니다.이 강의에서 다루는 내용1편. HTTP 기본2편. 브라우져3편. AJAX4편. 추가 프로토콜5편. 보안6편. 성능

웹이 우리를 기억하는 방법, 쿠키

웹사이트는 생각보다 우리를 잘 기억합니다. 어제 장바구니에 담아둔 상품이 그대로 남아 있거나, 며칠 전 로그인했던 상태가 여전히 유지되는 것을 경험해 보셨을 거에요. 하지만 원래 인터넷을 이루는 HTTP는 이런 기억력이 없습니다. 무상태(stateless), "기억하지 못하는" 특성을 지니고 있기 때문이에요. HTTP의 무상태성클라이언트가 서버에 요청을 보낸 뒤에 다시 요청을 보내도, 서버는 같은 사용자인지 전혀 알 수 없습니다. 요청 메시지 안에 클라이언를 식별할 정보가 없으니까요.무상태성 덕분에 서버는 비교적 단순하게 동작할 수 있고, 여러 대의 서버로 쉽게 확장할 수 있습니다. 요청 하나하나가 독립적이므로 어느 서버가 응답하든 상관없기 때문이죠.하지만 현실의 웹 애플리케이션은 사용자를 기억해야 할 필요가 많습니다."다시 방문한 사용자"를 식별해야 하고,로그인 상태를 유지해야 하며,사용자가 담아둔 장바구니 물건도 알고 있어야합니다. 여기서 탄생한 것이 바로 쿠키(cookie)입니다. 탄생 배경쿠키라는 개념은 1990년대 초반, 온라인 쇼핑 카트 기능을 구현하기 위해 고안되었습니다. 당시 네스케이스 개발자가 제안한 방식이 그 시초입니다. 사이트 재 방문 확인 기능이 이를 활용한 첫 사례라고 합니다.재밌는 점은 유닉스 세계에 이미 비슷한 개념이 있었다는 것입니다. 특정한 값을 건네주고 나중에 돌려받는 방식이었는데, 이를 매직 쿠키(magic cookie)라고 불렀습니다. 마치 놀이공원 입구에서 손목에 도장을 찍어주는 것과 같죠. 기본 동작핵심은 단순합니다. 서버와 브라우져가 상태를 주고 받을 수 있도록 HTTP 헤더를 활용하는 것입니다.서버 응답: 서버는 브라우져에게 특정 값을 기억하라고 응답 헤더를 통해 지시합니다. (일종의 도장)브라우져 저장: 브라우져는 이를 쿠키 저장소에 기록합니다. (도장을 손목에 찍음)브라우져 요청: 이후 자동으로 쿠키를 요청 헤더에 실어 보냅니다. (재입장할 때 도장을 보여줌)서버는 이 값을 확인하고 "다시 방문한 사용자"라고 판단할 수 있습니다. 속성쿠키는 단순한 문자열 이상의 기능을 제공합니다.Domain: 어떤 도메인에 이 쿠키를 보낼지 제한합니다. (예: example.com에 설정된 쿠키를 sub.example.com에서도 쓸 수 있음)Path: 특정 경로에서만 쿠키가 전송되도록 제한합니다. (예: /shop에 설정된 쿠키를 /blog 요청에는 미설정 할 수 있음)Max-Age / Expires: 쿠키의 수명을 정합니다. 세션 쿠키(브라우져 종료 시 삭제)와 영속 쿠키(일정 기간 유지)로 나뉘게 되죠.Secure: HTTPS 요청에만 쿠키를 전송하도록 제한합니다. (암호화되지 않은 HTTP에서 숨기기 위한 안전장치)HttpOnly: 자바스크립트 코드에서 쿠키를 읽지 못하게 합니다. (크로스사이트 스크립트(XSS) 공격으로부터 세션 쿠키를 보호)이러한 속성 덕분에 쿠키는 단순한 "메모장"을 넘어 범위, 유효기간, 보안 등을 정밀하게 제어할 수 있답니다. 활용 사례우리는 웹에서는 쿠키를 매우 다양한 방식으로 사용할 수 있습니다.로그인 세션 유지: 사용자가 아이디와 비밀번호로 로그인하면, 서버는 세션을 만들고 세션 ID를 쿠키로 응답합니다. 이후 요청마다 이 세션 ID가 서버로 함께 전송되어 로그인 상태를 유지할 수 있습니다.개인화된 서비스: 사용자가 선호하는 언어, 최근 본 상품 목록 등을 쿠키에 기록해 두고, 다음 방문 때 동일한 환경을 제공할 수 있습니다.광고 트래킹: 광고 네트워크는 쿠키를 활용해 사용자의 웹 활동을 추적하고 맞춤형 광고를 제공합니다. 한계와 대안물론 단점도 있습니다.용량이 제한적입니다. (보통 하나의 쿠키는 4KB, 도메인별 20개 정도 제한)매 요청마다 자동으로 전송되므로 네트워크 트래픽이 늘어납니다.보안에 민감한 값은 쿠키에 저장하지 않아야 합니다. (예: 개인정보)쿠키 대안으로 세션 스토리지, 로컬 스토리지, 토큰 기반 인증(JWT) 등이 사용됩니다. 하지만 여전히 "서버와 클라이언트 간의 신뢰할 수 있는 연결 고리"로써 쿠키는 가장 클래식하고 널리 쓰이는 방식입니다. 결론쿠키는 단순히 브라우져 저장소 중 하나가 아닙니다. HTTP라는 무상태 프로토콜 위에서 "사용자를 기억하기" 위해 탄생한 역사적 맥락과, 서버와 클라이언트가 헤더를 주고받는 과정 속에서 이해할 때 비로소 제대로 된 그림이 보일 것입니다.이 글은 제가 준비한 강의 「웹 개발의 핵심, HTTP 완벽 가이드」 의 2편을 바탕으로 작성하였습니다. 쿠키에 국한되지 않고, HTTP의 기본 구조부터 브라우저 동작 원리, AJAX, 보안, 성능까지 폭넓게 다루고 있습니다. 조금 더 깊이 있는 내용을 원하신다면 강의와 함께 따라오셔도 좋습니다.이 강의에서 다루는 내용1편. HTTP 기본2편. 브라우져3편. AJAX4편. 추가 프로토콜5편. 보안6편. 성능

HTTP를 이해하기 위한 첫 단추, URL

멀리서 단조로워 보이는 산도 한 걸음 다가가면 수많은 나무와 풀로 어우러져 있습니다. 인터넷 또한 그런 것 같습니다. 겉으로는 단일한 공간처럼 보이지만, 그 안에는 수없이 다양한 프로토콜과 데이터로 얽혀 있습니다.웹은 인터넷이라는 단단한 토양을 기반으로 움직이는데요. 잘만 활용하면 멋진 기능을 금방 만들어 낼 수 있습니다. 만약 원리에 대한 이해를 조금 더 넓히신다면, 훨씬 안정적이고 빠른 제품을 만드실 수 있을겁니다.이 글에서는 인터넷을 이루는 기초 요소 중 'URL'이라 부르는 주소에 대해 소개해 드리겠습니다. URL브라우져가 서버로 요청을 보낼 때 URL을 사용합니다. 검색창에 입력하는 그것이 말이죠. 서버를 찾기 위한 '전화번호'라고 생각해도 좋습니다.URL은 일정한 규칙을 갖고 있는데요. 이제부터 이 규칙을 하나씩 소개해 드릴게요.프로토콜://도메인:포트/경로?쿼리문자열#앵커 프로토콜'프로토콜을 맞춘다'라고 표현할 때는, '대화의 규칙을 정하자'라는 뜻입니다. URL 맨 앞에 있는 이 프로토콜(protocol)이 규칙의 종류를 구분하는 요소입니다.http:: HTML 문서를 가리키는 URL입니다. 브라우져는 HTML 문서를 다운로드하고 이것을 사람이 볼 수 있는 형태로 보여줄 거에요.mailto:: 링크를 클릭했는데 메일 앱이 실행된 적이 있나요? 바로 이 프로토콜로 시작하는 URL입니다.tel:: 전화가 걸린다면 당황하실지도 모릅니다. 브라우져는 이 프로토콜로 시작하는 URL을 전화 앱과 함께 실행합니다. 도메인프로토콜에 이어 도메인(domain)은 서버의 위치를 나타내는 규칙입니다. 브라우져는 이 도메인이 가리키는 IP 주소를 찾기 위해 DNS(Domain Name Server)에 질의하기도 합니다.예를 들면 google.com, naver.com 같은 거에요. 각 각 구글 서버, 네이버 서버 위치를 가리킵니다. 직접 서버를 실행해 개발할 때는 "이 컴퓨터"를 가리키는 localhost라는 도메인도 자주 만나게 되실 거에요.도메인은 인터넷이라는 세상에서 국가를 가리키는 역할을 합니다. 포트도메인에 해당하는 서버를 찾았다면, 그 안에서 실행되고 있는 프로그램에 접속할 차례입니다. 한 국가에 들어가기 위해 항구를 찾듯이, 포트(port)는 서버 안에서 실행 중인 프로그램을 식별하는 규칙입니다.무려 65,536개(2^16)개의 포트를 가지고 있는데요, 클라이언트는 이 중 하나를 골라서 들어 갑니다. 마치 한국에 들어올 때 인천항이나 부산항을 선택하는 것처럼요.잘 알려진 포트: 0~1023 구간으로, 운영제제만 쓸 수 있는 특별한 포트입니다. (80: HTTP, 22: SSH)등록된 포트: 1024~49151 구간으로, 여러 애플리케이션이 관례적으로 사용하는 포트에요. 보통 개발 환경에서 자주 사용합니다. (8000: 웹 개발용)동적 포트: 49152~65535 구간으로, 일시적으로 할당되는 포트입니다. (예를 들어 클라이언트가 서버의 80 포트로 요청을 보내면, 서버는 이 구간에 속하는 임시 포트를 활용해 클라이언트에 응답을 전달합니다.) 경로프로그램은 여러가지 형태의 파일을 제공하는데요, 이 파일을 식별하는 규칙이 경로(path)입니다.브라우져는 이걸 통해 "이 파일을 주세요"라고 서버에게 요청할 수 있어요. 서버가 이 파일을 찾아서 보내주면, 브라우져는 그것을 화면에 표시할 겁니다./index.html → "웹사이트 첫 화면을 주세요"/images/logo.jpg → "로고 이미지를 주세요"/css/styles.css → "스타일시트 파일을 주세요"집을 찾기 위해 나라와 도시(도메인과 포트)를 찾았다면, 경로는 특정 건물을 가리키는 셈이지요. 쿼리 문자열과 앵커때로는 서버에 추가적인 정보를 전달할 필요가 있는데, 쿼리 문자열(querystring)이 이 역할을 합니다.위치: 경로 뒤에 '?' 기호와 함께 작성합니다.형식: "키=값"형태로 데이터를 표현합니다. (예: '?query=검색어' 검색결과 페이지 요청)배가 특정 지점에 머물도록 닻을 내리 듯, 앵커(anchor)는 HTML 문서안의 특정 위치를 가리키는 역할을 합니다.위치: 경로 혹은 쿼리 문자열 뒤에 '#' 기호와 함께 작성합니다.id 값 사용: HTML 문서에서 요소에 부여한 id 값을 참조합니다. (예: #post-title) 정리지금까지 HTTP 핵심 요소인 URL에 대해 살펴보았습니다. 이것은 인터넷 상의 자원을 식별하는 주소이자, 브라우져가 서버와 대화하기 위한 출발점입니다.브라우져는 단순히 URL만 전달하는 것이 아니라, 헤더와 본문을 추가해 하나의 요청(Request)를 만듭니다. 이 요청을 받은 서버는 자원을 찾아낸 뒤, 상태 코드, 헤더, 분문을 추가해 응답(Response)로 돌려줍니다. 이렇게 요청과 응답을 수없이 주고 받으며 우리가 매일 사용하는 웹이 움직이는 것이죠.더 깊이 있는 이해를 원하신다면 제가 준비한 강의, 「웹 개발의 핵심, HTTP 완벽 마스터하기!」 1편을 참고해 보시면 도움이 될 것입니다. 웹을 처음 배우시는 분에게는 든든한 길잡이가, 경험자에게는 기초를 재정립하는 기회가 될 것입니다.이 강의에서 다루는 내용1편. HTTP 기본2편. 브라우져3편. AJAX4편. 추가 프로토콜5편. 보안6편. 성능

🚀 개발 스킬 레벨업! 25% 할인 이벤트 (~ 2024년 11월 3일 까지) 🚀

개발자분들, 그리고 개발자가 되기를 꿈꾸는 취업 준비생 여러분, 모두 주목해주세요! 오늘부터 2024년 11월 3일까지 인프런 강의 25% 할인 이벤트를 진행합니다.이런 분들께 추천드립니다실무에서 사용하는 최신 웹 기술을 배우고 싶은 개발자 성공적인 취업을 목표로 웹 개발 역량을 키우고 있는 취준생📅 할인 기간: 2024년 10월 21일 ~ 2024년 11월 3일 이번 기회에 개발 역량을 한 단계 업그레이드해보세요.강의 목록리액트 1부) 만들고 비교하며 학습하는 리액트:React의 핵심 개념과 동작 원리를 다양한 예제를 통해 이해하세요. 리액트 2부) 고급 주제와 훅:리액트의 고급 기능과 최신 트렌드를 따라잡고 싶은 분들께 강력 추천! 프론트엔드 개발환경의 이해와 실습 (Webpack, Babel, ESLint):현업에서 사용하는 개발 환경을 직접 구성해보며 익히는 시간! 실습 UI 개발로 배워보는 순서 JavaScript와 Vue.js 개발:실전 프로젝트로 JavaScript와 Vue.js를 체계적으로 배우세요! 트렐로 개발로 배우는 Vue.js, Vuex, Vue-router 프론트엔드 실전 기술:실제 프로젝트를 통해 프론트엔드 스킬을 한 단계 업그레이드하세요. 견고한 JS 소프트웨어 만들기 :코드 품질을 높이고 유지보수성을 강화하는 방법을 배울 수 있습니다.