SUE 개발 블로그

타입스크립트는 자바스크립트의 확정판이라 할 수 있다. 자바스크립트를 더 안전하게 사용할 수 있게 타입 관련 기능들을 추가한 언어이기 때문. 자바스크립트는 변수를 선언하고 타입까지 지정하지 않는다. ( 변수의 타입을 프로그래머가 직접 정할 수 없기 때문 ) 타입스크립트는 변수 a,b 에게 number 라는 숫자타입을 갖게 정의시켰다. 이제 a,b 변수에는 숫자 값 이외에 넣을 수 없다. 와 비교할 때 parseInt( ) 안해도 되겠다 ! 위와 같이 타입스크립트는 자바스크립트에서 변수에 타입을 직접 지정할 수 있는 등 타입을 더 안전하게 사용할 수 있는 여러가지 기능들이 추가된 자바스크립트의 확장판이라고 할 수 있다. ( 자바스크립트의 모든 기본 문법들도 사용할 수 있다 ! ) 그런데 타입스크립트는 왜 배..

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..

논리연산자를 활용한 단락회로 평가 console.log(true && true); // 양쪽의 피연사자가 true 여야 true. 만약 앞이 false이면 뒤는 볼 필요가 없음. // 이렇게 피연산자 중에 뒤에 위치한 피연산자를 확인할 필요없는 것을 // "단락회로 평가" 라고 한다. console.log(true || false); // 둘중의 한 쪽만 true 여도 true // 앞에 값이 true가 되면 뒤에 값이 뭐가 오든 상관이없음. // "단락회로 평가" 가 이루어짐. (앞의 true만 보고 결과종료) console.log(!true); 응용하여 사용하기 (코드 뜯어보며 이해하기) const getName = (person) => { if (!person) { return "객체가 아닙니다."..