쏘 개발로그

구조 분해 할당이란 말 그대로 구조를 분해해서 개별 변수에 즉시 할당하는 것을 의미한다.오늘은 배열 구조 분해 할당과 객체 구조 분해 할당의 기본 개념을 간단하게 정리해보자. 1. 배열 구조 분해 할당배열 구조 분해 할당을 이해하기 전에, 우리가 기존에 배열 값을 변수에 할당하던 방식을 먼저 떠올려보자.const arr = [10, 20, 30];const a = arr[0];const b = arr[1];const c = arr[2]; 이 방식은 배열의 길이가 길어질수록 코드가 금방 지저분해진다는 단점이 있었다.또한, 어떤 값이 어떤 변수에 들어있는지를 한눈에 파악하기도 쉽지 않다.이러한 반복적이고 장황한 코드를 줄이기 위해 등장한 문법이 바로 구조 분해 할당이다. 1.1. 배열 구조 분해 할당..

사실 원래는 구조 분해 할당에 대한 글을 작성하려 했는데 ..!!배열 구조 분해 할당 코드가 바벨에서 어떻게 트랜스파일 되는지에 대한 설명을 작성하다가 문득 '바벨이 정확히 뭐지?' 라는 궁금증이 생겨서 이거부터 정리하고 가려고 글의 주제를 바꿨다 😅 프론트엔드 개발을 한다면 바벨이라는 단어는 무조건 한 번쯤은 들어봤을 것이다.심지어 설정도 해봤을 텐데, 막상 바벨이 뭔지 설명해보라 하면 입이 잘 움직이지 않는다 .. (┬┬﹏┬┬) 따라서 이번 글에서는 바벨이 뭔지 물어봤을 때 간략하게나마 답할 수 있게 !! 설정을 할 때 뭔지는 알고 설정할 수 있게 !! 바벨에 대해 정리를 해보고자 한다. 1. 바벨웹 개발을 처음 시작하며 기술 블로그들을 봤을 때, "이건 바벨로 트랜스파일돼서 그래요 ㅎㅎ", ..

앞선 글에서 이벤트 루프는 콜스택이 비면 태스크 큐에 있는 것들 중에서 가장 오래된 것 부터 실행을 시작한다고 했었다. [JavaScript] 이벤트 루프 (Event Loop)이벤트 루프는 '자바스크립트는 싱글 스레드인데도 어떻게 비동기 작업을 처리하는가'를 설명하는 핵심 메커니즘이다.오늘은 이 이벤트 루프에 대해 하나씩 알아보자. 1. 이벤트 루프이벤트 루kssossok.tistory.com 그런데 사실 위에서 언급한 태스크 큐 말고도 마이크로 태스크 큐라는 게 있다.따라서 이벤트 루프의 규칙을 더 정확히 정정하자면 "콜스택이 비면, 마이크로 태스크 큐를 먼저 비우고, 마이크로 태스크 큐도 비었다면 태스크 큐를 비우기 시작한다"고 봐야 한다. 그럼 오늘은 태스크 큐와 마이크로 태스크 큐가 각각 무엇인..

이벤트 루프는 '자바스크립트는 싱글 스레드인데도 어떻게 비동기 작업을 처리하는가'를 설명하는 핵심 메커니즘이다.오늘은 이 이벤트 루프에 대해 하나씩 알아보자. 1. 이벤트 루프이벤트 루프는 지금 실행 중인 코드가 끝났는지(= 콜스택이 비었는지)를 기준으로, 실행할 수 있는 다음 작업이 있다면 그것을 실행하도록 연결해주는 메커니즘이다. 여기서 핵심 포인트는 3가지이다.이벤트 루프는 코드를 실행하지 않는다.실제로 코드를 실행하는 건 자바스크립트 엔진이고, 이벤트 루프는 실행할 차례를 조율하는 역할만을 담당한다.이벤트 루프는 콜스택을 기준으로 판단한다.JS에서 지금 바쁜지, 한가한지를 판단하는 기준은 오직 "콜스택이 비어 있는가?" 뿐이다.이 모든 판단은 단일 스레드에서 일어난다.코드 실행이나 콜스택이 ..

요즘처럼 멀티 스레드와 병렬 처리가 당연하게 여겨지는 시대에 싱글 스레드를 사용한다고 하면, '왜 굳이 싱글 스레드를 사용하지?' 라는 의문이 들기 마련이다.나 또한 처음에 "JS는 싱글 스레드다"라는 말을 들었을 땐 의문이 들었다. 따라서 오늘은 JS가 싱글 스레드를 선택한 이유를 함께 알아보자.(프로세스와 스레드에 대한 개념은 아래의 글을 참고하면 된다.) [CS] 프로세스와 스레드1. 프로세스 (Process)1.1. 프로세스란운영체제 관점에서 프로세스란 실행 중인 프로그램의 인스턴스이다.익숙한 문장이겠지만 ,,ㅎㅎ ! 중요한 건 "실행 중"이라는 말이다. 참고로, 프로그램은 디스kssossok.tistory.com 1. 역사적 이유요즘 우리가 JS를 사용하는 상황을 생각해 보면, 대규모 S..

1. 동기 (synchronous)1.1. 콜스택 관점에서 보는 동기JS 코드는 기본적으로 위에서 아래로 작성된 순서에 따라 실행되며, 실제 실행 시점과 순서는 콜스택(call stack)에 의해 관리된다. 콜스택이란수행해야 할 코드나 함수를 순차적으로 담아두는 스택 그럼 콜스택 관점으로 본다면, 동기란 함수 호출이 완전히 끝나서(return) 스택에서 빠질 때까지 다음 작업을 진행하지 않는 방식이다.즉, 현재 실행 흐름이 끝날 때까지 다음으로 못 넘어가는 구조라 보면 된다. 예시를 통해 확인해보자.function a() { console.log("a start"); b(); console.log("a end");}function b() { console.log("b");}a();console...

클로저는 JS를 공부할 때 반드시 한 번은 제대로 짚어야 하는 부분이다. 아래의 문서를 보면, 클로저란 "어휘적 환경에 대한 참조와 함께 묶인 함수의 조합"이라고 설명한다. 클로저 - JavaScript | MDN developer.mozilla.org 그러나 이 말만 들어서는 어휘적 환경이 뭔지, 그래서 클로저가 왜 중요한건지 바로 파악하기가 힘들다.그리고, 이 상태로 클로저를 콜백이나 비동기에서 마주치기 시작하면 그때부턴 .. ㅎㅎ.. 😵‍💫게다가 리액트까지 더해지면, '왜 setTimeout 안에서 state가 최신이 아니지?', '왜 상태가 이전 값으로 고정되지?' 등의 질문에 마주하며 혼란속에 빠지게 된다 ..🤧 그래서 이번 글에서는 아래의 순서로 클로저를 확실히 이해하고 넘어가고자 한다...

1. 인스턴스 메서드인스턴스 메서드는 말 그대로 인스턴스(= new로 만든 객체)가 호출해서 사용하는 메서드이다. 1.1. 예시앞선 글에서 봤던 예시를 그대로 가져와서 사용해보자. [JavaScript] 프로토타입과 클래스JS를 공부하다 보면 'JS는 프로토타입 기반이야', '클래스는 프로토타입 문법을 보기 좋게 만든 거야' 라는 설명을 듣게 된다.근데 난 처음 듣는 입장에서는 둘 다 너무 추상적이라서 '그래서 뭐kssossok.tistory.com class Person { constructor(name) { this.name = name; } sayHello() { console.log("hello " + this.name); }}const p = new Person("ssoss..

JS를 공부하다 보면 'JS는 프로토타입 기반이야', '클래스는 프로토타입 문법을 보기 좋게 만든 거야' 라는 설명을 듣게 된다.근데 난 처음 듣는 입장에서는 둘 다 너무 추상적이라서 '그래서 뭐 어떻게 됐단 거지 ?' 싶었다 ..ㅎㅎ.. 따라서 오늘은 아래의 내용들을 하나씩 차근차근 정리해보려고 한다.프로토타입이 뭔지, 왜 존재하는 건지프로토타입이 어떻게 동작하는지class가 왜 문법 설탕이라 불리는지 1. 프로토타입이란결론부터 말하자면, 프로토타입은 객체가 공통으로 물려 받는 기능 저장소라 보면 된다. 조금 더 자세히 설명하면, JS에서 어떤 객체가 특정 속성이나 메서드를 찾을 때, 그 객체 안에 없다면 그 다음 후보로서 참고하는 객체가 있는데, 여기서 그 다음 후보 역할을 하는 게 프로토타입이..

JS 공부를 하다 보면 뭔가 이상한(?) 코드를 종종 보게 된다.(function() { console.log("hello!");})(); 난 처음 보고 '어차피 함수를 만들자마자 바로 실행할 거면 그냥 코드로 쓰면 되지 않나 ..?' 라는 생각이 들었었다. 따라서 이번 글에서는 즉시 실행 함수가 무엇인지와 왜 이런게 필요한지에 대해서 다뤄보고자 한다. 1. 즉시 실행 함수 (IIFE)즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 정의하자마자 바로 실행되는 함수를 의미한다. 기본적인 함수 형태는 인트로에서 봤던 것과 동일하다.(function () { console.log("hello");})(); 또는 화살표 함수로도 표현할 수 있다.(..