Web/HTML, CSS, JavaScript 6

Javascript - Ajax 여러개 결과 기다렸다가 특정 함수를 실행하는 방법 비교!

Ajax 결과 대기 기존에는 Ajax로 요청 하나만 보내는 것을 MSA를 도입하면서 4가지 API에 요청해서 결과를 조합하도록 수정해야 하는 상황이 발생했다. 관련하여 요즘 많이 사용하는 메소드가 Promise.all()이다. 사내에서 운영중인 서비스는 IE도 고려해야해서 ES6 문법을 사용할 수 없었다. 혹시나 싶어서 호환성을 살펴봤는데, 역시나 IE 지원이 안된다. async: false Ajax 요청은 기본적으로 비동기로 동작한다. Ajax 속성 중에 async를 false로 설정하면 동기 방식으로 동작한다. $.ajax({ type: 'get', url: API_URL+'/users?query='+search, contentType: 'application/json; charset=utf-8', ..

Javascript - Optional chaining [ES2020] (Cannot read properties of undefined를 해결하기 위한 다양한 방법!)

Nested object Nested object를 설명하기 위해 아래와 같은 클래스를 만들었다. class Dto { filter: Filter; page: Page; sort: Sort; } interface Filter { [key: string]: { operator: string; value: string; } } const dto = new Dto(); 비즈니스 로직에서 dto.filter.search.value의 존재 유무에 따라 쿼리가 달라진다고 가정하자. 그럼 dto.filter.search.value의 존재 유무를 알 수 있는 방법은 뭘까? if(dto.filter.search.value) { // ... 생략 } else { // ... 생략 } 이렇게 하면 처리가 될까? 안된다! V..

Javascript - DB 초성으로 검색하기! (+ Performance, 함수형, ...)

초성 검색 프로젝트를 진행하면서 DB에 저장된 name을 초성으로 검색하는 기능을 개발하게 되었습니다. 그런데, 관련 기능을 검색해봤는데 검색 결과가 전부 마음에 들지가 않더라구요.. 초성이라는 것 자체가 한글이니까 국내 자료밖에 없었고 구 시대 자료밖에 없었는데, 코드(또는 SQL)이 비효율적인 측면이 너무 많았고, 유지보수 측면에서도 너무 안좋아서 직접 구현했습니다. 비즈니스 로직은 아래와 같습니다. 입력 값이 전부 초성인지 확인한다. 초성으로 name을 DB에서 검색한다. 1. Map 정의 먼저 Javascript의 Map을 아래와 같이 정의합니다. 보통 배열을 사용해서 ㄱ,ㄴ,ㄷ,ㄹ,ㅁ 등을 저장하던데 하나씩 탐색하니까 시간 복잡도가 많이 낭비됩니다. Set이나 Map을 사용하는 것이 훨씬 유리합..

Javascript - Null 병합 연산자 (null, undefined 검사 후 삼항 연산자 사용 개선)

개발 상황 개발을 하다보면 뭔가 메서드의 결과가 null 또는 undefined인지에 따라 값을 반환해야 하는 경우가 많습니다. 저의 경우에는 order라는 컬럼을 기준으로 Category가 정렬되기 때문에, Category를 생성할 때 Max order에 +1한 값을 order로 설정해줬어야 했어요! const maxOrder = categoryRepository.max("order"); category.order = maxOrder + 1; categoryRepository.create(category) 하지만, 저 방식은 category가 이미 1개 이상 있을때만 안전하고, 카테고리가 없다면 max가 null을 반환하기 때문에 null + 1이 연산 되면서, 에러가 발생합니다! If문 그래서 if문..

TypeScript - 유틸리티 타입을 사용하는 이유 (Partial, Pick, Omit) [DTO를 우아하게 분리]

유틸리티 타입 타입스크립트의 유틸리티 타입은 interface를 더 우아하게 사용할 수 있도록 도와줍니다. 유틸리티 타입도 종류가 현 기준 20가지 가까이 되는데, 그 중 많이 사용하는 3가지 (Partial, Pick, Omit)을 살펴보겠습니다. Partial Partial 타입은 모든 properties를 optional로 바꿀 수 있습니다. 가령, 아래와 같은 Product interface를 사용하고 있다고 가정합니다. interface Product { id: number; seller: number; category: number; name: string; price: string; } 여기서 Product를 검색할 수 있는 기능을 추가하려 합니다. 그러면, 아래와 같이 Optional pr..

JavaScript - 객체(Object)

JS에서 객체(Object)란? 자바스크립트(JavaScript)는 객체 기반 스크립트 언어이고, 객체는 여러 속성을 하나의 변수에 저장할 수 있게 해주는 데이터 타입입니다. Key(속성)과 Value(값)을 한 짝으로 저장합니다. 자바스크립트에서는 배열도 객체에 해당됩니다. 객체 안에는 문자열, 숫자, 배열, 객체, 함수 등이 모두 들어갈 수 있습니다. 객체의 특징 객체는 변수의 타입 다양한 값들이 포함될 수 있다. 중괄호 '{ }' 를 이용 콤마 ' , ' 를 이용해서 속성과 값의 짝을 나열 Key(속성)는 문자열 또는 기호 Value(값)는 모든 유형 + property는 Key : Value 한 쌍(pair)을 말합니다. 객체 선언 및 초기화 var student = new Object(); //..