SUE 개발 블로그

Web Storage ? 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능 (HTML5부터 제공) 키와 값 쌍으로 데이터를 저장하며 키를 기반으로 데이터를 조회할 수 있으며 영구 저장소(LocalStorage)와 임시 저장소(SessionStorage)로 나누어 데이터 지속성을 구분해 각 환경에 맞는 선택을 할 수 있다. 하지만 사이트의 도메인 단위로 접근을 제한한다. A에서 저장한 데이터는 B에서 조회할 수 없다. Cookie ? 쿠키는 웹 서버가 클라이언트의 정보를 저장하기 위한 데이터 조각으로 사이트에서 어떤 사용자가 어떤 상품을 장바구니에 담았는지, 로그인을 유지하는지 등을 서버에 요청할 때 마다 서버로 전송된다. 쿠키는 브라우저마다 저장되며 다른..

class는 객체 지향 프로그래밍에서 사용되는 기본 개념으로 데이터와 해당 데이터를 처리하는 메서드를 포함하는 캡슐화된 코드 블록이다. 클래스는 객체를 만들기 위한 설계도 역할을 하며 클래스를 사용하면 객체를 만들 때 해당 객체에 포함될 속성과 동작을 사전에 정의한 다음 이를 기반으로 객체를 생성할 수 있다. 객체는 클래스에서 정의한 속성과 메서드를 상속하고 이를 활용하여 독립적인 동작 수행을 시킬 수 있다. class 모듈화 모듈(module)은 하나의 기능이 파일로 구성된 형태이다. 하나의 기능을 가진 함수나, 클래스 형태로 만들어 export로 내보낸 뒤 import로 받아서 사용할 수 있다. 이렇기에 길어지는 코드를 사용 기능별로 분리하여 관리하기 때문에 코드 가독성이 좋아지며 유지보수도 편해진다..

API ( Application Programming Interface ) 응용 프로그램 프로그래밍 인터페이스 응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. 레스토랑을 떠올리며 알아보자. 방문하는 손님이 음식을 먹으려면 4가지의 단계를 거쳐야한다. 위 과정은 웹사이트를 통해서 어떤 데이터 ( 정보 ) 를 보는 방식과 매우 유사하다. 크롬과 같은 웹 브라우저가 서버에 데이터를 요청하고 질의를 해서 데이터베이스에서 값을 꺼내와 응답을 받아 사용하는 것과 같기 때문이다. 노란 부분이 우리가 우선 개발할 부분으로 데이터 요청과 요청 데이터 전달을 우선으로 제대..

직관적인 비 동기 처리 코드 작성하기. Promise 를 더 쉽고 가독성 좋게 작성할 수 있는 async & await 를 알아보자. async // async function hello() { return "hello"; } async function helloAsync() { return "hello Async"; } console.log(hello()); console.log(helloAsync()); helloAsync 결과를 보면 Promise {} 이라 나온다. 무슨 뜻이냐면 Promise 객체를 그냥 출력하게 되면 그냥 정말 Promise 객체가 출력이 된다. helloAsync 함수에서는 Promise 를 return 하고 있다는 걸 확인할 수 있으니까 이것의 결과 값은 Promise 가 ..

콜백 지옥은 위와 같이 연속되는 비동기 함수들을 처리할 때 비동기 함수들의 결과 값을 사용하기 위해서 콜백이 계속 깊어지는 현상을 뜻한다. 이 콜백 함수를 해결할 수 있는 자바스크립트의 Promise 객체에 대해 알아보자. 자바스크립트의 비동기를 돕는 객체. Promise 객체를 이용하면 비동기 처리의 결과 값을 핸들링하는 코드를 비동기 함수로 부터 분리할 수 있다. 더 이상 비동기 처리 함수에 콜백을 줄지어 전달할 필요가 없어 쉽고 빠르고 직관적으로 비동기 처리를 만들 수 있다. 비동기로 동작하는 작업이 가질 수 있는 상태에 대해 미리 알아보자. Pending ( 대기상태 ) 대기상태로 현재 비동기 작업이 진행 중이거나 작업이 시작되지 않는 문제 발생 의미 Fulfilled ( 성공 ) 이행 또는 성공..

순서대로 실행하는 것(동기)과 그렇지 않은 것(비동기) 들 자바스크립트 엔진이 동작하는 원리를 파악해보자. 우리가 만약 세가지의 작업을 다 해야하는 상황. 각각의 작업은 TASK A, B, C 함수로 만들어 놓고 이 작업을 모두 순서에 상관없이 해야한다면? 프로그래밍된 코드를 계산해서 실행시키는 연산과정을 진행하는 일꾼을 쓰레드라고 한다. 이 과정은 코드 한줄 한줄마다 진행되며 스레드는 코드를 한줄 한줄 실행시켜주는 친구라고 생각하면된다. taskA를 작업하고 있다면 taskB를 작업하지 않고 A가 끝나야 B작업으로 넘어갈 수 있다. 이렇게 지시한 순서대로 작업하면서 앞에 작업이 끝나기를 기다렸다가 뒤에 작업을 하는 것을 동기적 방식이라고 한다. 그리고 스레드에서 작업 하나가 수행 중일 때 다른 작업을 ..

this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생설한 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야한다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 내..

배열과 객체를 한줄로 펼치는 방법 const cookie = { base: "cookie", madeIn: "korea" }; const chocoCookie = { base: "cookie", madeIn: "korea", toping: "chocochip" }; const blueberryCookie = { base: "cookie", madeIn: "korea", toping: "blueberry" }; const strawberryCookie = { base: "cookie", madeIn: "korea", toping: "strawberry" }; 객체로 종류별의 쿠키를 만들었다. base와 madeIn 이란 property는 계속 겹친다. 모든 쿠키 객체에 포함되고 계속 같은 값을 가진다. 그..

배열의 비구조화 할당 let arr = ["one", "two", "three"]; let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); 변수 세 개의 각각 값을 할당하려 하니까 arr 이라는 변수를 계속 사용해야하는 반복코드가 존재한다. 이 코드를 더 줄여주는 비 구조화 할당이란 것을 사용해 한 줄로 줄여보자. let arr = ["one", "two", "three"]; let [one, two, three] = arr; 대괄호를 이용하여 배열의 값을 순서대로 할당받아 사용할 수 있는 방법을 배열의 비 구조화 할당이라고 표현한다. 더 디테일하게는 배열의 기본변수 비 구조화 할당이라고도 한다. let [..

1. 주어진 문자열이 한식에 해당되는지 검수하는 함수 function isKoreanFood(food) { if (food === "불고기" || food === "비빔밥" || food === "떡볶이") { return true; } return false; } const food1 = isKoreanFood("불고기"); const food2 = isKoreanFood("파스타"); console.log(food1); // true console.log(food2); // false 를 좀 더 간략하게 includes를 응용한 조건문. function isKoreanFood(food) { if (["불고기", "떡볶이", "비빔밥"].includes(food)) { return true; } ret..