승택 오버플로우 승택 오버플로우

JavaScript

• [JS] 알쏭달쏭 자바스크립트 this 바인딩

  Javascript, Typescript 2022. 3. 19. 14:51

  Java, C# 같은 객체지향 프로그래밍 언어들은 this라는 키워드를 사용한다(Python 에는 self라는 키워드가 있다). 이때 this가 의미하는 것은 해당 코드를 실행하는 클래스의 인스턴스를 나타낸다. 자바스크립트에도 this라는 키워드가 있는데 자바스크립트의 this는 앞선 개념에 익숙해져있는 사람이 이해하기에는 다소 까다로운 개념이다. 마치 학부 초창기에 C언어 수업에서 포인터를 만났을 때 벽을 느꼈던 것처럼, 처음 자바스크립트의 this를 만나게 되면 혼란스러움에 벽을 느끼게 된다. 도대체 자바스크립트에서는 this를 어떻게 사용해야 하는지 알아보자. Javascript의 this 바인딩 function foo() { const a = 10; console.log(this.a); } foo..

• [Node.js] 공식문서로 이해하는 이벤트 루프

  Node.js 2022. 2. 3. 17:37

  Node.js의 공식문서 중에 아쉽게 한글화가 되어있지 않은 흥미로운 가이드가 하나 있다.(링크) Don't Block the Event Loop라는 타이틀에서 알 수 있듯이 자바스크립트, 특히 Node.js 환경에서 동작하는 어플리케이션을 만들 때 가장 중요한 이벤트 루프에 대해 깊게 이해할 수 있는 공식 가이드이다. 서버사이드 Node.js 어플리케이션을 만들기 위한 여러 가지 고려사항들과 설계 원칙들을 확인할 수 있는데, 해당 가이드를 읽고 배운것들 중 일부와 Node.js의 이벤트 루프에 대해 개인적으로 알고 있던 것들을 간단하게 정리하려고 한다. Event Loop 자바스크립트는 싱글 쓰레드 언어이기 때문에 여러 작업을 작업을 동시에 처리할 수가 없다. 이런 문제를 해결하기 위해 자바스크립트 런..

• [Jest] object에 대한 다양한 matcher 함수들

  Javascript, Typescript 2021. 12. 31. 14:07

  facebook에서 개발 및 유지보수 중인 자바스크립트의 대표적인 테스팅 라이브러리인 Jest는 다양한 matcher함수를 제공한다. 그중 두 오브젝트를 비교할 때 사용할 수 있는 다양한 matcher 함수 중 비슷하면서도 다른 toBe, toEqual, toStrictEqual, toMatchObject 함수의 동작과 그에 따른 차이점을 알아보자. toBe() 기본형을 비교할 때 가장 많이 사용되는 toBe 함수는 두 값이 같은지 비교한다. 비교 대상이 기본형(primitive type)이라면 두 원시 값이 같은지 비교하고, 오브젝트(object type)라면 같은 오브젝트에 대한 참조인지를 비교(Shallow compare)한다. 두 값에 대해서 === 과는 다르게 동작하는 Object.is를 수행한..

• [TypeORM] repository.save()의 동작과 upsert()

  Javascript, Typescript 2021. 12. 19. 13:44

  TypeORM에서 Data Mapper 패턴으로 repository를 이용해서 엔티티를 다루는 경우, 새로운 엔티티를 생성하고 데이터베이스에 저장할 때 repository.save() 메서드를 사용하게 된다. const newUser = new User(); await userRepository.save(newUser); 또한 save 메서드는 다음처럼 엔티티를 조회한 후에 엔티티에 변경을 가하고 변경사항을 저장할 때에도 사용할 수 있다. const user = await userRepository.findOne(); user.changeName('New Name'); await userRepository.save(user); 개발자가 실제 쿼리를 작성하지 않아도 되는 ORM을 사용할 때는, 실제 ORM..

• [JS] Trailing Commas에 대한 고찰 (feat.ESLint)

  Javascript, Typescript 2021. 12. 5. 18:00

  eslint의 여러 설정들을 살펴보는 도중 comma-dangle이라는 옵션이 궁금해져서 구글링을 조금 해보게 되었다. 그러다가 medium에 올라온 한 게시글과 댓글들을 보고 재미있는 주제라고 생각이 되어서 이에 대한 내 생각을 글로 작성하게 되었다. Trailing-commas Trailing-commas 또는 Final-commas는 배열, 오브젝트 프로퍼티 등 콤마를 이용한 항목의 나열에서 마지막 항목에도 콤마를 붙이는 코딩 방식을 말한다(우리나라 말로는 후행 콤마? 정도로 부르는 것 같다). 자바스크립트에서는 이후에 더이상 요소가 존재하지 않아도 실행할 때 오류가 발생하지 않기 때문에 가능한 코딩 방식이다. MDN에 자세한 설명이 나와있다. // array에서의 trailing-commas co..

• [JS] 비동기 작업들의 순차실행과 병렬실행

  Javascript, Typescript 2021. 11. 9. 22:55

  어떤 결과를 만들기 위해 5개의 비동기 작업을 수행해야 한다고 가정해보자. 5개의 작업이 서로 연관되어 있어서 작업을 한 번에 하나씩 끝내야 한다면, 작업을 순차적(sequential)으로 처리해야한다. 하지만 5개의 작업이 서로 연관이 없어서 동시에 5개의 작업을 끝내도 상관이 없다면, 작업을 병렬적(parallel)으로 처리할 수 있다. 1초의 수행시간이 걸리는 비동기 작업을 다음과 같이 만들어보았다. 이 함수는 실행하고 1초 뒤에 task finished!라는 로그를 출력할 것이다. function handleTask(id) { return new Promise(resolve => { setTimeout(() => { console.log(`task${id} finished!`); resolve()..