초기 웹은 문서 교환이 목적이었다. 오직 HTML만 존재했고, CSS와 JS는 존재하지도 않았다. HTML 문서를 주고 받으며 브라우저를 통해 렌더링했다. 또한 form 요소를 통한 get, post만 존재했다. (혹은 a 요소를 이용해 새로운 링크로 요청을 보내 데이터를 가져오는 형식이었다.) 즉, 요청을 주고 받는다면 HTML 문서 전체를 주고 받아 처음부터 끝까지 다시 렌더링하는 방식이었다.그래서 form의 기본 동작이 reload 였던 것이었다. 하지만 이후 "필요한 부분만 데이터를 가져와서 반영" 하기를 원하기 시작했다.이를 위해 아주 간단한 스크립트 언어였던 자바스크립트를 이용하여 데이터를 주고 받을 수 있지 않을까 하는 아이디어가 나왔다.이를 위해 비동기 처리라는 개념이 나왔고, AJAX가 ..

관련 있는 데이터와 함수들을 모아 하나의 파일로 묶은 것을 모듈이라고 하며, 소프트웨어 개발에서 애플리케이션을 여러 개의 독립적인 "모듈" 단위로 분할하고, 이를 재사용 가능하게 관리하는 것을 모듈 시스템이라고 부릅니다. 어플리케이션의 코드는 방대한데, 이를 하나의 파일로 관리해야만 한다면 유지보수가 굉장히 난해해질겁니다.이를 개선하기 위해 나온 아이디어가 모듈시스템이라고 생각해도 좋습니다. 이런 아이디어에서 나온 개념이다보니, 모듈은 모듈별로 분리되는 Scope를 가집니다.(그렇다면 css도 모듈로 뽑아낼 수 있을까요? https://ocahs.tistory.com/40 에 정답이 있으니 궁금한 분은 확인해보세요) 오늘은 자바스크립트의 2가지 모듈시스템인 ESM과 CJS에 대해 간단히 알아보도록 하겠습..

특정 사건을 이벤트라고 합니다. 브라우저는 처리해야할 특정 사건이 생기면 이벤트를 발생시킵니다. 예를 들어, 클릭, 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킵니다. 이때, 이벤트가 발생되었을 때 호출될 함수를 이벤트 핸들러라고 하고,브라우저에 이벤트 핸들러의 실행을 위임하는 것을 이벤트 핸들러 등록이라고 합니다. Node.js 환경에서는 이벤트가 존재하지 않고, 오직 브라우저 환경에서만 이벤트가 존재하므로이벤트는 자바스크립트의 범용적 개념이라고 보기는 어렵습니다. 하지만 웹 개발자라면 반드시 알아야하는 개념이죠.(브라우저를 사용하니까요) 오늘은 웹 개발에서 빠질 수 없는 이벤트에 대해 알아보는 시간을 갖겠습니다. 이벤트 드리븐 프로그래밍 (Even..

자바스크립트는 프로토타입 기반 객체 지향 언어입니다. 하지만 클래스 기반 객체 지향 언어에 익숙한 사용자들에게는 프로토타입이 낯설었고, 이를 위해 새로운 객체 생성 메커니즘으로 자바스크립트에서도 ES6부터 클래스를 지원해주기 시작했습니다. 그렇다면 ES6부터 지원해주는 클래스는 단지 프로토타입의 문법적 설탕(기존에 존재하는 문법을 더욱 편리하고 직관적으로 만든 것)일까요? 그렇지는 않습니다. 클래스와 생성자 함수는 둘 다 인스턴스를 생성하기는 하지만, 클래스는 생성자 함수보다 더욱 엄격하며 몇가지 추가적인 기능들을 제공하기도 합니다. 따라서 문법적 설탕이라기보다는 새로운 객체 생성 메커니즘으로 보는게 더욱 옳습니다.오늘은 자바스크립트의 클래스에 대해 알아봅시다.참고로, 클래스와 생성자 함수는 구분해서..

자바스크립트는 프로토타입 기반 객체 지향 프로그래밍 언어입니다. (cf. 함수형 프로그래밍 언어이기도 하죠)그렇다면 프로토타입은 무엇일까요? 프로토타입은 즉 '전신' 이라는 의미이기도 합니다. 즉, 후속 제품들의 부모 역할이라는 뜻이죠.자바스크립트에서의 프로토타입은 '객체' 에 대한 프로토타입을 의미합니다. (물론 프로토타입 자체도 객체이긴 합니다) 다른 프로그래밍 언어들은 클래스 기반 객체 지향 프로그래밍 언어인데, 자바스크립트는 프로토타입 기반 객체 지향 프로그래밍 언어입니다. 이로 인해 훨씬 더 효율적이고 강력합니다. 프로토타입 기반 상속을 통해 불필요한 중복을 제거하고, 코드를 재사용할 수 있게 됩니다. 이로 인해 모든 인스턴스가 같은 메서드를 생성하지 않아도 되므로 메모리의 공간을 확보할 수 있..

클로저는 자바스크립트 개발을 하다보면 한번쯤은 들어보는 개념입니다. 하지만 자바스크립트만의 개념은 아닌데요.함수를 일급 객체(인자로도 활용하고, 변수에도 할당하고, 반환할 수도 있는)로 취급하는 함수형 프로그래밍에서 사용되는 특성 입니다. 클로저를 자세히 이해하기 위해서는, 실행 컨텍스트에 대한 이해가 선행되면 좋습니다. 아직 실행 컨텍스트에 대해 잘 모른다면, 아래의 게시글을 먼저 읽고 오시는 것을 추천합니다. https://ocahs.tistory.com/23 실행 컨텍스트 (Execution Context)실행 컨텍스트를 한마디로 정의할 수 있다면 좋겠지만, 실행 컨텍스트는 한 줄로 정리될만큼 단순한 개념은 아닙니다.자바스크립트 동작원리의 핵심 개념이 바로 실행 컨텍스트이기 때문입니ocahs.tis..

실행 컨텍스트를 한마디로 정의할 수 있다면 좋겠지만, 실행 컨텍스트는 한 줄로 정리될만큼 단순한 개념은 아닙니다.자바스크립트 동작원리의 핵심 개념이 바로 실행 컨텍스트이기 때문입니다.  그럼에도 불구하고 한마디로 정리해보면 다음과 같습니다. "소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역" 조금 더 자세히 정리하면 다음과 같습니다."스코프(식별자 등록 및 관리하는 유효 범위)와 코드 실행 순서 관리를 구현한 내부 메커니즘" 따라서, 모든 자바스크립트 코드는 실행 컨텍스트를 통해 실행되고 관리됩니다.또한 실행 컨텍스트를 생성하는 과정과 관리하는 내용은 코드의 종류에 따라 달라집니다.전역 코드, 함수 코드, eval 코드, 모듈 코드 총 4가지의 코드가 존재합니다.  ..