프론트엔드 통신 특강

 

1. 자바스크립트 기본 문법

 

1.1. 변수와 데이터 타입 (중요도 🌟🌟)

• 변수 선언 방식:
  • var: 함수 스코프를 가지며, 중복 선언이 가능. 단, 변수 호이스팅과 같은 문제로 인해 현재는 let이나 const가 주로 사용.
  • let: 블록 스코프를 가지며 중복 선언이 불가능. 변수를 선언할 때 일반적으로 사용.
  • const: 블록 스코프를 가지며 상수로 취급. 한 번 값이 할당되면 변경 불가능.

 

참고 사항:
const 로 선언된 객체나 배열은 그 내용물을 수정할 수 있지만, 변수 자체를 다른 객체나 배열로 재할당 불가능.

 

• 데이터 타입:
  • 기본 타입: string, number, boolean, null, undefined, symbol
  • 참조 타입: object, array, function . 이러한 타입들은 메모리의 참조를 통해 값을 다룸

 

---

1.2. 조건문과 반복문 (중요도 🌟🌟)

• 조건문:
  • if, else if, else 문을 사용하여 다양한 조건에 따라 코드를 실행. 조건이 참이면 그에 해당하는 블록이 실행.
  • 삼항 연산자: 간단한 조건 처리에 사용.
  • 조건이 참일 때 실행할 코드 : 거짓일 때 실행할 코드 형식으로 작성.

 

• 반복문:
  • for, while, do...while 문을 사용하여 반복 작업을 처리.
  • for 루프: 특정 횟수만큼 반복할 때 사용. 반복 변수 초기화, 조건, 증감식을 포함.
  • for...of 루프: 배열과 같은 반복 가능한 객체의 요소를 순회할 때 사용.
  • for...in 루프: 객체의 속성을 순회할 때 사용.

 

 

 

---

1.3. 함수와 객체 (중요도 🌟🌟)

• 함수:
  • 함수는 특정 작업을 수행하는 코드 블록. 필요할 때마다 호출할 수 있으며, 입력으로 매개변수를 받고, 결과를 반환 가능.
  • 함수 선언 방식:
    • 함수 선언: function 키워드를 사용하여 선언하며, 함수 이름을 가짐.
    • 함수 표현식: 함수를 변수에 할당하여 사용 가능.
    • 화살표 함수: ES6에서 도입된 간결한 함수 표현 방식으로, this 바인딩이 기존 함수와 다름.

 

• 객체:
  • 객체는 여러 개의 값을 하나로 묶어 관리하는 구조. 속성(키-값 쌍)으로 구성되며, 메서드를 포함.
  • 속성 접근 방법: 점(.) 표기법과 대괄호([ ]) 표기법을 사용하여 객체의 속성에 접근.
  • 메서드: 객체의 속성으로 포함된 함수. this 키워드를 사용해 객체의 다른 속성에 접근.

 

 

 

---

1.4. 기타 중요한 문법 요소 (중요도 🌟)

• 배열 메서드: 자바스크립트 배열의 다양한 메서드를 활용하여 데이터를 조작하는 방법을 다룸.
  • push: 배열 끝에 요소를 추가.
  • pop: 배열 끝의 요소를 제거.
  • map, filter, reduce: 배열의 각 요소를 변환, 필터링, 집계하는 고차 함수.

 

• 비동기 처리:
  • 콜백 함수: 함수가 다른 함수의 인자로 전달되어, 특정 작업이 완료된 후 호출되는 방식.
  • Promise: 비동기 작업의 완료 또는 실패를 처리하는 객체.

 

 

 

---

2. 자바스크립트를 활용한 서버 통신

 

2.1. HTTP

• HTTP 프로토콜:
  • 역할: 클라이언트와 서버 간의 요청과 응답을 처리하는 규칙. HTTP는 텍스트 기반의 프로토콜로, 웹 브라우저와 서버 간에 데이터를 주고받기 위해 사용.
  • 요청과 응답:
    • HTTP 요청: 클라이언트에서 서버로 데이터를 요청할 때 사용. HTTP 메서드(GET, POST, PUT, DELETE)와 함께 요청이 이루어짐.
    • HTTP 응답: 서버가 클라이언트의 요청에 응답할 때 사용. 상태 코드(예: 200, 404)를 통해 요청이 성공했는지 여부를 알 수 있음.
  • 예제:
    • 요청: 클라이언트에서 서버로 "GET /users" 요청을 보내 사용자의 정보를 가져올 수 있음.
    • 응답: 서버는 "200 OK" 상태 코드와 함께 사용자의 정보를 JSON 형식으로 반환.

 

 

---

2.2. API (Application Programming Interface) (중요도🌟🌟🌟)

API는 소프트웨어 애플리케이션 간에 상호작용할 수 있도록 정의된 규칙과 방법을 의미. API를 통해 다른 애플리케이션이 특정 기능을 사용할 수 있도록 허용하며, 이를 통해 애플리케이션 간에 데이터나 서비스를 주고받을 수 있음.

예시:

• Google Maps API: 개발자들이 자신의 애플리케이션에 구글 지도를 임베드하고, 경로 검색, 장소 정보를 제공하는 기능을 사용할 수 있도록 하는 API.
• Twitter API: 개발자들이 트위터의 기능을 활용하여 트윗을 읽고, 작성하거나 특정 해시태그로 검색 가능.

API의 기본 구성:

• 요청(Request): API는 특정 요청을 받아 데이터를 처리. 요청은 클라이언트가 서버에 보낸 데이터.
• 응답(Response): 요청을 처리한 후 API는 서버에서 처리된 결과를 반환. 일반적으로 데이터는 JSON 또는 XML 형식으로 전달.

 

 

기본 동작 원리 :
1. 클라이언트가 API 서버에 요청을 보냄
2. 서버는 요청을 처리하고 데이터베이스에서 데이터를 가져오거나, 특정 기능을 수행한 뒤 응답을 반환
3. 클라이언트는 응답받은 데이터 활용하여 필요한 작업을 수행

 

 

 

---

2.3. RESTful API (중요도🌟🌟🌟)

RESTful API는 REST(Representational State Transfer)라는 아키텍처 스타일을 따르는 API를 의미.

REST는 클라이언트-서버 간에 데이터를 교환하는 방식 중 하나로, HTTP 프로토콜을 기반으로 동작.

RESTful API는 리소스를 URI로 정의하고, 이를 HTTP 메서드로 조작할 수 있도록 설계.

 

 

REST의 기본 개념:

1. 리소스(Resource): RESTful AP에서 다루는 기본 단위는 “리소스”. 예를 들어, 사용자 목록, 게시글, 상품 정도 등
2. HTTP 메서드: RESTful API는 HTTP 메서드를 사용하여 리소스를 조작. 주로 사영되는 메서드는 다음과 같음
   • GET: 리소스를 조회
   • POST: 새로운 리소스를 생성
   • PUT: 기존 리소스를 수정
   • DELETE: 리소스를 삭제

예시:

사용자 RESTful API

• GET /users: 모든 사용자 목록 조회
• GET /users/1: ID가 1인 사용자의 정보
• POST /users: 새로운 사용자 생성
• PUT /users/1: ID가 1인 사용자의 정보를 업데이트
• DELETE /users/1: ID가 1인 사용자를 삭제

 

RESTful API 특징:

1. 무상태성 (Statelessness): 각 요청은 독립적이며 요청 간의 상태가 저장되지 않음
2. URI 기반 리소스: RESTful API는 리소스를 URI로 표현
3. 다양한 포맷 지원: RESTful API는 JSON, XML 등 다양한 데이터 형식을 지원. 주로 JSON이 사용됨
4. 클라이언트-서버 구조: 클라이언트는 리소스를 요청하고, 서버는 리소스를 관리.

RESTful API 사용시 주의사항:

• 정확한 HTTP 메서드 사용: 리소스 조회는 GET, 데이터 생성은 POST, 업데이트는 PUT, 삭제는 DELETE와 같이 HTTP 메서드를 정확히 구분하여 사용
• 일관된 리소스 URL: API의 엔드포인트 설계는 명확하고 일관성이 있어야 함. 예를 들어, /users/123은 사용자를 나타내고, /product/456은 제품을 나타내도록 일관되게 구성
• 보안: API 사용 시 인증 및 권한 부여를 위해 OAuth, JWT 같은 인증 방식을 사용하여 데이터를 안전하게 보호

 

 

---

2.4. API 문서 (API Documentation) (중요도🌟🌟🌟)

API 문서는 개발자들이 API를 올바르게 사용하기 위해 작성된 설명서. API의 사용 방법, 엔드포인트, 요청 형식, 응답 형식, 오류 코드 등을 포함하여 API 사용에 필요한 모든 정보를 제공

 

주요 구성 요소:

1. 엔드포인트 (Endpoints): API에서 사용 가능한 URL 경로와 그에 맞는 HTTP 메서드가 설명
2. 요청 형식 (Request Format): 클라이언트가 요청할 때 사용해야 하는 데이터 형식, 헤더, 파라미터 등
3. 응답 형식 (Response Format): 서버가 클라이언트에게 반환하는 데이터 형식 (JSON, XML 등)
4. 상태 코드 (Status Codes): 요청이 성공했는지, 오류가 발생했는지를 나타내는 HTTP 상태 코드
   • 200 OK: 성공적인 요청
   • 404 Not Found: 요청한 리소스를 찾을 수 없음
   • 500 Internal Server Error: 서버에서 발생한 내부 오류
5. 예제 코드: 다양한 프로그래밍 언어에서 API를 사용하는 방법을 보여주는 예시 코드

 

예시:

사용자 관리 API 문서

• 엔드포인트:
  • GET /users: 사용자 목록을 반환
  • POST /users: 새로운 사용자를 생성
  • GET /users/{id}: 특정 사용자의 상세 정보를 반환
  • PUT /users/{id}: 특정 사용자의 정보를 수정
  • DELETE /users/{id}: 특정 사용자를 삭제

 

 

 

---

2.5. fetch API 소개 및 사용법 (중요도🌟🌟🌟)

• fetch API 개요:
  • 역할: fetch API는 네트워크 요청을 보내고, 그 결과를 처리하는 최신 자바스크립트 내장 함수. 이 API는 Promise를 반환하여 비동기 처리의 편리함을 제공.
  • 특징:
    • 비동기적 처리: fetch는 요청을 보내고 기다리지 않고 바로 다음 코드를 실행
    • 간단한 문법: fetch는 기존의 XMLHttpRequest보다 훨씬 간결하게 요청을 처리
    • Promise 기반: Promise를 반환하기 때문에 .then(), .catch()로 응답을 처리
    • fetch() 함수 반환:
      • Response 객체:
        • fetch() 함수가 반환하는 첫 번째 결과로 Response 객체를 나타냄
        • 서버로부터 받은 전체 HTTP 응답
        • HTTP 상태 코드, 헤더, 본문(body) 등을 포함
          • response.ok: 응답이 성공(상태 코드 200~209)이면 true를 반환
          • response.status: HTTP 상태 코드를 반환 (예: 200, 204)
          • response.header: 응답의 HTTP 헤더를 반환
          • response.body: 서버 응답의 본문을 나타내지만 아직 처리되지 않은 상태. 데이터를 읽으려면 body를 변환해야 함

 

• Data 객체:
  • response.json()은 서버 응답의 본문을 JSON 형태로 파싱한 데이터를 반환
  • 응답의 **본문(body)**만 추출한 값으로 서버에서 실제로 전달하려는 데이터
  • response.json()은 비동기적으로 동작하며, JSON 형식의 데이터를 자바스크립트 객체로 변환

 

• 기본 사용법:
  • GET 요청: 데이터를 가져올 때 사용.
  • POST 요청: 서버에 데이터를 전송할 때 사용.
• fetch API의 다양한 옵션:
  • 헤더 추가: 요청에 필요한 헤더 정보를 추가.
  • 메서드 지정: 요청 메서드를 지정 가능(기본값은 GET).
  • 바디 추가: POST 요청 시 데이터를 바디에 추가하여 전송.

 

 

• Promise와 함께 사용하기:
  • .then(): 성공적으로 응답을 받았을 때 호출.
  • .catch(): 요청이 실패했을 때 호출.
  • .finally(): 성공과 실패 여부에 관계없이 항상 실행되는 코드를 작성 가능.

 

 

 

 

---

2.6. XMLHttpRequest API 소개 및 사용법

• XMLHttpRequest API 개요:
  • 역할: fetch 이전에 서버와 비동기 통신을 하기 위해 사용된 오래된 방법.
  • 특징:
    • 콜백 기반: 비동기 요청을 처리할 때 콜백 함수를 사용
    • 복잡한 문법: fetch보다 많은 코드가 필요
    • 동기적 사용 가능: 비동기 외에도 동기적으로 요청을 처리