소개
업무프로그램을 사용하다 보면 간단한 수정인데도 여러 번 클릭해야 하는 경우가 있어요. 반복하다 보니 이 과정을 한 번의 클릭으로 처리하고 싶었습니다. 그래서 Aside와 함께 확장프로그램을 만들었어요.
이후 코드를 뜯어보면서 작동 원리를 알아가면 공부하게 된 사례입니다. AI로 도구를 만든 뒤, 그 결과물을 다시 공부 재료로 활용했습니다.
진행 방법
1. 귀찮은 수정 작업을 한 번의 클릭으로
목표는 단순했어요.
업무프로그램에서 여러 번 클릭해야 하는 수정 작업을 한 번에 처리하자.
Aside와 함께 확장프로그램을 만든 뒤, 그 안에서 서버와 통신하는 코드도 살펴보게 됐습니다.
화면의 버튼을 누르는 것과 별개로, 코드에서 서버에 요청을 보내 작업을 처리할 수 있다는 점이 공부 의 출발점이었어요.
2. 만들어진 코드에 질문하기
코드를 살펴보다가 fetch()와 method: 'POST'를 보게 됐어요.
그래서 Aside에게 물었습니다.
text
fetch()에서 post는 메소드로 지정한다는 거?검색·조회·저장에 사용하는 요청 주소를 어디서 찾았는지도 질문했어요.
완성된 코드를 그냥 사용하는 데서 끝내지 않고, “이 코드는 왜 이렇게 작성됐을까?”를 하나씩 물어보는 방식으로 공부가 이어졌습니다.
3. fetch와 GET·POST는 어떻게 다를까?
처음 보면 셋이 비슷한 종류의 용어처럼 느껴질 수 있어요. 하지만 역할이 다릅니다.
fetch()는 JavaScript에서 서버에 요청을 보내고 응답을 받아오는 함수예요. GET과 POST는 그 요청에 사용하는 HTTP 메소드입니다.
비유하면 다음과 같아요.
fetch: 요청을 전달하는 도구
URL: 요청을 보낼 목적지
GET·POST: 어떤 방식으로 요청할지
body: 요청과 함께 보내는 내용
응답: 서버가 돌려주는 답변
GET: 정보를 가져오는 요청
GET은 주로 정보를 조회할 때 사용해요. 검색어 같은 조건은 보통 URL에 붙여 전달합니다.
예를 들어 목록에서 ‘키보드’를 검색하는 요청은 아래처럼 표현할 수 있어요.
js
// 설명용 예시 주소입니다.
const response = await fetch('/api/items?keyword=키보드',
{ method: 'GET'});
const data = await response.json();console.log(data);이 코드는 서버에 목록을 요청하고, 응답을 JSON으로 읽어 콘솔에 출력하는 예시예요.
참고로 fetch()는 메소드를 생략하면 기본으로 GET을 사용합니다.
js
fetch('/api/items');POST: 데이터를 담아 보내는 요청
POST는 주로 데이터를 제출하거나 등록·변경 처리를 요청할 때 사용해요. 전송할 데이터는 보통 body에 담습니다.
js
// 설명용 예시입니다. 실제 서버에서는 데이터가 생성될 수 있습니다.
const response = await fetch('/api/items',
{ method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: '키보드', description: '업무용 장비' })});
const data = await response.json();console.log(data);각 부분의 역할은 이렇습니다.
method: 'POST': POST 방식으로 요청Content-Type: 보내는 데이터가 JSON 형식임을 표시JSON.stringify(): JavaScript 객체를 전송할 JSON 문자열로 변환body: 서버로 보낼 데이터response.json(): 서버 응답을 JSON으로 읽기console.log(): 읽은 결과를 콘솔에 출력
위 주소와 데이터는 개념 설명용이며, 실제 요청은 해당 서버가 요구하는 주소와 형식에 맞춰야 합니다.
4. 조회라고 무조건 GET은 아니었다
이번에 살펴본 업무프로그램에서는 저장뿐 아니라 검색과 상세 조회에도 POST를 사용하고 있었어요.
그래서 “GET은 조회, POST는 저장”이라는 구분은 입문용 설명이지, 모든 프로그램에 그대로 적용되는 규칙은 아니라는 점을 알게 됐습니다.
실제로 요청할 때는 서버가 어떤 메소드와 데이터를 받도록 구현되어 있는지 확인해야 해요.
또 POST라고 자동으로 암호화되는 것도 아닙니다. 통신 암호화는 GET·POST의 차이가 아니라 HTTPS 사용 여부와 관련이 있어요.
5. 콘솔에서 확인할 수도 있어요.
코드의 흐름은 콘솔에서 직접 확인해볼 수도 있어요.
GET으로 테스트 데이터를 요청하고 응답을 출력하기
POST로 테스트 데이터를 보내고 응답을 출력하기
보낸 데이터와 돌아온 데이터를 비교하기
이렇게 확인하면 fetch()가 단순히 화면에 글자를 표시하는 코드가 아니라, 서 버와 데이터를 주고받는 요청이라는 점을 이해하는 데 도움이 됩니다.
단, POST는 실제 등록이나 변경을 일으킬 수 있으므로 업무 서버가 아닌 테스트 환경에서 실습하는 것이 좋습니다.
실습용 사이트
1. GET 실습
js
const getResponse = await fetch( 'https://httpbin.org/get?keyword=' + encodeURIComponent('키보드'));const getData = await getResponse.json();
console.log(getResponse.status);console.log(getData.args);실제 결과:
js
200{ keyword: "키보드" }URL에 붙인 검색어가 서버 응답의 args에 돌아왔어요.
2. POST 실습
js
const postResponse = await fetch('https://httpbin.org/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: '키보드', description: '업무용 장비' })});const postData = await postResponse.json();
console.log(postResponse.status);console.log(postData.json);실제 결과:
js
200{ description: "업무용 장비", name: "키보드" }body에 보낸 데이터가 서버 응답의 json에 돌아왔어요. 실제 장비 등록이 아니라, 보낸 내용을 되돌려주는 테스트입니다.
결과와 배운 점
처음의 목적은 여러 번 클릭해야 하는 수정 작업을 줄이는 것이었어요. 그런데 확장프로그램을 만든 이후에는 그 안의 코드가 공부 재료가 됐습니다.
이번에 정리한 내용은 다음과 같아요.
fetch()는 서버에 요청을 보내는 함수다.GET·POST는 HTTP 요청 메소드다.
요청 주소, 메소드, 헤더, 본문은 각각 역할이 다르다.
조회 기능에서도 POST를 사용할 수 있다.
실제 요청은 서버가 정한 방식에 맞춰야 한다.
모든 개념을 알아야 도구를 만들 수 있는 것은 아니었습니다. 필요한 도구를 먼저 만들고, 그 안에서 궁금한 부분을 질문하며 거꾸로 알아가는 방법도 있었어요.
