think2659 님의 블로그

📝 상세 배경 설명: 쿼리 스트링이란?

웹에서 데이터를 서버에 요청할 때, URL 끝에 붙는 ?와 &로 구분된 ‘키=값’ 쌍들을 쿼리 스트링(Query String)이라고 해요.
예를 들어, 검색어, 페이지 번호, 필터 조건 등을 서버에 전달할 때 많이 사용하죠.

쿼리 스트링은 GET 요청에 자주 쓰이고, 서버는 이 값을 읽어 사용자가 원하는 데이터를 반환해줍니다.

💻 실무 예제 코드: 쿼리 스트링 사용법

// 검색어와 페이지 번호를 쿼리 스트링으로 전달
const searchTerm = 'coffee';
const page = 2;

const url = `https://api.example.com/products?search=${encodeURIComponent(searchTerm)}&page=${page}`;

fetch(url)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error('Error:', err));

• encodeURIComponent()는 특수문자(공백, &, = 등)를 URL에 안전하게 포함시키기 위해 꼭 써야 해요.

⚠️ 자주 하는 실수와 해결법

💡 초보자 팁!

• 쿼리 스트링은 URL에 데이터를 담아 서버에 전달하는 가장 기본적인 방법!
• 값을 직접 넣을 때는 항상 encodeURIComponent로 인코딩 필수!
• 주소창에 붙여서 확인하면 어떤 데이터가 전달되는지 한눈에 알 수 있어요.

🚀 실력자 팁!

• 복잡한 쿼리 스트링은 URLSearchParams API 사용하면 편리!
• 서버에서 쿼리 스트링 파싱 라이브러리(예: qs, query-string)로 쉽게 처리 가능
• RESTful API에서 필터링, 정렬, 페이징 기능 구현 시 쿼리 스트링 활용 극대화

📝 상세 배경 설명: RESTful API란?

‘RESTful’이라는 말은 ‘REST의 규칙(원칙)을 잘 지킨 API’를 뜻해요.
즉, REST API를 설계할 때 자원(Resource)을 명확히 구분하고, HTTP 메서드와 상태 코드를 제대로 활용하는 API를 말하죠.

RESTful API는 서버와 클라이언트 간에 명확한 소통 방식을 제공해, 유지보수성과 확장성이 좋아져요.

💻 실무 예제: RESTful API의 좋은 사용법

// GET - 사용자 리스트 요청 (자원은 /users)
fetch('https://api.example.com/users')
  .then(res => res.json())
  .then(data => console.log(data));

// GET - 특정 사용자 상세 요청 (ID 포함)
fetch('https://api.example.com/users/123')
  .then(res => res.json())
  .then(data => console.log(data));

// POST - 사용자 생성
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({name: 'Bob', age: 28})
})
.then(res => res.json())
.then(data => console.log(data));

// DELETE - 사용자 삭제
fetch('https://api.example.com/users/123', { method: 'DELETE' })
  .then(res => {
    if(res.ok) console.log('삭제 성공!');
  });

⚠️ 자주 하는 실수와 해결법

💡 초보자 팁!

• RESTful API는 URL과 HTTP 메서드를 ‘잘 조합’하는 것부터 시작!
• API 문서를 잘 보고, 요청/응답 구조를 이해하는 게 중요해요.
• 상태 코드는 문제 발생 시 원인 찾기에 큰 도움을 줘요.

🚀 실력자 팁!

• RESTful 원칙을 지키면 캐싱, 인증, 로깅 등 부가 기능 적용도 쉽다!
• HATEOAS 같은 고급 REST 개념으로 API 사용성을 더 높일 수 있다.
• API 설계 시 버전 관리, 오류 메시지 표준화, 문서 자동화 도구 활용 추천!

📝 상세 배경 설명: REST API란?

REST(Representational State Transfer)는 웹에서 서버와 클라이언트가 데이터를 주고받는 ‘약속’ 같은 거예요.
쉽게 말하면, 서버의 자원(데이터)을 URL로 표현하고, HTTP 메서드를 써서 어떻게 다룰지 약속하는 규칙이죠.

예를 들어, 사용자의 정보를 불러올 땐 GET, 새로 만들 땐 POST, 수정할 땐 PUT이나 PATCH, 삭제할 땐 DELETE 메서드를 써서 요청해요.

REST API는 이런 규칙을 따르는 웹 API를 뜻해요.

💻 실무 예제 코드: REST API 기본 요청

// 사용자 목록 가져오기(GET)
fetch('https://api.example.com/users')
  .then(res => res.json())
  .then(data => console.log(data));

// 사용자 생성(POST)
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice', age: 25 })
})
.then(res => res.json())
.then(data => console.log(data));

⚠️ 자주 하는 실수와 해결법

💡 초보자 팁!

• REST는 ‘자원(Resource)’을 ‘URL’로 표현하고 ‘HTTP 메서드’로 조작하는 약속이다!
• API 문서를 보면 어떤 URL에 어떤 메서드를 써야 하는지 꼭 확인하자
• JSON 형식이 기본 데이터 교환 형식임을 기억하자

🚀 실력자 팁!

• REST API 설계 시 URI는 명사로, 메서드는 동사 역할을 한다고 생각하면 편하다
• 무조건 REST만 고집하지 말고, 상황에 따라 GraphQL, gRPC 같은 다른 방식도 고려하자
• 효율적인 REST API를 위해 캐싱, 인증, 페이징 등 부가 기능 설계도 중요하다

📚 상세 배경 설명: fetch와 HTTP Method

fetch는 JavaScript에서 네트워크 요청을 보낼 때 가장 많이 쓰이는 함수예요.
웹페이지가 서버랑 데이터를 주고받을 때 사용하는 기본 도구라고 보면 됩니다.

HTTP Method는 요청의 ‘목적’을 알려주는 역할을 하는데, fetch에서는 이 메서드를 옵션으로 지정해서 서버에 어떤 작업을 할지 알려줘요.

예를 들어, POST 메서드는 “새 데이터를 서버에 만들어주세요” 요청이고, GET은 “데이터 좀 보여주세요” 요청이에요.

💻 실무 예제 코드: fetch 사용법 - POST, PUT, PATCH, DELETE

// POST - 새 데이터 생성
fetch('https://api.example.com/users', {
  method: 'POST',  
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => console.log('Created:', data))
.catch(error => console.error('Error:', error));


// PUT - 기존 데이터 전체 수정
fetch('https://api.example.com/users/123', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John Doe', age: 31 })
})
.then(response => response.json())
.then(data => console.log('Updated:', data))
.catch(error => console.error('Error:', error));


// PATCH - 기존 데이터 일부 수정
fetch('https://api.example.com/users/123', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ age: 32 })
})
.then(response => response.json())
.then(data => console.log('Partially Updated:', data))
.catch(error => console.error('Error:', error));


// DELETE - 데이터 삭제
fetch('https://api.example.com/users/123', {
  method: 'DELETE'
})
.then(response => {
  if (response.ok) {
    console.log('Deleted successfully');
  } else {
    console.error('Failed to delete');
  }
})
.catch(error => console.error('Error:', error));

⚠️ 자주 하는 실수와 해결법 

💡 초보자 팁!

• fetch 기본 구조는 URL + 옵션 객체(method, headers, body 등)
• 서버가 JSON 데이터를 받는다고 하면 headers와 body를 꼭 맞게 설정해야 해요
• 비동기라 결과 받기 전엔 바로 콘솔에 찍히지 않으니 .then()이나 async/await 꼭 써요

🚀 실력자 팁!

• 에러 핸들링을 강화하려면 HTTP 상태 코드별 분기 처리 추천
• async/await로 가독성 좋게 코드 작성하면 유지보수 편해져요
• 대용량 POST 요청 시 body를 스트리밍 처리하거나, 여러 요청으로 나누는 것도 고려해 보세요
• CORS 정책 이해와 대응도 fetch 활용에 필수!

⏳ 비동기(Asynchronous)란?

비동기는 ‘일을 시키고 기다리지 않고 다른 일을 하는 방식’이에요.
쉽게 말해, 커피를 주문하고 기다리는 대신 바로 일하러 가는 거죠!

웹에서 비동기는 서버에 요청을 보내고 답을 기다리는 동안, 화면이 멈추지 않고 계속 작동하도록 도와줘요.

🔄 동기(Synchronous)와 비동기 차이

• 동기(Sync):
  요청을 보내고 답이 올 때까지 멈춰서 기다려요.
  (예: 커피 주문하고 받기 전까지 가만히 기다림)
• 비동기(Async):
  요청을 보내고 답을 기다리면서도 다른 일을 해요.
  (예: 커피 주문하고 다른 일 하다가 커피 받음)

🌐 웹에서 비동기의 중요성

• 페이지가 멈추지 않아서 사용자 경험이 좋아져요.
• 여러 작업을 동시에 처리할 수 있어 효율적이에요.
• 특히 API 호출, 데이터 불러오기, 파일 업로드 등에 많이 사용돼요.

예시: 자바스크립트에서 비동기 처리

console.log("커피 주문 중...");

setTimeout(() => {
  console.log("커피 받음! 이제 일 시작");
}, 3000);  // 3초 후에 실행되는 비동기 함수

console.log("다른 일 처리 중...");

출력 결과:

커피 주문 중...  
다른 일 처리 중...  
(3초 후) 커피 받음! 이제 일 시작

💡 초보자 팁!

• 자바스크립트에서 setTimeout, Promise, async/await가 비동기를 처리하는 주요 도구에요.
• 비동기를 이해하면 페이지가 멈추지 않고 부드럽게 작동하는 원리를 알 수 있어요.

🚀 실력자 팁!

• 비동기 코드를 체계적으로 관리하려면 Promise chaining 또는 async/await 패턴을 사용하세요.
• API 호출 시 비동기 처리 덕분에 사용자 인터페이스가 느려지지 않도록 설계하는 게 중요해요.
• 이벤트 루프(Event Loop)와 콜백 큐(Call Stack)의 동작 원리를 공부하면 더 깊이 이해할 수 있어요.

🛠️ Method(메서드)란?

웹에서 ‘Method’는 서버에 보내는 요청의 ‘행동 종류’를 뜻해요.
즉, 내가 서버에 "어떤 작업을 해주세요!" 하고 요청할 때 그 작업의 종류를 알려주는 신호 같은 거예요.

가장 흔한 HTTP Method에는 대표적으로 GET, POST, PUT, PATCH, DELETE 등이 있어요.

📋 Method의 종류와 역할

예시

• GET: "이 페이지에 있는 모든 게시글 목록 보여줘!"
• POST: "새 게시글 하나 만들어줘!"
• PUT: "기존 게시글 전체 내용을 이 내용으로 바꿔줘!"
• PATCH: "기존 게시글 제목만 ‘새 제목’으로 바꿔줘!"
• DELETE: "이 게시글 삭제해줘!"

💡 초보자 팁!

• GET은 데이터를 읽을 때만 사용하세요. 데이터를 변경하면 안 돼요!
• POST, PUT, PATCH, DELETE는 서버 데이터 변경에 사용되므로 주의가 필요해요.
• URL만으로 어떤 작업인지 알 수 없고, HTTP Method를 보고 판단해요.

🚀 실력자 팁!

• REST API 설계 시, Method를 적절히 구분해 명확한 의미를 주면 유지보수에 유리합니다.
• PUT은 리소스를 통째로 교체하므로, 필드 누락 시 삭제 효과가 있을 수 있어 PATCH보다 주의가 필요합니다.
• DELETE 요청에는 일반적으로 요청 본문(body)을 포함하지 않지만, 필요시 설계할 수 있습니다.
• Idempotent(멱등) 개념을 고려해 GET, PUT, DELETE는 여러 번 호출해도 결과가 같도록 설계하는 게 좋습니다.