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의 기본 개념:
- 리소스(Resource): RESTful AP에서 다루는 기본 단위는 “리소스”. 예를 들어, 사용자 목록, 게시글, 상품 정도 등
- 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 특징:
- 무상태성 (Statelessness): 각 요청은 독립적이며 요청 간의 상태가 저장되지 않음
- URI 기반 리소스: RESTful API는 리소스를 URI로 표현
- 다양한 포맷 지원: RESTful API는 JSON, XML 등 다양한 데이터 형식을 지원. 주로 JSON이 사용됨
- 클라이언트-서버 구조: 클라이언트는 리소스를 요청하고, 서버는 리소스를 관리.
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 사용에 필요한 모든 정보를 제공
주요 구성 요소:
- 엔드포인트 (Endpoints): API에서 사용 가능한 URL 경로와 그에 맞는 HTTP 메서드가 설명
- 요청 형식 (Request Format): 클라이언트가 요청할 때 사용해야 하는 데이터 형식, 헤더, 파라미터 등
- 응답 형식 (Response Format): 서버가 클라이언트에게 반환하는 데이터 형식 (JSON, XML 등)
- 상태 코드 (Status Codes): 요청이 성공했는지, 오류가 발생했는지를 나타내는 HTTP 상태 코드
- 200 OK: 성공적인 요청
- 404 Not Found: 요청한 리소스를 찾을 수 없음
- 500 Internal Server Error: 서버에서 발생한 내부 오류
- 예제 코드: 다양한 프로그래밍 언어에서 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를 변환해야 함
- Response 객체:
- 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보다 많은 코드가 필요
- 동기적 사용 가능: 비동기 외에도 동기적으로 요청을 처리
'특강' 카테고리의 다른 글
| 웹 심화 이해 (0) | 2024.08.14 |
|---|---|
| 웹 기본 이해 (0) | 2024.08.12 |
| 기술면접_CS, SQL 내용정리 (0) | 2024.08.08 |
| CS 특강(소프트웨어 설계) (0) | 2024.07.26 |
| CS 특강(컴퓨터 구조와 운영체계) (0) | 2024.07.25 |
