한땀한땀 코딩하기

번들러 번들링은 JavaScript와 프론트엔드의 생태계에서 빼먹을 수 없는 큰 요소라고 생각합니다. 번들링과 모듈 개념만 두고 공부해 보면 거의 웹 개발의 역사를 훑게 되다 보니 항상 공부할 엄두가 잘 안 나기도 합니다. 코드 번들링을 정의한다면, 어플리케이션이 돌아가기 위해 필요한 모든 코드와 파일을 효율적으로 합치는 작업이라고 볼 수 있습니다. 이런 작업이 필요한 이유는 애플리케이션 개발에는 외부 의존성도 많이 쓰이고, 개발의 편의를 위해 여러 파일로 나눠둔 코드를 실행을 위해서 하나로 합치는 것이 리소스 면에서 효율적이기 때문입니다. 제가 처음 공부를 할 때는 번들러가 이렇게 다양한지 몰랐고, 근본이라 볼 수 있는 Webpack으로만 번들을 했었습니다. 막상 일을 시작하고 실제로 라이브러리를 만드..

동공 지진, 그 시작 자바스크립트를 이용해 본격적으로 웹 개발에 입문할 때, 주기적으로 세뇌(?)당하는 이야기가 있는데 바로 자바스크립트가 싱글 스레드 기반의 언어라는 것입니다. 취업 준비하면서도 종종 나오는 주제 중 하나로 언급되고, 관련한 문제도 봤던 기억이 있습니다만, 도대체 이게 왜 자꾸 강조가 되는지 마음속으로 받아들이지 못했던 것 같습니다. 무엇보다 싱글 스레드라면 굉장히 제한적일 거 같은데 가능한 것들 중에는 이런 질문들이 있었습니다. 비동기는 어떻게 가능한 것인가. 동시에 두 가지가 동작하려면 멀티 스레딩을 해야한다고 배웠는데! 그럼 node 기반의 서버는 무조건 하나의 스레드에서만 동작한다는 뜻일 텐데 느리지 않을까? 아쉽게도, 아니 정확히는 이 질문에 대해 이해를 시켜주기에는 넓은 영역..

Ch01 | this or That? 자바스크립트에서 this는 그 이름 때문에 많은 개발자들이 혼란을 느끼는 요소입니다. 알아보면 동작 자체가 굉장히 복잡하진 않지만, 이름에서 오는 혼동 때문에 많이들 잘못 사용하고 있다고 합니다. Why this? this를 활용하면 이용하여 하나의 함수가 컨텍스트를 특별히 인자로 받지 않아도 call같은 컨텍스트 변경 함수를 이용하여 원하는 결과를 줄 수 있게 됩니다. function identify() { return this.name.toUpperCase(); } var me = { name: "Grace" }; var you = { name: "Reader" }; identify.call( me ); // GRACE identify.call( you ); //..

들어가며 전반적인 introduction에 해당하는 1권 이후 스터디를 진행하며 You Don't Know JS Yet 2권을 읽어보았습니다. 2권은 부제에서 확인할 수 있듯 scope(스코프)와 closure(클로저)에 대한 이야기가 중점인데, 특히 클로저를 설명하기까지 필요한 기본적인 개념과 그 동작 원리를 독자들이 차근차근 이해할 수 있게 구성한 점이 굉장히 좋았습니다. 굉장히 당연시하고 넘어갔던 변수 선언이나 스코프에 대한 것도 JS의 특징과 함께 잘 엮어서 설명해주고 있습니다. 많은 이야기가 오가는 책인만큼, 모든 걸 요약하는 것보다는 제가 인상 깊게 읽은 부분을 가볍게 정리해보고자 합니다. 크게 꼽아보자면 아래와 같습니다. var 와 let (+hoisting) 글로벌 객체 window Clo..

https://nodejs.org/api/readline.html Readline | Node.js v14.6.0 Documentation Readline# Source Code: lib/readline.js The readline module provides an interface for reading data from a Readable stream (such as process.stdin) one line at a time. It can be accessed using: const readline = require('readline'); The following simple exampl nodejs.org 로컬 환경에서의 테스트나 백준 알고리즘 문제를 풀 때는 표준 입력을 구현해야 하는 경우가 종종..