Web Front End/Javascript & Typescript

[함수형 자바스크립트] Symbol, Iterator, Generator

자바스크립트에서 함수형 프로그래밍(FP)을 하기 위한 기본 개념인 Symbol, Iterator, Generator에 대해 간단히 알아보도록 하겠습니다. Symbol() Symbol() 함수로부터 반환되는 모든 심볼 값은 고유합니다. 따라서 어떠한 객체의 키가 될 수 있습니다. Array, Map, Set 을 생성하면 고유한 Symbol.iterator 을 가지고 있게 됩니다. 일반 객체({}, object)는 Symbol.iterator를 가지고 있지 않기 때문에 iterable하지 않은 값입니다. Symbol.iterator를 통해 값을 하나씩 실행할 수 있게 됩니다. Iterator, Iterable 아래와 같이 Iterator를 만들게 되면 next() 메소드를 통해 value, done값을 가진..

한글이 자소분리될 때 해결 방법(ㅎㅏㄴㄱㅡㄹ -> 한글)

운영체제마다 다른 '유니코드 정규화 방식' 대응하는 방법 업무를 진행하다가 파일 다운로드 시 'Windows' 환경에서 한글이 자음과 모음으로 분리되는 자음모음 분리 현상, 자소 분리 현상이 발생했습니다. 인코드, 디코드 방식으로는 해결이 되지 않았지만 원인을 찾기가 힘들어 삽질을 했었는데요. 이를 해결하기 위해 새롭게 알게 된 내용과 해결 방법을 적어 보도록 하겠습니다. 개요 유니코드 정규화 방식이란? Mac과 Window의 정규화 방식 normalize()로 대응하기 1. 유니코드 정규화 방식이란? 한글을 표현하기 위해 텍스트(문자)에 대한 규칙을 정했습니다. 이것이 유니코드 정규화 방식인데 의미를 더 알아보기 앞서 기본 단어 개념을 알아보겠습니다. Character set: 여러 언어를 사용할 수 ..

OpenAPI Generator 사용하기 - Typescript

OpenAPI Generator 사용하기 - Typescript 개요 Typescript에서의 api type 정의 반복 OpenAPI Generator 장단점 OpenAPI Generator 사용하기 정리 1. Typescript에서의 api type 정의 반복 백엔드에서 api가 개발되면 swagger와 같은 문서 툴로 받게 됩니다. 자바스크립트에서라면 바로 fetch 혹은 axios로 api에 요청하는 코드를 작성하면 됩니다. 타입스크립트의 경우는 어떤지 살펴 봅시다. Request와 Response 타입 정의하기 우리는 swagger에 명시된 타입을 바탕으로 타입을 정의해야 합니다. 아래와 같이 명세를 펼치면 알맞는 타입을 알 수 있습니다. 캡처 출처: https://petstore.swagger..

Typescript generic

Typescript generic(타입스크립트 제네릭) 타입스크립트의 필요성은 협업을 하는 프로젝트에서 거의 필수로 사용될 만큼 중요도도 높아졌습니다. 최근에 타입스크립트를 공부하게 되었는데 공부하다가 가장 이해하기 까다로웠던 generic에 대해 정리해 보고자 합니다. 제네릭의 형태 아래 코드는 타입스크립트 오픈소스에서 쉽게 볼 수 있는 코드입니다. 타입스크립트 입문자가 보게 되면 외계어를 보는 듯한 기분이 듭니다. 이 코드는 마지막에 다시 보고 해석해 보도록 하겠습니다. // https://github.com/reduxjs/redux/blob/master/src/compose.ts type Func = (...a: T) => R export default function compose( f1: (a:..

[Javascript] 코딩할 때 먼저 고민하면 좋을 10가지

프로젝트를 진행하고 코드리뷰를 받으면서 공통적으로 여러 번 받거나 다수에게 남겨진 코드리뷰 피드백을 정리해 보았다. 경험적으로 지키지 않아 좋지 않은 결과를 가져온 부분에 대해서도 작성했다. 다음 프로젝트에서는 잊지 않고 적용해 보기 위함이다. 1. env(환경변수) 활용하기 dotenv 라는 npm 라이브러리를 설치하고 프로젝트 루트에 .env 파일을 만들어 환경변수를 넣을 수 있다. 이를 활용하여 매직넘버를 줄이자. env에는 API 주소 등이 포함될 수 있다. 2. 커밋 단위를 작게작게 줄이자 함수 하나가 동작이 된다면 커밋을 날리는 습관을 들여 보자. 함수 = 하나의 기능으로 생각하고 함수가 완료되면 커밋을 보낸다면, 커밋 로그를 보다 자세하게 기록할 수 있다. 위의 이미지는 나의 일주일 동안 프..

clearTimeout이 사용되는 경우(Debouncing)

clearTimeout이란? setTimeout을 취소(초기화)시키는 메소드이다. 그럼 setTimeout이란? setTimeout(callbackFn, TIME); TIMEms 이후에 callbackFn이 실행되는 메소드이다. TIME을 1초로 설정한다면, 1초 뒤에 콜백함수가 실행되는 비동기 메소드이다. setTimeout에 clearTimeout이 꼭 필요할까? 결론부터 말하자면, 특별한 상황이 아니면 꼭 필요하지는 않다. 특정 시간만큼 반복해서 콜백함수를 실행하는 setInterval는 무한적으로 반복되기 때문에 중지하는 시점에서 clearTimeout을 해 줘야 한다. 하지만 한 번만 실행되는 setTimeout을 매번 clearTimeout 을 해 줄 필요는 없다. 그러면 어디에 쓰이는 거지?..