[JS] fetch와 REST API

01fetch 란1. fetch의 배경fetch가 나오기 전에는 AJAX를 사용하여 자바스크립트에서 데이터를 서버로 요청하고 받는 것이 어려웠습니다.AJAX(Asynchronous JavaScript And XML) : 전체 페이지를 새로 고침 하지 않고 필요한 데이터만 서버에서 비동기적으로 가져오는 기법입니다.XMLHttpRequest : 데이터를 요청하고 받아오는 객체인데, 복잡하고 불편한 점이 있었습니다.예를 들어, 콜백 함수를 사용해야 하고 코드가 길어지는 단점이 있었습니다. 2. fetch란?fetch는 AJAX의 대체로, 네트워크 요청을 보내고 정보를 받아오는 더 간편하고 효율적인 방법입니다.fetch는 Promise 기반이기 때문에, AJAX보다 간편하고 효율적으로 사용할 수 있습니다. ✅ ..

• format_list_bulleted JavaScript
• · 2025. 2. 21.
• textsms

[JS] async와 await

01async와 await 이란?Promise를 더 쉽게 사용할 수 있게 해주는 자바스크립트의 기능입니다.async는 함수 앞에 붙여서 비동기 함수로 만들고, await는 Promise가 처리될 때까지 기다리게 만듭니다.1. 비동기란?왜 비동기가 필요한지 비동기(Asynchronous)는 동시에 여러 작업을 처리할 수 있는 방식입니다.예를 들어, 우리가 어떤 작업을 시작했을 때 그 작업이 끝날 때까지 기다리지 않고 다른 일을 할 수 있게 해주는 방식이죠.   ✅ 왜 비동기가 필요한가요?응답성 유지: 비동기를 사용하면, 네트워크 요청 중에도 웹 페이지나 앱을 계속 사용할 수 있습니다.리소스 효율성: 기다리는 동안 다른 일을 처리할 수 있어 자원을 더 잘 활용할 수 있습니다.시간 절약: 긴 작업을 기다리는 ..

• format_list_bulleted JavaScript
• · 2025. 2. 20.
• textsms

[JS] 프로미스 (Promise)

01Promise자바스크립트에서 비동기 작업이 끝날 때, 그 결과를 알려주는 "약속"과 같은 역할의 오브젝트입니다.예를 들어, 어떤 일이 잘 처리되면 결과를 알려주고, 문제가 생기면 에러를 알려주는 방식이죠. 1. Promise의 흐름: 생성, 사용, 결과 처리 ✅ Producing Code (프로듀서 코드): Promise를 생성하는 코드입니다.즉, 우리가 약속을 만들고 그 약속이 끝날 때까지 기다리는 코드라고 할 수 있습니다.이 코드는 어떤 일이 완료되기를 기다리고, 완료되면 결과를 알려줄 resolve 또는 에러를 알려줄 reject를 호출합니다.  ✅ Consuming Code (컨슘 코드) : Consuming Code는 Promise를 사용하는 코드입니다.즉, Promise가 완료될 때까지 기..

• format_list_bulleted JavaScript
• · 2025. 2. 20.
• textsms

[JS] 콜백 (Callback)

01콜백 (Callback) 이란?자바스크립트는 비동기적으로 작동하며, 싱글 스레드에서 한 번에 하나의 작업만 처리할 수 있습니다.이때 콜백은 다른 함수가 실행을 마친 후 실행되는 함수입니다.콜백을 사용하면 비동기 작업이나 특정 작업이 끝난 후 결과를 받아서 다음 작업을 실행할 수 있습니다.  return과 Callback 은 다른 건가요?: 네 return과 콜백함수는 다른 개념입니다.  ✅ return- 함수에서 값을 반환하는 데 사용되는 키워드입니다.- 함수에서 값을 반환하는 키워드로, 함수 실행을 종료하고 값을 반환하여 다른 곳에서 사용할 수 있게 합니다.  ✅ 콜백 함수 (Callback)- 다른 함수에 인자로 전달되어 나중에 호출되는 함수입니다.- 콜백 함수는 다른 함수에 전달되어, 해당 함수..

• format_list_bulleted JavaScript
• · 2025. 2. 20.
• textsms

[JS] 동기와 비동기, 둘이 싸우면 누가 이길까?

01동기란동기란 여러 작업이 있을 때 이 작업들을 순서대로 한 번에 하나씩 처리하는 방식을 말합니다. 쉽게 말해, 앞에 있는 작업이 끝나야만 다음 작업을 시작할 수 있는 구조입니다.예를 들어, A작업, B작업, C작업이 있다고 가정해 보겠습니다. 동기 방식에서는 다음과 같은 순서로 작업이 진행됩니다:'' A작업 시작 -> A작업 종료 -> B작업 시작 -> B작업 종료 -> C작업 시작 -> C작업 종료 ''이 작업들을 실제로 실행하고 처리하는 역할을 하는 것이 바로 쓰레드(Thread)입니다.장점코드의 가독성이 높습니다. 순서대로 실행되기 때문에 로직의 흐름을 이해하기 쉽습니다. 단점작업 중 하나라도 오래 걸리면, 전체 프로그램이 멈춘 것처럼 보일 수 있습니다. 예를 들어, A작업이 5초 걸린다면, 그..

• format_list_bulleted JavaScript
• · 2025. 1. 23.
• textsms

[JS] 나를 위한 배열과 Date 메서드 컨닝페이퍼

01배열 조작 메서드1. push배열의 맨 뒤에 요소를 추가합니다.const arr = [1, 2, 3];arr.push(4);console.log(arr);// 출력결과: [1, 2, 3, 4] 2. pop배열의 마지막 요소를 제거하고 반환합니다.const arr = [1, 2, 3];const removed = arr.pop();console.log(arr);console.log(removed);// 출력결과: [1, 2]// 출력결과: 3 3. shift배열의 첫 번째 요소를 제거하고 반환합니다.shift는 원본 배열을 변경하므로, 성능이 중요한 경우 빈번히 사용하지 않는 것을 권장합니다.const arr = [1, 2, 3];const removed = arr.shift();console.log(..

• format_list_bulleted JavaScript
• · 2025. 1. 22.
• textsms

[JS] 정규표현식 (RegExp)

01정규표현식 (Regular expression)정규표현식이란 일정한 패턴(특정한 규칙)을 가진 문자열의 집합을 다루는 데 사용하는 형식언어(formal language)입니다. 자바스크립트 고유의 문법이 아닌 다양한 프로그래밍 언어에 지원되고 있습니다. 왜 사용하나요?텍스트 데이터를 효율적으로 사용하기 위해서는 필요한 텍스트와 불필요한 텍스트를 구분해야 합니다. 컴퓨터 입장에서는 모든 문자가 동일하기 때문에 필요/불필요를 가려낼 수 없습니다.그렇기에 사람이 자세하게 '00 형식,ㅁㅁ규칙을 가진 텍스트를 골라줘'라고 명령을 내려줘야 컴퓨터가 수행합니다. 예를 들어 한국의 주민등록번호는 '990101-1234567' 라는 고정된 규칙을 사용하고 있습니다.여기서 뒷자리 7개의 숫자 중 첫 숫자가 5~8 사..

• format_list_bulleted JavaScript
• · 2024. 6. 21.
• textsms

[JS] let,const 와 var

01var의 문제점01. 변수 중복 선언 허용var x = 1;var y = 2;// 변수 x 중복선언var x = 100;var y = 1;console.log(x); // 100console.log(y); // 1-  위 코드와 같이 변수 x와 y를 중복선언이나 재할당을 해도 에러가 없이 작동을 합니다. -  마지막에 할당된 값이 최종으로 변수의 값으로 저장됩니다. 02. 함수 레벨 스코프var는 block scope가 아닌 function scope단위 변수입니다.function counter(){ var i = 10; console.log(i); // 10 for(var i = 0; i -  위 코드에서 for문 안에서 var 키워드로 선언한 변수 i는 의도하지 않았더라도 전역변수..

• format_list_bulleted JavaScript
• · 2024. 5. 22.
• textsms