Curt Poem

프론트 엔드 공부와 지식 나눔을 위한 블로그

자바스크립트 6

자바스크립트 제너레이터(Generator)로 반복가능한 객체 이터레이터(iterator)를 만들자(feat. 파이썬의 range 구현하기)

Iterator이터레이터는 반복 가능한 객체를 순회할 수 있게 해주는 객체입니다. 조금 더 구체적으로 표현하자면 이터레이터는 이터러블 객체를 반환하는 Symbol.iterator 메서드를 구현한 객체입니다. 이터러블 객체(Iterable Object)는 자바스크립트에서 반복 가능한 객체를 의미합니다. 이터러블 객체는 반복 작업을 지원하며, for...of 루프나 스프레드 연산자, 배열 디스트럭처링 등 다양한 자바스크립트 문법에서 사용할 수 있습니다. 이터러블 객체는 Symbol.iterator라는 특수한 메서드를 가지고 있습니다. 이 메서드는 이터레이터를 반환해야 하며, 이터레이터는 next 메서드를 통해 반복 작업을 처리합니다. next 메서드는 { value, done } 형태의 객체를 반환하며, 다..

개발/JavaScript 2024.07.28

JSDoc에서 제네릭과 타입단언 사용하기

지난번에 JSDoc으로 더 나은 주석 작성하기, 그리고 개발 관련 도서 추천이라는 글을 썻었는데요. JSDoc으로 함수, 클래스, 변수에 설명을 추가할 뿐만 아니라 타입을 지정해 주어 쉽게 파악이 가능한 주석을 작성하는 법을 포스팅했습니다. 오늘은 이 JSDoc을 이용하여 ts 파일이 아닌 js 파일에서도 타입을 검사할 수 있게 만드는 법을 포스팅하겠습니다. 더불어 타입스크립트처럼 사용할 수 있도록 제넥릭과 타입 캐스팅 같이 조금 더 심화된 사용법을 설명해드리겠습니다.JS 파일에서 타입검사하기// @ts-check파일의 최상단에 위와 같은 키워드를 붙이면 js 파일에서도 타입스크립트와 같은 타입검사가 가능합니다. 이 키워드를 사용한다면 JavaScript 파일에 타입 정보와 주석을 추가하여 코드의 타입 ..

개발/JavaScript 2024.07.21

웹 컴포넌트로 재사용 가능한 커스텀 HTML 엘리먼트를 생성하기

웹 컴포넌트는 HTML, CSS, 자바스크립트를 활용하여 재사용 가능하고 캡슐화된 웹 요소를 만드는 도구입니다. 웹 컴포넌트는 표준 웹 기술을 사용하여 구현하기 때문에 웹 프레임워크나 라이브러리에 의존하지 않고 개발할 수 있습니다. 덕분에 다양한 환경에서 사용될 수 있고, 개발자가 선택할 수 있는 유연성을 제공합니다.웹 컴포넌트웹 컴포넌트는 React나 Vue에서 말하는 컴포넌트와 같은 것을 가르킵니다. 즉 재사용이 가능한 코드를 의미합니다. 웹 컴포넌트를 사용하면 다른 컴포넌트를 사용하는 것과 똑같은 이점을 가질 수 있습니다. 웹 개발자들이 쉽게 코드를 재사용하여 생산성을 높이고 동일한 디자인 요소를 가진 코드를 컴포넌트로 만들어 일관된 사용자 인터페이스를 구현할 수 있게 하는 것이 바로 웹 컴포넌트 ..

개발/JavaScript 2024.05.29

함수 선언문과 함수 표현식: 어떤 것을 사용해야 할까?

자바스크립트는 함수를 정의하는 데에 있어서 두 가지 기본적인 방법을 제공합니다. 함수 표현식과 함수 선언문이죠. 이 두 가지 방식은 각각의 특징과 장단점이 있으며, 코드를 작성할 때 어떤 것을 선택해야 할지 고민이 될 수 있습니다. 저 또한 이전까지 막연히 함수 표현식을 사용하는 것이 좋다고 생각했었는데, 리액트 공식문서 등 꽤 많은 곳에서 왜 함수 선언문을 사용하는 지에 대해 궁금증이 생겨 알아보게 되었습니다. 이번 글에서는 함수 표현식과 함수 선언문의 차이를 알아보고, 어떤 방식을 사용하는 것이 더 나을지에 대해 살펴보겠습니다.함수 선언문 - Function Declarations함수 선언문은 함수를 선언하면서 동시에 정의합니다. 함수 이름이 필수적이며, 함수 선언문은 호이스팅이 발생하여 어디에서든지..

개발/JavaScript 2024.03.01

자바스크립트의 변수 선언 (호이스팅과 스코프 그리고 클로저까지 간단하게 알아보자)

var 전역범위에서 접근이 가능한 변수를 선언하는 키워드입니다. 아무런 키워드없이 변수를 선언 및 할당하게 되면 var를 쓴 것과 같은 효과를 가집니다. 이 키워드를 사용하여 선언된 변수는 변수가 선언되는 위치에 따라 변수의 유효범위가 달라질 수 있습니다. 예를 들어, 함수 내에서 var를 사용하여 변수를 선언하면 해당 변수는 함수 내부에서만 접근할 수 있습니다. 그러나 함수 내부의 블록 (예: if 문이나 for 문) 안에서 선언된 경우에도 해당 변수는 함수 전체에서 접근할 수 있습니다. 이는 var가 함수 스코프(function scope)를 가지기 때문입니다. 스코프란? 스코프는 변수를 찾아내기 위한 규칙입니다. 규칙 중에서도 범위에 대한 규칙이죠. 함수는 자신이 선언된 위치에 의해서 자신이 유효한..

개발/JavaScript 2023.12.22

동기(synchronous)와 비동기(Asynchronous)(feat. 직렬과 병렬 그리고 블록과 논블록)

동기와 비동기동기한 작업이 다른 작업에 종속되어 순차적으로 실행되는 개념프로그램이 실행 될 때, 한 작업이 완료되고 나서야 다음 작업이 실행된다면 동기적인 것이다.작업(코드)의 순서가 곧 실행 순서이다.동기는 실행 순서가 보장되어 있다.비동기한 작업의 완료를 기다리지 않고, 다른 작업을 동시에 실행하도록 하는 프로그래밍 개념비동기적인 코드는 작업이 완료될 때까지 대기하지 않고, 다른 작업을 계속해서 진행한다.처리에 오랜 시간이 걸리는 작업(네트워크 통신, 파일 입출력, 웹 요청 등)이 존재할 시, 다른 작업을 실행함으로 효율적인 작업처리에 도움을 준다.작업(코드)의 순서와 실행의 순서가 다를 수 있다.동기는 실행 순서가 보장되어 있지 않다.실행 순서가 보장되어 있다?프로그래밍에서의 실행은 작업의 시작, ..