Jacob's Development Blog

async await는 Promise를 가독성 좋게 사용하는 한 가지 방법에 불과합니다. 이미 앞에 글에서 봤듯이 자바스크립트를 통해 비동기 코드를 처리하는 가장 기본적인 방법은 콜백 함수, 프라미스(Promise), Async-await 등이 있었다. 그리고 각각은 장점과 단점이 있었고, 각각의 함수가 중첩되는 상황이 깊어질수록 콜백 함수는 콜백헬을 만들고, 여러 프라미스가 체인닝되어 선언되었다면 에러를 디버깅하는데 힘들었다. 그에 반해 async await를 간결한 코드와 기존 에러 핸들링 방식이었던 try~catch문을 통해 더 깔끔한 처리(?)가 가능했다. 이런 이야기만 들으면 async-await만 쓸 것같지만, 실제로는 꼭 그렇지 않다. 여기에 대한 이야기를 차근차근 풀어보자. 여러 개의 비동..

프론트엔드 개발자로 있다 보면, 한 번쯤은 들어봤을 용어이다. 사실 CSS도 알고 JS도 이미 알고 있다. 그렇다면 직역을 해보자면, 자바스크립트 안에 있는 CSS 정도일 것이다. 이것도 당연 이해가 된다. 언뜻 보면 어렵지 않아 보이는 이 개념이 왜 궁금한 것일까. 조금 더 깊게 파보자. 기존 CSS 사용 방식에는 어떤 문제가 있었을까? css는 기본적으로 전역으로 사용된다. 그래서 우리는 class name을 통해 CSS를 제어하기 시작했다. 또한 한 엘리먼트(element)에 여러 개의 클래스 이름을 붙였다. 참고로 className은 class와 동일하다. class 이름이라고 부르기가 애매해서 className이라고 적었다. 아래 간단한 예를 보자. 만약 버튼의 배경색을 파란색으로 해달라는 요구..

프론트엔드 개발자로 있다 보면, 웹팩(webpack)에 대해서 이해했냐는 질문 혹은 웹팩에 대한 이해도가 있는 사람을 모집한다는 공고를 자주 접하게 된다. CRA로 create-react-app을 통해 프로젝트를 하나라도 만들어 봤다면, 이미 사용해본 것이다(물론 웹팩이 react에 종속적인 개념은 아니다). 자주는 접하지만, 자주 까먹는... 그래서 이번 글에서는 모듈 번들러인 웹팩(webpack)에서 대한 내용이다. 그전에 먼저 모듈 번들러가 무엇인지 알아보자. What's module bundler? 모듈 번들러(module bundler)란, 자바스크립트 모듈을 브라우저에서 실행할 수 있는 단일 자바스크립트 파일로 묶어주는(=번들링 해주는) 도구이다. 예를 들어 아래와 같이 자바스크립트 파일로 구..

마이크로 서비스 패턴의 필요성을 언급하라고 하면, 제일 먼저 나오는 패턴이 큰 진흙 공(Big ball of Mud) 패턴이다. 딱 봐도 좋은 느낌은 아니다. 하지만 하나의 WAR 파일 하나로 애플리케이션을 패키징 하는 모놀리식 패턴 대부분 겪고 있는 문제이기도 하다. 비단 작은 회사들의 문제만은 아니다. A Big Ball of Mud is a haphazardly structured, sprawling, sloppy, duct-tape-and-baling-wire, spaghetti-code jungle. These systems show unmistakable signs of unregulated growth, and repeated, expedient repair. Information is sh..

이벤트란? events are actions or occurrences that happen in the system you are programming. 이벤트는 프로그래밍 중인 시스템에서 발생하는 동작(actions) 또는 발생(occurrences)이며, 동기식 혹은 비동기식으로 전달된다. 시스템은 이벤트가 발생할 때 어떤 종류의 신호를 생성(또는 발동)하고 어떤 종류의 동작이 수행될 수 있는 메커니즘을 제공한다. 이벤트가 발생하면 자동으로 일부 코드가 실행되며 동작한다. 이벤트 핸들러 이벤트 핸들러(event handler)란, 이벤트가 발생할 때 실행되는 함수를 말하며, 이벤트 리스너(event listeners)라고도 불린다. 하지만 엄밀히 말하면 이벤트 리스너는 이벤트 발생을 수신하며, 이벤..

이전 회사에서 RxJS를 직접 사용하여 프로젝트를 진행했었다. 하지만, 그때는 경험이 적어 솔직히 많은 이해를 하지 못했던 거 같다. 다음 회사에서는 또 RxJS를 사용하지 않아 그나마 알던 사실도 까먹었다. 몇일 전 우연히 사내 발표를 하게 되었다. 주제를 고민하던 중 RxJS가 눈에 들어왔다. 다시 RxJS를 보니 새로웠다. 이해가 예전보다 많이 된다고 해야하나... 처음 봤을 때는 어렵다고만 느꼈고, 외우기 급급했지만, 지금 보니 정말 멋진 컨셉과 매력이 넘치는 기술이었다. 그리고 npm에서 다운로드 횟수를 보니, 작년에 내가 사용할 때보다 더 많은 사람이 다운로드 받고 사용하고 있었다. 발표 주제는 바로 이거다. 다시 한번 RxJS를 공부해 보자. 먼저 RxJS에 대한 이야기를 하기전에 promi..

오늘은 정말 간단한 항상 보이는 스크롤바를 구현하려고 한다. 위와 같이 일반적인 웹사이트에서는 사실 사용할 일이 많지 않다. 오히려 스크롤이 계속 남으면 거슬리기만 하고, 사용자 경험을 높이진 않을 것이다. 그럼 언제 필요할까? 나 같은 경우는 관리자 페이지를 구현할 때 사용했다. 커머스 어드민의 경우 Table을 그린다고 했을 때 컬럼이 정말 많다. 가격, 상품명, 상품번호, 쿠폰 적용, 할인가, 공급가, 전시 여부 등 나열하면 끝도 없다. 조금 극단적으로 보여준다면 아래와 같은 그림이 된다. 1번 영역은 이미 화면 밖으로 벗어난거라고 생각하면 되고, 2번 영역이 우리가 보면서 디자인이 완성된 카드 부분이라고 생각하면 된다. 저 밖으로 벗어나가면 가로 스크롤을 통해서 내용을 볼 수가 있겠지만, 어드민 ..

간단하게 아코디언(Accordion)을 구현해 보려고 한다. 사실 Bootstrap, Material-ui 등 이미 많이 구현되어 있어서 직접 구현할 일은 많지 않겠지만, 자체 디자인 시스템을 만들기 시작한 지 얼마 안 되었다면 가끔은 직접 구현할 일도 있다. 사실 내 이야기이다... 뭐 여하튼... 어려운 것은 아니니깐 살짝만 구현해 보려고 한다. Accordion이 뭔데? Accordion은 접었다 펼수 있는 카드 컴포넌트라고 생각하면 쉽다. 예를 들어 실제 우리 홈페이지에서 내가 구현한 컴포넌트를 본다면 아래와 같은 모습이다. 결제 페이지인만큼 애니메이션은 과하지 않은 선에서 자연스럽게 적용해봤다. Typescript와 styled-components를 이용해서 만들어 봤는데, 사실 성능을 생각한다..

기존 아키텍처 일반적인 애플리케이션은 쿼리하고 업데이트를 하는 것에 동일한 데이터 모델을 사용한다. 간단한 애플리케이션에서는 이것이 적합하다. 하지만 애플리케이션이 복잡해질수록 위 방법은 어려워진다. 왜냐하면 애플리케이션은 읽기 쪽에서 다른 쿼리를 실행할 수 있고, 그러면 모양이 다른 DTO를 반환하기 때문에 개체 매핑이 복잡해지기 때문이다. 또한 동일한 데이터 집합에서 작업을 병렬로 수행할 때 데이터 경합이 발생할 수 있으며, 데이터 저장소 및 데이터 액세스 계층에 대한 로드 및 정보를 검색하는데 필요한 쿼리의 복잡성으로 성능에 부정적인 영향을 미칠 수 있다. 그리고 각 엔터티는 읽기 및 쓰기 작업의 대상이 되므로 잘못된 컨텍스트에서 데이터를 노출할 수 있으으로 보안 및 사용 권한 관리가 복잡해질 수 ..

DB를 업데이트하는 것은 기존의 도큐먼트에 "(덮어) 쓰기"를 하는 것이다. 업데이트를 하는 방법에는 두 가지가 있으며 제목에 대한 이야기를 하기 전에 간단하게 "대치에 의한 update"와 "연산자에 의한 update"를 먼저 짚어보자. 대치에 의한 Update 특정 유저에 상품의 좋아요 카운트를 증가시키는 경우에 대해서 예를 들어보자. const product_id = ObjectId("5da78973835b2f1c75347a83"); const doc = db.products.findOne({_id: product_id}); document['total_like'] += 1; db.products.update({_id: product_id}, doc); 먼저 products에 _id를 가지고 먼저 ..