Official-Dev. blog

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', ..

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..

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

개발 상황 개발을 하다보면 뭔가 메서드의 결과가 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문..

유틸리티 타입 타입스크립트의 유틸리티 타입은 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..

은 무엇인가? 환영합니다. [회원 가입하기] 2번째 줄는 JSTL의 코어의 라이브러리를 등록하고 prifix를 "c"로 사용하겠다는 의미입니다. uri부분의 라이브러리를 등록하는데 uri의 값은 JSTL중에 코어 라이브러리로 되어있기 때문입니다. prefix는 변경할 수 있습니다. prefix="a1"로 설정한다면, 이 될 것입니다. 이미지에서도

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

JSP 기본 문법 JSP는 태그를 이용하여 문법을 기술합니다. 태그는 스크립트 태그, 디렉티브 태그, 액션 태그가 있습니다. 스크립트 태그 - HTML에 자바 코드를 넣어서 자바 프로그램의 기능을 구현 디렉티브 태그 - JSP 페이지를 어떻게 처리할 것인지 설정 (컨테이너에 전송됨) 액션 태그 - 클라이언트/서버를 제어함. (JSP 페이지 사이에서 제어를 이동할 수 있음) 스크립트 태그 스크립트 태그는 HTML에 자바 코드를 넣어서 자바 코드로 만든 프로그램의 기능을 웹에서 수행할 수 있게합니다. 선언문(declaration) - - 자바 변수나 메소드를 정의 스크립틀릿(scriptlet) - - 자바 로직 코드 표현문(expression) - - 값을 출력 JSP 컨테이너가 식으로 작성된 코드를 스크립..

JSP ? 웹 페이지에는 정적(static)과 동적(dynamic)으로 구분할 수 있습니다. 정적은 상수 처럼 변하지 않는 웹 페이지이고, 동적은 내용이 사용자의 요청에따라, 입력에따라 가공되어 처리되는 웹 페이지입니다. 정적 웹 페이지는 HTML같은 언어로 작성하고 동적 웹 페이지는 PHP, ASP, JSP와 같은 언어로 작성합니다. JSP는 동적 웹 페이지를 구현하는데 사용되는 자바 기반의 서버 단 웹 프로그래밍 언어입니다. 서블릿이 먼저 개발되었으나 자바 코드 안에 HTML 코드를 추가하는 서블릿을 이용한 개발이 쉽지 않고 불편한 부분이 많아 HTML 코드에 자바 코드를 삽입하는 방식인 JSP가 개발되었습니다. 보통 식으로 사용합니다. JSP 특징 유지 관리의 편리성 - 서블릿과 달리 프레젠테이션 ..

톰캣(Tomcat)이란 ? 톰캣(Tomcat)은 흔히 WAS(Web Application Service)라고 하며, 아파치 소프트웨어 재단(Apache Software Foundation)의 애플리케이션 서버로서, 자바 서블릿을 실행하고 JSP(Java Server Pages)가 포함된 웹페이지를 만들어줍니다. 톰캣은 웹 서버와 연동하여 실행할 수 있는 자바 환경을 제공하고, 관리 도구를 이용해서 설정을 변경할 수도 있지만, XML 파일을 편집해서 설정할 수도 있습니다. 아파치(Apache)란 ? 아파치(Apache)는 세계에서 가장 많이 쓰는 웹 서버 중 하나입니다. 이 아파치는 HTTP서버이고 굉장히 다양하고 효율적인 기능을 제공합니다. 또 구축이 매우 쉽고 무료라는 이유로 많이 사용합니다. 다양한 ..