dev-course day23

2rlokr·2025년 4월 3일

TIL

dev-course

목록 보기

23/43

오늘 배운 것

REST API

REST API란 REST를 기반으로 만들어진 API를 의미한다.

REST (Representational State Transfer)

자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다.

웹의 아키텍처 스타일 중 하나로서, 웹(WEB)의 장점을 최대한 활용하는 방식으로 설계된 소프트웨어 아키텍처 원칙이다.
REST는 자원을 이름(URI)로 표현하고, HTTP 메서드를 통해서 자원을 조작하는 방식을 따르는 것이다.

즉, REST란

HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고,
HTTP Method(POST, GET, DELETE, PUT, PATCH 등)를 통해
해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미한다.

CRUD Operation이란?

CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.

REST API

REST 아키텍처 스타일을 따르는 API를 의미한다. 즉, HTTP 프로토콜을 기반으로 동작하고, 자원을 URI로 표현하며, HTTP 메서드를 사용하여 자원을 조작하는 방식의 API이다.

특징

URI는 동사보다는 명사를, 대문자보다는 소문자를 사용하여야 한다.
명사는 복수형으로 사용한다.
마지막에 슬래시를 포함하지 않는다.
언더바 대신 하이폰을 사용한다.
파일 확장자는 URI에 포함하지 않는다.
행위를 포함하지 않는다. (예를 들어, delete, get 등을 URI에 포함하지 않는다.)

RESTful

RESTful이란 REST의 원리를 따르는 시스템을 의미한다. REST API의 설계 규칙을 올바르게 지킨 시스템을 RESTful하다고 말할 수 있다.

JavaScript

웹 브라우저에서 실행되는 동적 프로그래밍 언어로, 웹 페이지에 상호작용과 동적인 기능을 부여하는 데 필수적인 역할을 한다.

기본 문법

JavaScript는 스크립트 언어(인터프리터 언어)이기 때문에 소스코드 자체를 바로 해석해서 실행할 수 있다. 또한 Java와는 달리 변수를 선언하거나 초기화할 때 데이터 타입을 강제할 필요도 없다.

변수

var a = 10;
var a = 40;
let b = 20;
const c = 30;

function example() {
    console.log(y);
    var y = 10;
    console.log(y);
}

example();

// undefined
// 10

var : var로 선언된 변수는 함수 스코프를 지나며, 블록 스코프는 지니지 않는다. 코드의 최상단으로 올라가는 호이스팅(hoisting)특성을 지닌다. 이로 인해 변수 선언이 다른 곳에 있어도 사용할 수 있다. 그러나 호이스팅은 단순히 변수 선언만 적용되기 때문에, 초기화 되지 않은 상태에서 접근하면 undefined가 할당되어있다. 재선언이 가능하다.

function example5() {
    if (true) {
        let y = 20;
    }
    console.log(y); 
}

example5();

// ReferenceError: y is not defined

let : let으로 선언된 변수는 블록 스코프를 가져, 변수가 선언된 블록 내에서만 사용 가능하게 된다. 재선언이 불가능하다.
const : 상수를 선언할 때 사용되며, 한 번 값이 할당되면 변경할 수 없다.

null, undefined, NaN

null

의도적으로 아무 값도 없음을 나타내기 위해 사용하는 값이다.

undefined

변수나 객체 속성에 값이 할당되지 않았을 때 자동으로 부여되는 원시 값이다. 또한, 함수에서 아무것도 반환하지 않으면 undefined가 반환된다.

NaN

숫자가 아닌 값(Not-a-Number)을 나타내는 특별한 숫자 값이다. 수학적 계산에서 결과가 숫자가 아니거나 정의되지 않은 연산의 결과로 나타낸다.

isNaN() 메소드를 사용하여 비교해야 한다.

비교 연산자

동등 연산자, ==

두 값을 비교하여 값이 같은지를 확인한다. 동등 연산자는 타입 변환을 수행하여 두 값을 비교하므로, 비교할 때 두 값의 타입이 다르더라도 타입 변환을 통해 값을 비교한다.

console.log(5 == '5'); // true, 문자열 '5'가 숫자 5로 변환되어 비교됨
console.log(0 == false); // true, false가 숫자 0으로 변환되어 비교됨
console.log(null == undefined); // true, null과 undefined는 동등하다고 간주됨

일치 연산자, ===

두 값을 비교할 때 타입까지 동일해야 true를 반환한다. 즉, 값과 타입이 모두 같아야만 true를 반환한다. 일치 연산자는 타입 변환을 수행하지 않으므로, 값과 타입이 정확히 일치해야 한다.

console.log(5 === '5'); // false, 숫자 5와 문자열 '5'는 타입이 다름
console.log(0 === false); // false, 숫자 0과 불리언 false는 타입이 다름
console.log(null === undefined); // false, null과 undefined는 서로 다른 타입임

부등 연산자, !=

두 값이 다른지 확인한다. 동등 연산자와 마찬가지로 타입 변환을 수행하여 값을 비교한다.

console.log(5 != '5'); // false, 문자열 '5'가 숫자 5로 변환되어 같다고 간주됨
console.log(0 != false); // false, false가 숫자 0으로 변환되어 같다고 간주됨
console.log(null != undefined); // false, null과 undefined는 서로 다른 타입으로 동등함

불일치 연산자, !==

두 값이 같지 않거나 타입이 다를 때 true를 반환한다. 일치 연산자와 마찬가지로 타입 변환을 수행하지 않는다.

console.log(5 !== '5'); // true, 숫자 5와 문자열 '5'는 타입이 다름
console.log(0 !== false); // true, 숫자 0과 불리언 false는 타입이 다름
console.log(null !== undefined); // true, null과 undefined는 타입이 다름

함수(Function)

코드 블록을 정의하고 이를 호출하여 특정 작업을 수행하도록 하는 구조이다. Java와는 다르게 함수 및 메서드 형태 모두 구현이 가능하다. JavaScript에서 함수는 1급 객체(first-class object)로 취급된다. 이는 함수가 변수에 할당될 수 있고, 인수로 전달되며, 반환값으로 사용될 수 있다는 것을 의미한다.

function

// 함수 정의
function sayHello() {
	console.log("Hello World!");
}

// 함수 호출
sayHello(); // Hello World!

함수 표현식

변수를 통하여 함수를 정의하는 방법이다. 함수 표현식은 익명 함수 또는 이름이 있는 함수가 있다.

function func() {
	console.log("Hello World!");
}

// 익명 함수
const sayHello1 = function() {
	console.log("Hello World!");
}

const sayHello2 = func;

const actions = {
  greet:sayHello1,
  eat:function(food) {console.log(`eat ${food}`)};
}

actions.greet(); // Hello World!
actions.eat("mango"); // eat mango

sayHello1(); // Hello World!
sayHello2(); // Hello World!

화살표 함수

화살표 함수는 ES6에서 도입된 함수 정의 방법으로, 더 간결한 문법을 제공한다. 화살표 함수는 function 키워드 대신 => 연산자를 사용하여 함수를 정의한다.

const sayHello = () => console.log("Hello World!");

sayHello(); // Hello World!

즉시 실행 함수

즉시 실행 함수는 정의되자마자 바로 실행되는 함수이다. 함수 표현식과 소괄호를 사용하여 정의한다.

(function() {
	console.log("Hello World!");
})(); // Hello World!

고차 함수

다른 함수를 인자로 받거나 혹은 함수를 반환하는 함수를 의미한다.

function func1(fn, val) {
	return fn(val);
}

const result = func1(num => num * num, 5);
console.log(result); // 25

클로저 (Closure)

클로저는 함수와 그 함수가 선언될 때의 스코프를 기억하는 기능이다. 클로저를 통해 함수는 자신의 외부 함수의 변수에 접근할 수 있으며, 이 변수들은 함수가 실행된 후에도 유지된다. 즉, 클로저는 함수가 자신의 스코프 외부에서 정의된 변수에 접근할 수 있도록 해준다.

function createCounter() {
    let count = 0;
    return function() {
        count += 1;
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2 ; count 값이 유지된다.

클로저는 외부 함수의 변수들을 기억하므로, 많은 클로저를 생성하면 메모리 사용량이 증가할 수 있다.

객체

JavaScript에서 객체(Object)는 다양한 속성과 메서드를 담을 수 있는 중요한 데이터 구조이다. 객체는 키-값쌍의 집합으로 이루어져 있다.

const myObj = {
	username: "user1",
	password: "1234",
	level: 50,
	isAdmin: false
}

console.log(myObj.username); // user1
console.log(myObj.level); // 50

JSON (JavaScript Object Notation)

JSON은 데이터를 저장하고 전송하기 위해 사용되는 경량의 데이터 교환 형식이다. 기본적으로 텍스트 기반의 데이터 표현 방식이다. JSON은 주로 웹 애플리케이션에서 서버와 클라이언트 간에 데이터를 교환하는 데 사용된다.

이벤트(Event)

브라우저를 이용하는 사용자가 웹 페이지와 상호작용할 때 발생하는 여러 가지 행동들을 이벤트라고 한다. 예를 들어, 마우스 이동, 키보드 타이핑, 마우스 클릭 등이 모두 이벤트이다. 이벤트도 객체로보고 다룰 수 있다.

이벤트 전파 (Event Propagation)

이벤트가 요소들을 타고 전달되는 것을 말한다.

<div id="parent">
  <div id="child">
    <button id="button">Click me</button>
  </div>
</div>

button을 클릭했을 때, div(child), div(parent)에게도 이벤트가 전달되어 또 다른 지점에서 이벤트가 있을 수 있다.

DOM (Document)

DOM(Document Object Model)은 웹 페이지의 문서 구조를 객체 모델로 표현한 것이다. DOM은 문서의 각 요소를 객체로 나타내며, 이 객체를 통해 문서의 내용, 구조, 스타일 등을 동적으로 수정하고 접근할 수 있다. DOM은 HTML, XML, SVG 등의 문서에 적용될 수 있다. 이벤트에 대한 동작으로 DOM을 조작할 수 있다.

구조

DOM은 문서의 계층적 구조를 표현하며, 문서의 각 요소를 트리 형태로 나타낸다. 이 트리 구조에서 각 노드는 DOM의 요소, 속성, 텍스트 등의 구성 요소를 나타낸다.

문서 노드 (Document Node): 최상위 노드(Node)로, 문서 전체를 대표한다.
엘리먼트 노드 (Element Node): HTML 태그를 나타냅니다. <div>, <p>, <span> 등.
속성 노드 (Attribute Node): HTML 요소의 속성을 나타낸다. id, class, src 등.
텍스트 노드 (Text Node): HTML 요소의 텍스트 내용을 나타낸다.

getElementById()

문서에서 특정 ID를 가진 요소(HTML Tag)를 선택한다.

const el = document.getElementById('id');
console.log(el.innerText);

getElementByClassName()

문서에서 특정 클래스 이름을 가진 모든 요소를 선택한다. 이 메서드는 HTMLCollection을 반환한다.

const els = document.getElementsByClassName('myClass');
console.log(els[0].innerText);

querySelector()

CSS 선택자를 사용하여 문서에서 첫 번째로 일치하는 요소를 선택한다. 단일 요소를 반환한다.

const node = document.querySelector('.class');
console.log(node.innerText);

querySelectorAll()

CSS 선택자를 사용하여 문서에서 일치하는 모든 요소를 선택한다. NodeList를 반환한다.

const nodeList = document.querySelectorAll('.class');
console.log(allElements[0].textContent);

createElement()

새로운 요소(HTML Tag)를 생성한다.

const el = document.createElement('div');
newElement.innerText = 'div 태그 입니다!';

document.body.appendChild(newElement);

addEventListener()

선택된 요소에 이벤트 리스너를 추가한다.

const btn = document.getElementById('custom-btn');

btn.addEventListener('click', function() {
  console.log("버튼 클릭!");
});

여기서 이벤트 리스너는 매개변수로 이벤트 객체를 받을 수도 있다.

const btn = document.getElementById('custom-btn');

btn.addEventListener('click', function(event) {
	console.log(event.type);
	event.preventDefault();
  	// 이벤트를 멈추는 함수이다. 이벤트가 더이상 전달되지 않고 멈춘다.
  console.log("버튼 클릭!");
});

fetch API

fetch API는 네트워크 요청을 수행하기 위한 방법을 제공한다. fetch API는 비동기적으로 HTTP 요청을 보내고 응답을 처리할 수 있게 해주는 인터페이스로서, 이전에 사용하던 XMLHttpRequest 객체에 비해 사용이 간편하고 유연한 기능을 제공한다. fetch API를 사용하면 GET, POST, PUT, DELETE와 같은 다양한 HTTP 메서드를 사용하여 서버와 상호작용할 수 있다.

동기(Synchronous)와 비동기(Asynchronous)

동기

동기 방식은 컴퓨터 시스템이나 프로그래밍에서 작업이나 프로세스가 서로의 완료를 기다리면서 진행되는 방식이다. 이 방식에서는 하나의 작업이 완료될 때까지 다른 작업이 시작되지 않으며, 모든 작업이 순차적으로 처리된다. 이렇게 현재 작업이 완료될 때까지 다른 작업이 시작되지 않는 것을 블로킹(Blocking)이라고 부른다.

특징

구현이 간단하고 직관적이다.
코드 흐름이 순차적이어서 디버깅과 유지보수가 용이하다.
작업이 길어질 경우, 응답성이 떨어질 수 있다.
작업들이 순차적으로 실행되며, 각 작업이 완료될 때까지 다음 작업이 시작되지 않는다.
단순한 작업이나 작은 규모의 시스템에서 유리할 수 있다.

비동기

비동기 방식은 컴퓨터 시스템이나 프로그래밍에서 작업이나 프로세스가 서로의 완료를 기다리지 않고 동시에 독립적으로 진행되는 방식이다. 이 방식에서는 하나의 작업이 완료되지 않았더라도 다른 작업이 계속해서 실행될 수 있으며, 작업들 간의 순서나 타이밍에 대한 의존성이 없다.

특징

시스템 자원을 더 효율적으로 활용할 수 있다.
여러 작업이 동시에 진행될 수 있어 컴퓨터 자원을 최대한 활용한다.
서버는 클라이언트의 요청을 처리하는 동안 다른 요청을 동시에 처리할 수 있다.
구현이 복잡할 수 있으며, 코드의 흐름이 비선형적이어서 디버깅과 유지보수가 어려울 수 있다.
여러 비동기 작업이 서로 의존할 경우, 작업 간의 데이터 동기화와 오류 처리에 신경 써야 한다.

Promise

fetch API는 HTTP 요청을 비동기적으로 수행한다. 이를 위해 사용하는 객체가 Promise이다. Promise 객체는 비동기 작업이 완료되었을 때의 결과를 나타내는 객체이다. fetch가 반환하는 Promise 객체는 네트워크 요청의 상태를 처리하고, 요청이 완료된 후 응답을 처리하는 방법을 제공한다.

Status

Promise 객체는 세 가지 주요 상태를 가지며, 이 상태에 따라 비동기 작업의 결과를 나타낸다.

Pending(대기)
Promise가 생성된 초기 상태로, 비동기 작업이 아직 완료되지 않았거나 결과가 아직 확정되지 않은 상태이다. 작업이 진행 중일 때 Promise는 이 상태를 유지한다.

Fulfilled(이행)
비동기 작업이 성공적으로 완료되어, Promise가 결과값을 가진 상태이다. 이 상태로 변경되면, then() 메서드에 전달된 성공 콜백 함수가 호출된다. 비동기 작업이 성공적으로 끝났음을 나타내며, Promise는 Pending->Fulfilled로 되었을 때 더 이상 상태가 변경되지 않는다.

Rejected(거절)
비동기 작업이 실패하거나 에러가 발생하여, Promise가 실패 상태를 나타내는 상태이다. 이 상태로 변경되면, catch() 메서드에 전달된 에러 처리 콜백 함수가 호출된다. 비동기 작업에서 에러가 발생했음을 나타내며, Promise는 이 상태에 도달하면 더 이상 상태가 변경되지 않는다.

fetch()

fetch API는 fetch()를 호출함으로써 사용할 수 있다.

fetch(url, option)
	.then(onFulfilled => {...})
    .catch(onRejected => {...})
;

url : 요청을 보내고자 하는 url
option : 요청에 대한 메타데이터
- 옵션은 객체(Object) 형식으로 보낼 수 있으며, 요청의 본문(body)부분은 일반적으로 JSON.stingify()를 이용하여 객체를 문자열화하여 포함시킨다.

{
	method: HTTP 메서드,
	headers: {
		헤더 키: 헤더 값,
	},
	body: JSON.stringify(본문 값),
	[credentials: 쿠키 및 인증정보 포함 여부]
}

then()

Promise가 이행(fulfilled)되었을 때 호출되는 콜백 함수를 등록한다. 첫번째 매개변수는 성공적인 결과를 처리하는 함수, 두번째 매개변수는 실패한 경우의 에러를 처리하는 함수이다. 일반적으로 성공을 처리하기 위한 콜백함수를 할당하여 사용한다.

fetch(url)
	.then( (resp) => {
  		...
});

fetch가 반환한 Promise 객체는 메서드 체이닝이 가능하여, 여러 비동기 작업을 순차적으로 수행할 수 있다. 각 then() 호출은 새로운 Promise를 반환한다.

fetch(url)
	.then( (resp) => {
		return ...
	})
	.then(
		(data) => {
			...
		}
	);

fetch()에서는 우선 Response 객체를 반환한다. 이 객체는 서버의 응답을 나타내며, 응답코드, 응답 본문 등의 내용을 포함하고 있다. 따라서, 첫 번째 then()에서는 이를 처리하여 본문을 json()을 통해서 객체 형식으로 파싱하고, 그 결과를 두 번째 then() 구문에서 처리한다. json() 이외에도 blob(), formData(), text() 등 여러 형식으로 반환 할 수 있다.

fetch(url)
	.then( (resp) => {
		return resp.json();
	})
	.then(
		(data) => {
			...
		}
	);

catch()

Promise가 거부(rejected)되었을 때 호출되는 콜백 함수를 등록한다. 오류가 발생했을 때 발생한 오류를 처리하는 데 사용된다.

finally()

Promise가 이행되거나 거부된 후에 호출되는 콜백 함수를 등록한다. finally는 결과와 상관없이 항상 실행된다.

fetch(url)
	.then(resp => ...)
	.catch( err => ...)
	.finally(() => ...);

JavaScript 실습

class User {
  constructor() {
    this._username = "user1"
  }
}

_ 언더바를 붙이면 private으로 선언하는 것이다.
constructor()는 생성자로, 위와 같이 선언해놓으면, User 객체에 username을 따로 선언해준 적 없지만, 생성자로 만들어져서 접근이 가능하다.

느낀 점

오늘은 자바 스크립트와 REST API에 대해 배웠다. 점점 재미있어지고 이것저것 연결해서 하니까 신기하기도 하고 예전에 궁금했던 것들이 배우면서 좀 퍼즐 맞추기처럼 아! 이거구나 ~! 하면서 보이는 것도 있다. 약이 좀 세고, 잠오게 만들어서 그런지 점심 먹고 바로는 조금 피곤쓰했지만, 바로 일어나서 들었다 ㅋㅋㅋ 자바 스크립트의 fetch API는 사실 어떻게 쓰는 건지 실습(?)을 해야 더 와닿을 것 같다. 이론만 봤을 때는 이해는 되지만 이걸 어떻게 언제 쓰는 건지 잘 모르겠다.

오늘은 나의 생일이었다 ! 그래서 맛난 걸 너무 많이 먹었더니 배가 너무 부르다.. ㅎ TIL 정리하고 오늘 REST API 실습한 거 따라 만들어보고... 자야겠다 ! 악 할 게 너무 많다 !! 스터디도.. 알고리즘 문제도 풀어야 하는데.. 월요일 아팠던 그거 하나로 되게 일주일이 뒤틀린(?) 기분이다. 굉장히 바빠졌어.. 후 ㅠ 그러고 아직도 컨디션 회복이 안돼서 더 힘든 듯 흑 ㅠ 주말에 가서 주사 한 방 더 맞아야겠다 호호호 빠른 회복을 위하여~!!!! 짠!

2rlokr

이전 포스트

dev-course day22

다음 포스트

dev-course day23

dev-course

오늘 배운 것

REST API

REST (Representational State Transfer)

CRUD Operation이란?

REST API

RESTful

JavaScript

기본 문법

변수

null, undefined, NaN

null

undefined

NaN

비교 연산자

동등 연산자, ==

일치 연산자, ===

부등 연산자, !=

불일치 연산자, !==

함수(Function)

function

함수 표현식

화살표 함수

즉시 실행 함수

고차 함수

클로저 (Closure)

객체

JSON (JavaScript Object Notation)

이벤트(Event)

이벤트 전파 (Event Propagation)

DOM (Document)

구조

getElementById()

getElementByClassName()

querySelector()

querySelectorAll()

createElement()

addEventListener()

fetch API

동기(Synchronous)와 비동기(Asynchronous)

동기

비동기

Promise

Status

fetch()

then()

catch()

finally()

JavaScript 실습

느낀 점

dev-course day22

dev-course day24

0개의 댓글