1. 동기 비동기개발을 하다 보면 동기(Synchronous)와 비동기(Asynchronous)라는 개념을 굉장히 자주 마주치게 됩니다. 동기(Synchronous)란, 요청한 작업이 완료될 때까지 다음 작업이 대기하는 방식을 의미합니다.쉽게 말해, 하나의 작업이 끝나야만 다음 작업이 시작되는 방식이죠. 이 방식은 순서가 보장되지만, 작업이 오래 걸릴 경우 전체 흐름이 멈춰버릴 수 있습니다.반대로, 비동기(Asynchronous)는 작업을 요청한 뒤, 그 결과를 기다리지 않고 다음 작업을 바로 실행하는 방식을 말합니다. 결과가 준비되면 나중에 통보를 받아 처리하기 때문에 긴 작업이 있어도 프로그램 전체가 멈추지 않고 계속 진행될 수 있죠. 다른 분야에서도 마찬가지지만, 특히 프론트 개발을 진행하다 보면..

1. 호이스팅(Hoisting)이란?호이스팅(Hoisting)은 자바스크립트에서 변수나 함수 선언이 코드 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 말합니다. 쉽게 말해, 코드를 위에서 아래로 읽는 것과는 다르게 자바스크립트 엔진이 먼저 변수와 함수의 선언부터 처리하는 것입니다.물론 실제로 코드가 끌어올려져서 동작하는 것은 아닙니다. 자바스크립트 parser가 내부적으로 끌어올려서 처리를 하기 때문에 끌어올려지는 것처럼 동작하는 현상이라고 정의합니다.  Q. JS에만 있는 건가요? Java나 Python, C언어에는 호이스팅이 없나요? 😮결론만 먼저 말하자면, 호이스팅이라는 이름의 동작이 없거나 구조적으로 차단되어 있습니다!호이스팅은 자바스크립트처럼 인터프리터 언어이자 함수..

개발을 하다 보면 오류가 발생하는 건 당연지사인 일이고, 오류 메시지는 꽤나 친절하게 오류가 발생한 원인을 알려주기 때문에 오류 메시지와 출력되는 스택 트레이스를 따라가면 어느 정도 오류는 원인을 찾기 마련입니다 🧐그러나 가끔 오류 메세지를 보고도 대체 어디서 발생한 녀석인고? 하게 되는 메시지들이 존재하는데..아래 오류 코드가 바로 그런 녀석들 중 하나입니다.Uncaught TypeError: Super expression must either be null or a functionSuper expression이...null이라고...? 이게 뭔 소리람이라는 반응이 이 오류 코드에 대한 저의 첫 반응이라는 건 비밀 아닌 비밀입니다..이 녀석은 class 키워드를 사용하여 ES6 클래스 기반으로 컴포넌..

1. 모듈이 필요한 이유소프트웨어가 커지면 발생하는 문제들소프트웨어는 시간이 지나면 지날수록 눈덩이처럼 커지고 복잡해집니다.초기에는 단순히 HTML, CSS, JavaScript 파일 한 두 개로 시작한 자그마한 웹사이트가, 수백 개 이상의 파일과 수십 개의 라이브러리가 함께 동작하는 거대한 시스템을 이루기도 합니다. 물론 몸집만 커지면 정말 좋겠지만, 이런저런 문제가 발생하는 건 필수 불가결한 일이죠.전역 스코프 오염여러개의 스크립트가 하나의 전역 객체에 변수나 함수를 추가하면 충돌이 발생할 수 있습니다.//utils1.jsfunction square(num) { return num * num;}//utils2.jsfunction square(num) { return num + num;} 라..

DOM. 프론트엔드에 뛰어들고 몸으로 부딪치면서 지금까지 많은 프로젝트를 경험해 왔습니다.그러면서 수많은 오류들을 만났고, 그중 지겹게도 만났던 것이 바로 이 DOM(Document Object Model)입니다.오류로도 만났고, 경고로도 참 많이 만나며 씩씩거렸던 기억들이 새록새록합니다ㅋㅋ....오늘은 이 DOM이 무엇인지에 대해 한번 알아보고자 합니다. 1. DOM(Document Object Model)이란 무엇일까저와 같이 DOM이 무엇인지 궁금하신 분이라면 작든 크든 각자 자바스크립트를 이용한 웹 페이지 경험이 있으실 거라고 생각합니다.현재는 다양한 프레임워크와 라이브러리가 나왔지만, 웹 페이지 개발의 기본은 HTML, CSS, JavaScript이죠.자 그럼 여기서 문제. HTML을 작성하면 ..