성장, 그리고 노력

부족하더라도 어제보다 더 잘해지자. 노력은 절대 배신하지 않는다.

전체 글 125

언제 Promise.all을 사용해야 될까?

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

Javascript 2020.08.22

CSS-in-JS

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

Javascript 2020.08.19

webpack 뭐하는 걸까?

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

Javascript 2020.08.18

모놀리식 아키텍처와 마이크로 서비스 아키텍처의 장점과 단점

마이크로 서비스 패턴의 필요성을 언급하라고 하면, 제일 먼저 나오는 패턴이 큰 진흙 공(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)라고도 불린다. 하지만 엄밀히 말하면 이벤트 리스너는 이벤트 발생을 수신하며, 이벤..

Javascript 2020.08.13

다시 보는 RxJS - 기본편 + Observable 만들기

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

RxJS 2020.08.10

React + Styled-components로 항상 보이는 스크롤 구현하기

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

React 2020.07.26

React + Styled-components로 구현해본 아코디언(Accordion)

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

React 2020.07.26

CQRS 패턴 개념

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

CQRS 2020.07.05

[MongoDB] Update ... 대치? 연산자? 뭐가 더 좋을까

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를 가지고 먼저 ..

MongoDB TTL 컬렉션

파일 시스템 관련 개발하던 중, MongoDB에 재밌는 컬렉션이 있어서 기록을 남겨본다. 민감 정보가 있는 다운로드 내역이라면, signedUrl로 일정 시간만 다운로드를 가능하게 하고 일정 기간이 지나면 완전히 컬렉션에서 사라지게 한다면 조금 더 안전한 운영이 가능하지 않을까? 또는 일정 기간만 로깅용으로 데이터를 보유하고 그 이후에는 사용하지 않는다면, 이 컬렉션은 매력적일 거 같다. TTL 컬렉션(Time-To-Live) MongoDB는 컬렉션에서 특별한 인덱스를 사용하여 구현한, 특정 시간이 경과한 도큐먼트를 자동으로 제거(remove)시킬 수 있는 기능을 제공한다. 위 명령을 통해 lastModifiedDate에 인덱스를 생성하게 된다. TTL 인덱스를 생성하는 조건은 날짜 또는 날짜 값을 포함..

MongoDB 기초

현 회사에서 GraphQL + mongoDB를 사용하다 보니, (물론 관계형 데이터 베이스도 사용하지만) 몽고 디비의 관한 내용을 얼추 알지만, 조금 더 정리하고 싶어서 시작한 포스팅. 얼른 뽀개자. MongoDB란? MongoDB는 도큐먼트 지향적인 데이터베이스다. NoSQL (비관계형 데이터베이스)로 JSON Type의 데이터 저장 구조를 가지며, Memory Mapping 기술을 기반으로 Big Data 처리에 탁월한 성능을 제공하고 있다. 또한 시스템 장애가 발생하더라도 안전하게 데이터를 보관하고 운영할 수 있도록 샤딩(분산, Sharding)과 레플리카(복제, Replica)를 제공하고 있다. 좀 더 자세한 내용은 이후에 설명하도록 하겠다. 내부적으로 MongoDB는 Binary JSON 혹은 ..

[클린 아키텍처] 업무 규칙

업무 규칙 업무 규칙에는 여러 가지가 존재한다. 업무 규칙이란 쉽게 말하면 사업적으로 수익을 얻거나 비용을 줄일 수 있는 규칙 또는 절차이다. 컴퓨터상으로 구현했는지 여부는 중요하지 않다. 예를 들어 대출에 N%의 이자를 부과한다는 사실은 은행이 돈을 버는 업무 규칙이다. 이것을 컴퓨터가 계산하건 직원이 계산하건 중요하지 않다. 그리고 이러한 규칙을 클린 아키텍처에서는 핵심 업무 규칙(Critical Business Rule)이라고 부른다. 사업 자체에 핵심적이며, 규칙을 자동화하는 시스템이 없더라도 업무 규칙은 그래도 존재하기 때문이다. 이러한 핵심 규칙은 보통 데이터를 요구한다. 예를 들어 대출에는 대출 잔액, 이자율, 지급 일정이 필요하다. 클린 아키텍처에서는 이를 핵심 업무 데이터(Critical..

[클린 아키텍처] 컴포넌트 응집도와 세 가지 원칙

클린 아키텍처를 읽으며 정리 중이다. 봐도 봐도 좋은 책인 거 같다(까먹는 내가 문제지만...). 꼭 이 책에 의존적인 내용을 다루진 않겠지만 기초는 클린 아키텍처에 두고 있다고 알고 보면 좋을 거 같다. REP: 재사용/릴리스 등가 원칙(Reuse/Release Equivalence Principle) CCP: 공통 폐쇄 원칙(Common Closure Principle) CRP: 공통 재사용 원칙(Common Reuse Principle) REP: 재사용/릴리스 등가 원칙 재사용 단위는 릴리스 단위이다. 효과적인 재사용을 위해서는 변경 제어 시스템에서 릴리스를 추적해야 한다. 패키지는 효과적인 재사용 및 해제 단위이다. 소프트웨어 컴포넌트가 릴리스 절차를 통해 추적 관리되지 않거나 릴리스 번호가 부여..

처음 접해보는 MobX - 1편

이번 글은 MobX의 사용에 관한 부분이나 코드 등을 다루진 않는다. 그냥 배워보기 전에 약간의 배경지식(?)이라고 하면 될 거 같다. 꼭 필요한 글은 아니니, 궁금하지 않다면 바로 다음 글을 읽어봐도 좋다. 시작 전 넋두리.. 리액트로 앱을 만들면서 얼마 안돼, 우리는 상태 관리에 대한 고민을 시작한다. 특정 컴포넌트의 상태 값을 다른 컴포넌트와 공유하고 싶다는 생각이다. 그래서 처음에는 prop을 통해 상위 컴포넌트로 상태 값을 전달하기 시작한다. 물론 매우 훌륭한 방법이다. 하지만, 또다시 위기에 봉착한다. 컴포넌트가 많아지고 그 깊이가 깊어질수록 상태 값을 전달하는 게 너무 복잡해지기 때문이다. Redux is a predictable state container for JavaScript app..

상태관리 2020.02.13

트렁크 기반 개발(Trunk-Based Development)

아래 그림은 내가 평소에 사용하던 github branching stategy이다. 이슈마다 feature 브랜치를 생성 후 마스터 브랜치에 merge 하는 방식이다. 경우에 따라서 여기에 develop 브런치나 release 브런치를 추가로 만들어 관리하는 경우가 있다. 이 방식은 git branching stategy보다 적용하기 쉬워 평소에도 협업할 일이 있다면 이 방식으로 많이 사용하는 편이다. 다른 것들을 검토하기 전에 먼저 내가 자주 사용하던 GitHub Flow를 먼저 살펴보자. 이슈 관리툴(Jira 등)에서 백로그(BackLog)를 확인하고 작업할 내용을 선택한다. 개발자는 master에서 새 브랜치(feature)를 만들고 작업을 한다. 원하는 지점에서 commit하고 push 하며 이를..

RxJS 기초 - 스트림(Stream)

RxJS는 파일 읽기, HTTP 호출, 키 입력 또는 마우스 움직임 등의 이벤트 데이터 소스를 처리하는 단일 프로그래밍을 사용하여 콜백 또는 Promise 기반 라이브러리를 정확히 같은 방식으로 대체한다. 그리고 RxJS를 사용하면 시간 경과에 따라 분리된 대용량 데이터를 보다 간결하고 선언적으로 처리할 수 있다. 파이프라인은 데이터를 사용할 수 있을 대 순서대로 실행되는 일련의 로직 영역(비즈니스 로직 영역)이다. 그리고 왼쪽에 있는 웹은 이벤트 생성자이며, 애플리케이션에서 소비될 다양한 형태의 데이터를 생산하는 데이터 소스가 있는 곳이다. 소바자는 받은 데이터로 무엇인가를 하거나 이벤트들을 구독하는 개체이다. 마지막으로 파이프라인에 스트림을 변환한다고 써있는데, 스트림은 시간에 따라 발생하는 일련의 ..

RxJS 2020.02.01

왜 RxJS를 사용해야 하는가?

2020/01/27 - [Javascript] - 1부 - 자바스크립트 함수 표현식, IIFE 그리고 비동기 2020/01/28 - [Javascript] - 2부 - 자바스크립트 비동기적 프로그래밍(콜백, 프라미스) 이미 앞에서 콜백(callback)과 프라미스(promise)라는 멋진 개념들을 살펴봤다(asnyc await는 나중에 살펴볼 것이다). 그런데 궁금해 진다. 웹이 커지며 여러 요구 사항이 등장하여 여러 콜백을 중첩시켜 연속 전달 스타일(CPS, Continuation-Passing Style)을 사용했다. 그리고 가독성부터 코드 추측이 어렵기 때문에 ES6에서는 FP(Functional Programing) 패턴을 따른 Promise을 대안으로 제시했다. 그런데 왜 RxJS를 공부해야 할..

RxJS 2020.02.01

동기(Synchronous) vs 비동기(asynchronous) 그리고 IOC

사실 이 주제는 자바스크립트에만 종속된 이야기는 아니지만, 대부분의 개념을 자바스크립트를 통해 설명할 것이기 때문에 자바스크립트라는 카테고리에 위치시켰다. 동기(Synchronous) vs 비동기(asynchronous) 동기와 비동기로 작성한 코드의 가장 큰 차이 중 하나는 런타임(runtime)시에 발생하는 지연시간(latency)이다. 모든 코드가 동기적으로(순서대로만) 실행된다면 어떤일이 벌어질까? 내가 만약 메시지를 보낸다고 하면 메시지를 보내고 응답이 오기까지 아무것도 할 수가 없다. 왜냐하면 앞에 작업이 아직 안 끝났기 때문이다. 물론 이런 방식이 전혀 사용이 안되는 것은 아니다. ATM 기계, 키오스크, 단순 단말기 같은 방식은 이런 동기적인 방식을 따르고 있다. 동기적 방식의 장점은 코드..

Javascript 2020.02.01
반응형