본문 바로가기

JavaScript

[책] 디자인 패턴 바이블 정리 - 3 3장 - 콜백과 이벤트 callback과 EventEmitter는 노드 비동기적 기반의 큰 두 갈래이다. 자세한 내용은 따로 정리해야 할 것 같다. 연습문제가 4개 있는데 그걸 해보고 올려야겠다. 더보기
[책] 디자인 패턴 바이블 정리 - 2 2장 - 모듈 시스템 모듈은 주요 애플리케이션들을 구조화하기 위한 부품. 코드베이스를 개별적으로 개발 가능하고 테스트 가능한 작은 유닛으로 나누게 해줌. 1. 모듈의 필요성 - 구조적 관리 가능, 코드 재사용, 은닉성, 종속성 관리 2. JS와 Node.js의 모듈 시스템 - Node.js는 브라우저가 아닌 환경에서 JS 모듈 시스템을 제공할 수 있도록 고안된 CommonJS의 명세를 구현하게 되었다. - 2015년에 ECMAScript Modules를 위한 공식적인 제안이 나오게 되었다. Node.js는 버전 13.2부터 ESM에 대한 안정적인 지원을 한다. 3. 모듈 시스템과 패턴 - JS는 네임스페이스가 없다. 내부 애플리케이션 코드나 종속성 라이브러리가 기능을 노출시키는 동시에 스코프를 오염시킬 .. 더보기
[책] 디자인 패턴 바이블 정리 - 1 1장 - Node.js 플랫폼 1. Node.js의 철학 - 경량 코어 최소한의 기능 세트를 가지고, 코어의 바깥부분에 사용자 전용 모듈 생태계를 두었다. 안정적 + 느리게 진화하는 것 대신 커뮤니티에게 폭 넓은 해결책을 실험할 수 있는 자유를 주어서 빠르게 성장했다. - 경량 모듈 프로그램 코드를 구성하는 기본적인 수단. 각 패키지가 자신이 필요로 하는 버전의 종속성 패키지들을 갖도록 한다. - 작은 외부 인터페이스 확장보다는 사용되기 위해서 만들어졌다. (모듈 내부 접근을 제한한다) -> 그럼 모듈을 확장하고 싶다면 어떻게 해야할까? 2. Node.js는 어떻게 작동하는가 - Reactor 패턴 - I/O는 느리다. - 블로킹 I/O I/O 요청 함수는 작업이 완료될 때까지 스레드의 실행을 차단한다... 더보기
async/await 정리된 글 아래 문서들이 정리가 잘 되있어서 링크를 건다. https://kkangdda.tistory.com/77 움짤로 보는 자바스크립트 동작 원리(5) - Promises & Async/Await 원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke#syntax 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 🖍 Introduction.. kkangdda.tistory.com https://medium.com/sjk5766/async-await-%EC%9B%90%EB%A6%AC-cc643f18526d async-awa.. 더보기
popstate 이벤트와 Cancelable developer.mozilla.org/ko/docs/Web/API/Window/popstate_event popstate - Web API | MDN popstate Window 인터페이스의 popstate 이벤트는 사용자의 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생합니다. 만약 활성화된 엔트리가 history.pushState() 메서드나 history.replaceState developer.mozilla.org 회사 업무로 popstate 이벤트를 감지해서 리액트 state를 처리해야 할 일이 있었다. 이유는 컴포넌트 내에서 상태로 route를 해주도록 처리를 해야했기 때문. 앞으로 가는거야 그냥 액션 발생 시 state를 변경해주도록 하면 됐는데, 뒤로 갈때는 해당 페이지.. 더보기
자바스크립트 더 나은 개발자가 되기 위한 세가지 1. 테스팅 2. 성능 분석 3. 디버깅 기술 더보기
[You don`t Know JS 정리] ch.3 프라미스 Ch3. 프라미스 전 시간에는 콜백의 문제점에 대해서 살펴보았다. 이제 해결 방안을 궁리해보자 먼저 제어의 역전을 되역전시켜보자. 프로그램의 진행을 다른 파트에 넘겨주지 않고도 개발자가 언제 작업이 끝날지 알 수 있고 그다음에 무슨 일을 해야 할지 스스로 결정할 수 있는 체계가 바로 프라미스다. 3.1 프라미스란 3.1.1 미랫값 패스트 푸드점을 예로 들어서 설명한다. 주문을 하면 바로 치즈 버거가 나오는 게 아니라 주문 번호가 적힌 영수증을 준다. 이것이 하나의 약속이다. 기다리면서 다른 일을 할 수 있다. 아직 치즈 버거를 받지 못했지만 마치 있는 것 처럼 행동한다. 점원이 내 번호를 부르면 영수증을 보여주고 치즈 버거를 받는다. 만약 치즈 버거 재료가 다 떨어져서 못받는다면, 어처구니가 없지만 치즈.. 더보기
[You don`t Know JS 정리] ch.2 콜백 Ch2. 콜백 저번 시간에 자바스크립트 비동기 프로그래밍의 용어와 개념에 대해서 살펴봤다. 함수 안의 문의 예측 가능한 순서대로 실행되지만 함수 단위의 실행 순서는 이벤트에 따라 달라질 수 있다. 어떤 경우든 함수는 콜백 역할을 한다. 큐에서 대기 중인 코드가 처리되자마자 본 프로그램으로 되돌아올 목적지기 때문이다. 콜백은 사실상 자바스크립트 언어에서 가장 기본적인 비동기 패턴이다. 콜백의 실체를 깊이 있게 살펴보고 더 정교한 비동기 패턴이 나오게 된 계기를 설명한다. 2.1 연속성 // A ajax("..", function () { // C }) // B A와 B는 프로그램 전반부, C는 프로그램 후반부에 각각해당한다. 전반부 코드가 곧장 실행되면 언젠가 AJAX 호출이 끝날 때 중지되기 이전 위치로.. 더보기
[You don`t Know JS 정리] ch.1 비동기성 Ch1. 비동기성: 지금과 나중 프로그램에서 '지금'에 해당하는 부분 그리고 '나중'에 해당하는 부분 사이의 관계가 바로 비동기 프로그램의 핵심이다. 1.1 프로그램 덩이 자바스크립트 프로그램은 보통 여러 개의 덩이들로 구성된다. 가장 일반적인 프로그램 덩이 단위는 함수다. '나중'은 '지금'의 직후가 아니다. 지금 당장 끝낼 수 없는 작업은 비동기적으로 처리되므로 프로그램을 중단하지 않는다. var data = ajax('http://naver.com); console.log(data) 위 코드에서 ajax는 비동기적으로 지금 요청하고 나중에 결과를 받는다. 가장 간단한 방법은 콜백 함수라는 장치를 이용하는 것이다. ajax("http:/.. 더보기
[You don`t Know JS 정리] ch.6 작동 위임 Ch6. 작동 위임 5장의 프로토타입 결론은 [[Prototype]] 체계는 한 객체가 다른 객체를 참조하기 위한 내부 링크라는 것이다. 자바스크립트의 무한한 가능성을 이끌어낼 가장 중요한 핵심 기능이자 체계는 '객체를 다른 객체와 연결하는 것'이다. 6.1 위임 지향 디자인으로 가는 길 [[Prototype]] 사용 방법을 가장 쉽게 이해하려면 먼저 클래스와는 근본부터 다른 디자인 패턴이라는 사실을 인지해야 한다. 6.1.1 클래스 이론 소프트웨어 모델링이 필요한 유사한 태스크 두개 (XYZ, ABC)가 있다. 클래스 기반의 설계라면 대략 아래와 같다. 가장 일반적인 부모 클래스와 유사한 태스크의 공통 작동을 정의한다. Task를 상속받은 2개의 자식 클래스를 정의한 후 이들에 특화된 작.. 더보기