Web/Web Programming(34)
-
Web/Web Programming
2026.01.29
1
ChatGPT로 결제를 진행하는 ACP(Agentic Commerce Protocol)란?
300달러 이하의 캐리어 구매하고 싶어 찾아줘 요즘은 이렇게 ChatGPT에 물어보는 것만으로도, 내가 원하는 조건에 맞는 제품들을 웹에서 빠르게 찾아 정리해 줍니다. 추천된 제품을 클릭하면 우측에 쇼핑몰 링크들이 나열되고, 사용자는 그중 원하는 사이트로 이동해 직접 결제를 진행할 수 있죠. 이렇게 검색과 비교는 AI가 대신해 주고 있지만, 아직까지 결제라는 마지막 단계는 여전히 사람의 몫입니다. 그런데 곧 이 구조가 달라질 가능성이 큽니다. 최근 OpenAI를 중심으로 ACP(Agentic Commerce Protocol)라는 개념이 등장했기 때문입니다. ACP는 단순히 정보를 찾아주는 AI가 아니라, 결제·예약·주문 같은 업무를 대화만으로 끝까지 완료하는 구조를 의미합니다. 이번 글에서는 ACP가 무..
-
Web/Web Programming
2024.07.01
1
[React] 리액트(React)란 무엇인가? - 사용하는 이유
2023년에 스택오버플로우에서 전 세계 웹 개발자를 상대로 사용하는 기술 스택을 조사했는데 리액트(React)가 40.58%의 점유율로 Node.js 다음으로 많이 사용되고 있다고 합니다. React를 개발한 페이스북, 인스타그램은 물론이고 넷플릭스, 에어비앤비, 트위터 등 수많은 기업이 이 React로 개발을 진행하고 있다고 하는데요. 리액트(React)가 무엇이기에 이렇게 인기가 있는 걸까요? 리액트(React)란?리액트는 SPA(Single Page Application)을 위한 자바스크립트 라이브러리입니다. 2013년 페이스북(현 메타)에서 공개하였습니다. 리액트는 웹 UI를 작성하기 위한 목적으로 만들어졌으며 순수하게 자바스크립트만을 이용해서 만들 수 있고, UI영역의 재사용을 위해 '컴포넌트..
-
Web/Web Programming
2024.06.30
[Web] 웹팩(Webpack)이란 무엇인가? - 사용해야 하는 이유
웹팩(Webpack)이란?웹팩(Webpack)은 오픈 소스 자바스크립트 모듈 번들러입니다. 여기서 모듈 번들러는 여러 개의 모듈을 하나로 조합하여 하나의 파일 또는 여러 개의 파일을 하나로 묶어주는 도구를 뜻합니다. 이렇게 여러 개의 모듈을 하나로 묶어주면 서버에 보내야 하는 HTTP 요청을 줄이고, 프로그램 성능을 최적화할 수 있습니다. 특히 Webpack은 최근에 유행하는 React, Angular, Vue와 같은 최신 프론트엔드 프레임워크에서 널리 사용됩니다. 그렇다면 모듈이란 무엇일까요?여러개의 모듈을 합친다? 여기서 모듈은 무엇일까요? 개발자가 개발을 할 때, 유지보수와 개발효율성을 고려해서 여러개의 .js파일로 나눠서 개발하게 될 텐데요. 여기서 위의 .js 하나하나가 다 모듈이라고 할 수 있..
-
Web/Web Programming
2024.01.26
2
[Web] HTTP 세션(Session)이란 무엇인가? +(세션 관리 방법)
HTTP 세션이란? HTTP 세션은 웹 서비스에서 사용자의 상태 정보를 유지하기 위한 방법입니다. 기본적으로 HTTP 프로토콜은 상태값을 유지할 수 있는 방법이 없습니다. HTTP 통신은 클라이언트와 서버 간의 통신이 각각의 요청과 응답 간에 독립적으로 이루어지기에 사용자를 특정할 수 있는 방법이 존재하지 않기 때문입니다. 하지만 웹 서비스에서는 사용자의 상태를 계속 유지해야 하는 경우들이 있습니다. 예를 들자면 로그인이나, 장바구니를 예시로 들 수 있겠습니다. 다른 페이지로 이동하더라도 로그인이 유지되고, 장바구니에 담긴 상품들이 유지되는 것처럼 말이죠. HTTP 세션의 동작 원리 로그인을 한다고 가정하고 세션을 통해 어떻게 사용자의 상태값을 유지할 수 있는지 알아보겠습니다. DB를 사용할 수도 있는데..
-
Web/Web Programming
2024.01.23
4
[Web] HTTP 캐싱(Caching), 웹 캐시(Web Cache)란 무엇인가?
HTTP 캐싱(Caching)이란? HTTP 캐싱(Caching)은 한번 가지고 온 첫 요청 시 리소스(이미지, 스타일 시트, 자바스크립트 파일 등)를 미리 저장해 뒀다가 다음번 동일한 HTTP 요청에서 서버에서 리소스를 새로 가지고 오는 것이 아닌 미리 저장해 뒀던 리소스를 활용하는 기법을 말합니다. 이 기법을 통해 반복적으로 요청되는 리소스의 부하를 줄여서 웹 로딩속도 향상과 서버의 과부하를 줄일 수 있습니다. 이 캐싱이라는 용어는 웹에서만 사용되는 용어는 아닙니다. 자원을 미리 저장해 놓고 활용하는 방식은 효율성이 중요한 어떤 곳에서 든 가장 먼저 생각해 볼 수 있는 방식입니다. CPU의 내부에도 캐시메모리라는 방식이 존재하고, 어떻게 보면 일상생활에서 자주 사용되는 포스트잇도 캐싱이라고 할 수 있..
-
Web/Web Programming
2024.01.16
2
[Web] HTTP 쿠키(Cookie)란 무엇인가?
쿠키(Cookie)란? 쿠키는 웹 브라우저와 웹 서버 간의 정보를 교환할 때 사용되는 작은 기록 파일을 말합니다. 쿠키는 사용자가 임의의 웹 사이트를 방문할 때 사용자의 디바이스(PC, 휴대폰, 태블릿)등에 저장되며 쿠키에는 사용자에게 필요한 정보를 저장하여 사용자 경험을 향상시켜 줍니다. 예를 들자면 장바구니에 물건을 추가한다거나 로그인이 풀리지 않도록 처리하는 등에서 쿠키를 활용할 수 있겠습니다. 이후 HTTP 요청을 서버로 보낼 때 웹 브라우저는 쿠키를 같이 전송해 줍니다. 그 쿠키에 있는 데이터를 서버 측에서는 활용할 수 있겠죠. 세션 관리 : 쿠키를 사용하여 사용자의 로그인 상태나 세션을 관리할 수 있습니다. 맞춤형 콘텐츠 제공 : 쿠키를 활용하여 사용자에 입맛에 맞는 콘텐츠를 제공할 수 있습니..
-
Web/Web Programming
2024.01.08
2
[Web] HTTP 헤더(header) 구조와 주요 파라메터 정리
HTTP 헤더란? HTTP 헤더는 웹 브라우저와 서버 간의 통신 방법인 HTTP 통신 메시지에서 메타데이터를 담고 있는 부분을 말합니다. 여기서 메타데이터는 쉽게 말해 다른 데이터를 설명해 주는 데이터를 말하는데요. 그러니까 HTTP 헤더는 HTTP 메시지의 부가적인 정보를 담고 있다고 생각하시면 이해가 편하실 것 같습니다. HTTP 통신은 요청과 응답 시에 모두 HTTP 메시지로 통신을 합니다. 일반적으로 웹 브라우저는 사용자가 요청한 웹 페이지에 대한 정보를 받기 위해 서버에게 HTTP 요청을 보내고, 서버는 해당 요청에 대한 응답으로 HTML, 이미지, 스크립트 등의 데이터를 브라우저에 응답값으로 보내게 되는데 여기서 요청과 응답 시에 공통으로 사용되는 값과 다르게 사용되는 값들이 있습니다. 이번 ..
-
Web/Web Programming
2023.12.29
[Web] 리다이렉트(Redirect)에 대하여 +구현방법
리다이렉트(Redirect)란? 리다이렉트는 특정 요청을 받았을 때 현재 웹 페이지를 특정 URL로 이동시키는 프로세스를 말합니다. 리다이렉트는 웹에서 유용하게 사용됩니다. 예를 들면 사용자가 쇼핑몰에서 결제창을 띄워서 결제를 진행한다고 가정해 보겠습니다. 그러면 결제가 완료되거나 실패했을 때 기존에 쇼핑하고 있던 앱이나 웹사이트로 리다이렉트 시키면 사용자 경험이 올라가겠죠. 또한 내가 서비스하고 있는 웹 서비스의 도메인이 바뀌었을 때에도 리다이렉트를 활용하면 기존 도메인으로 들어온 고객들을 바뀐 도메인으로 인입되도록 처리하여 손실되는 트래픽을 최소화시킬 수도 있을 것입니다. 리다이렉트의 주체 클라이언트 사이드 리다이렉트 : 리다이렉트가 사용자의 브라우저에서 처리됩니다. 주로 자바스크립트 코드를 활용하여..
-
Web/Web Programming
2023.12.28
8
[Web] HTTP 상태 코드 총정리 (응답 코드)
상태코드란? HTTP 상태 코드는 클라이언트가 보낸 HTTP 요청에 대한 처리 상태를 서버의 응답에서 알려주는 기능을 가지고 있는 3자리 숫자코드를 의미합니다. 크게 1xx, 2xx, 3xx, 4xx, 5xx의 숫자로 시작되는 5가지의 분류로 나뉘어 있으며 각각의 상태 코드는 특정한 의미를 가지고 있습니다. 이 HTTP 상태코드 통해 사용자는 클라이언트와 서버 간의 통신 과정에서 어떤 일이 발생했는지를 대략적으로 유추할 수 있습니다. 1xx(Informational): 요청이 수신되어 처리 중 2xx(Successful): 요청 정상 처리 3xx(Redirection): 요청을 완료하려면 추가 행동이 필요 4xx(Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음..
-
Web/Web Programming
2023.12.24
[Web] HTTP 요청 메서드(Method) 정리 (GET, POST, PUT, PATCH, DELETE)
HTTP 요청 메서드는 클라이언트가 서버 측에 요청하는 HTTP 메시지를 전송하는 방식을 뜻합니다. 즉 서버에 HTTP 메서드를 요청할 때 서버에서 기대하는 행동을 정의해서 보낸다고 생각하시면 되겠습니다. 이 HTTP 메서드가 필요한 이유는 서버 측에서 HTTP 메시지의 의미를 쉽게 파악하기 위해서입니다. 예를 들어 회원관리를 하는 관리자 사이트가 있다고 해봅시다. 그러면 회원들의 정보를 수정하기 위해서는 클라이언트에서 서버로 HTTP 요청을 서버에 날려야 할 텐데, 같은 HTTP 메시지에 메서드만 PEATCH(수정), DELETE(삭제)냐에 서버는 요청 메시지의 의미를 구분할 수 있게 되고, 그에 따른 동작을 명확하게 처리할 수 있게 됩니다. 이러한 HTTP 메서드는 RESTful API에서 자주 사용..
-
Web/Web Programming 2026.01.29 1ChatGPT로 결제를 진행하는 ACP(Agentic Commerce Protocol)란? 300달러 이하의 캐리어 구매하고 싶어 찾아줘 요즘은 이렇게 ChatGPT에 물어보는 것만으로도, 내가 원하는 조건에 맞는 제품들을 웹에서 빠르게 찾아 정리해 줍니다. 추천된 제품을 클릭하면 우측에 쇼핑몰 링크들이 나열되고, 사용자는 그중 원하는 사이트로 이동해 직접 결제를 진행할 수 있죠. 이렇게 검색과 비교는 AI가 대신해 주고 있지만, 아직까지 결제라는 마지막 단계는 여전히 사람의 몫입니다. 그런데 곧 이 구조가 달라질 가능성이 큽니다. 최근 OpenAI를 중심으로 ACP(Agentic Commerce Protocol)라는 개념이 등장했기 때문입니다. ACP는 단순히 정보를 찾아주는 AI가 아니라, 결제·예약·주문 같은 업무를 대화만으로 끝까지 완료하는 구조를 의미합니다. 이번 글에서는 ACP가 무..
-
Web/Web Programming 2024.07.01 1[React] 리액트(React)란 무엇인가? - 사용하는 이유 2023년에 스택오버플로우에서 전 세계 웹 개발자를 상대로 사용하는 기술 스택을 조사했는데 리액트(React)가 40.58%의 점유율로 Node.js 다음으로 많이 사용되고 있다고 합니다. React를 개발한 페이스북, 인스타그램은 물론이고 넷플릭스, 에어비앤비, 트위터 등 수많은 기업이 이 React로 개발을 진행하고 있다고 하는데요. 리액트(React)가 무엇이기에 이렇게 인기가 있는 걸까요? 리액트(React)란?리액트는 SPA(Single Page Application)을 위한 자바스크립트 라이브러리입니다. 2013년 페이스북(현 메타)에서 공개하였습니다. 리액트는 웹 UI를 작성하기 위한 목적으로 만들어졌으며 순수하게 자바스크립트만을 이용해서 만들 수 있고, UI영역의 재사용을 위해 '컴포넌트..
-
Web/Web Programming 2024.06.30[Web] 웹팩(Webpack)이란 무엇인가? - 사용해야 하는 이유 웹팩(Webpack)이란?웹팩(Webpack)은 오픈 소스 자바스크립트 모듈 번들러입니다. 여기서 모듈 번들러는 여러 개의 모듈을 하나로 조합하여 하나의 파일 또는 여러 개의 파일을 하나로 묶어주는 도구를 뜻합니다. 이렇게 여러 개의 모듈을 하나로 묶어주면 서버에 보내야 하는 HTTP 요청을 줄이고, 프로그램 성능을 최적화할 수 있습니다. 특히 Webpack은 최근에 유행하는 React, Angular, Vue와 같은 최신 프론트엔드 프레임워크에서 널리 사용됩니다. 그렇다면 모듈이란 무엇일까요?여러개의 모듈을 합친다? 여기서 모듈은 무엇일까요? 개발자가 개발을 할 때, 유지보수와 개발효율성을 고려해서 여러개의 .js파일로 나눠서 개발하게 될 텐데요. 여기서 위의 .js 하나하나가 다 모듈이라고 할 수 있..
-
Web/Web Programming 2024.01.26 2[Web] HTTP 세션(Session)이란 무엇인가? +(세션 관리 방법) HTTP 세션이란? HTTP 세션은 웹 서비스에서 사용자의 상태 정보를 유지하기 위한 방법입니다. 기본적으로 HTTP 프로토콜은 상태값을 유지할 수 있는 방법이 없습니다. HTTP 통신은 클라이언트와 서버 간의 통신이 각각의 요청과 응답 간에 독립적으로 이루어지기에 사용자를 특정할 수 있는 방법이 존재하지 않기 때문입니다. 하지만 웹 서비스에서는 사용자의 상태를 계속 유지해야 하는 경우들이 있습니다. 예를 들자면 로그인이나, 장바구니를 예시로 들 수 있겠습니다. 다른 페이지로 이동하더라도 로그인이 유지되고, 장바구니에 담긴 상품들이 유지되는 것처럼 말이죠. HTTP 세션의 동작 원리 로그인을 한다고 가정하고 세션을 통해 어떻게 사용자의 상태값을 유지할 수 있는지 알아보겠습니다. DB를 사용할 수도 있는데..
-
Web/Web Programming 2024.01.23 4[Web] HTTP 캐싱(Caching), 웹 캐시(Web Cache)란 무엇인가? HTTP 캐싱(Caching)이란? HTTP 캐싱(Caching)은 한번 가지고 온 첫 요청 시 리소스(이미지, 스타일 시트, 자바스크립트 파일 등)를 미리 저장해 뒀다가 다음번 동일한 HTTP 요청에서 서버에서 리소스를 새로 가지고 오는 것이 아닌 미리 저장해 뒀던 리소스를 활용하는 기법을 말합니다. 이 기법을 통해 반복적으로 요청되는 리소스의 부하를 줄여서 웹 로딩속도 향상과 서버의 과부하를 줄일 수 있습니다. 이 캐싱이라는 용어는 웹에서만 사용되는 용어는 아닙니다. 자원을 미리 저장해 놓고 활용하는 방식은 효율성이 중요한 어떤 곳에서 든 가장 먼저 생각해 볼 수 있는 방식입니다. CPU의 내부에도 캐시메모리라는 방식이 존재하고, 어떻게 보면 일상생활에서 자주 사용되는 포스트잇도 캐싱이라고 할 수 있..
-
Web/Web Programming 2024.01.16 2[Web] HTTP 쿠키(Cookie)란 무엇인가? 쿠키(Cookie)란? 쿠키는 웹 브라우저와 웹 서버 간의 정보를 교환할 때 사용되는 작은 기록 파일을 말합니다. 쿠키는 사용자가 임의의 웹 사이트를 방문할 때 사용자의 디바이스(PC, 휴대폰, 태블릿)등에 저장되며 쿠키에는 사용자에게 필요한 정보를 저장하여 사용자 경험을 향상시켜 줍니다. 예를 들자면 장바구니에 물건을 추가한다거나 로그인이 풀리지 않도록 처리하는 등에서 쿠키를 활용할 수 있겠습니다. 이후 HTTP 요청을 서버로 보낼 때 웹 브라우저는 쿠키를 같이 전송해 줍니다. 그 쿠키에 있는 데이터를 서버 측에서는 활용할 수 있겠죠. 세션 관리 : 쿠키를 사용하여 사용자의 로그인 상태나 세션을 관리할 수 있습니다. 맞춤형 콘텐츠 제공 : 쿠키를 활용하여 사용자에 입맛에 맞는 콘텐츠를 제공할 수 있습니..
-
Web/Web Programming 2024.01.08 2[Web] HTTP 헤더(header) 구조와 주요 파라메터 정리 HTTP 헤더란? HTTP 헤더는 웹 브라우저와 서버 간의 통신 방법인 HTTP 통신 메시지에서 메타데이터를 담고 있는 부분을 말합니다. 여기서 메타데이터는 쉽게 말해 다른 데이터를 설명해 주는 데이터를 말하는데요. 그러니까 HTTP 헤더는 HTTP 메시지의 부가적인 정보를 담고 있다고 생각하시면 이해가 편하실 것 같습니다. HTTP 통신은 요청과 응답 시에 모두 HTTP 메시지로 통신을 합니다. 일반적으로 웹 브라우저는 사용자가 요청한 웹 페이지에 대한 정보를 받기 위해 서버에게 HTTP 요청을 보내고, 서버는 해당 요청에 대한 응답으로 HTML, 이미지, 스크립트 등의 데이터를 브라우저에 응답값으로 보내게 되는데 여기서 요청과 응답 시에 공통으로 사용되는 값과 다르게 사용되는 값들이 있습니다. 이번 ..
-
Web/Web Programming 2023.12.29[Web] 리다이렉트(Redirect)에 대하여 +구현방법 리다이렉트(Redirect)란? 리다이렉트는 특정 요청을 받았을 때 현재 웹 페이지를 특정 URL로 이동시키는 프로세스를 말합니다. 리다이렉트는 웹에서 유용하게 사용됩니다. 예를 들면 사용자가 쇼핑몰에서 결제창을 띄워서 결제를 진행한다고 가정해 보겠습니다. 그러면 결제가 완료되거나 실패했을 때 기존에 쇼핑하고 있던 앱이나 웹사이트로 리다이렉트 시키면 사용자 경험이 올라가겠죠. 또한 내가 서비스하고 있는 웹 서비스의 도메인이 바뀌었을 때에도 리다이렉트를 활용하면 기존 도메인으로 들어온 고객들을 바뀐 도메인으로 인입되도록 처리하여 손실되는 트래픽을 최소화시킬 수도 있을 것입니다. 리다이렉트의 주체 클라이언트 사이드 리다이렉트 : 리다이렉트가 사용자의 브라우저에서 처리됩니다. 주로 자바스크립트 코드를 활용하여..
-
Web/Web Programming 2023.12.28 8[Web] HTTP 상태 코드 총정리 (응답 코드) 상태코드란? HTTP 상태 코드는 클라이언트가 보낸 HTTP 요청에 대한 처리 상태를 서버의 응답에서 알려주는 기능을 가지고 있는 3자리 숫자코드를 의미합니다. 크게 1xx, 2xx, 3xx, 4xx, 5xx의 숫자로 시작되는 5가지의 분류로 나뉘어 있으며 각각의 상태 코드는 특정한 의미를 가지고 있습니다. 이 HTTP 상태코드 통해 사용자는 클라이언트와 서버 간의 통신 과정에서 어떤 일이 발생했는지를 대략적으로 유추할 수 있습니다. 1xx(Informational): 요청이 수신되어 처리 중 2xx(Successful): 요청 정상 처리 3xx(Redirection): 요청을 완료하려면 추가 행동이 필요 4xx(Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음..
-
Web/Web Programming 2023.12.24[Web] HTTP 요청 메서드(Method) 정리 (GET, POST, PUT, PATCH, DELETE) HTTP 요청 메서드는 클라이언트가 서버 측에 요청하는 HTTP 메시지를 전송하는 방식을 뜻합니다. 즉 서버에 HTTP 메서드를 요청할 때 서버에서 기대하는 행동을 정의해서 보낸다고 생각하시면 되겠습니다. 이 HTTP 메서드가 필요한 이유는 서버 측에서 HTTP 메시지의 의미를 쉽게 파악하기 위해서입니다. 예를 들어 회원관리를 하는 관리자 사이트가 있다고 해봅시다. 그러면 회원들의 정보를 수정하기 위해서는 클라이언트에서 서버로 HTTP 요청을 서버에 날려야 할 텐데, 같은 HTTP 메시지에 메서드만 PEATCH(수정), DELETE(삭제)냐에 서버는 요청 메시지의 의미를 구분할 수 있게 되고, 그에 따른 동작을 명확하게 처리할 수 있게 됩니다. 이러한 HTTP 메서드는 RESTful API에서 자주 사용..