발견 보고서

위 이미지처럼 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 Component Driven Development (CDD)이라 한다. 이런 방식으로 개발을 이어나가게 되면, 혹시나 수정이 들어오게 되더라도 모든 페이지에 대한 수정을 거치치 않고도 독립적인 컴포넌트를 수정하여 유동적으로 변경이 가능하게 된다. 또한 각 기술에 따른 독립적인 개발을 지향하다보니 재사용성도 늘어나 효율적인 코딩을 할 수 있게 된다. CDD가 트렌드로 자리잡으며 이 방식에 도움을 줄 수 있는 다양한 라이브러리가 등장했는데, 그 중 Story Book을 익히고자 한다. 먼저 Story Book이란 무엇일까? Storybook is an open source tool for building UI components and pag..

Node JS 동작원리 Node.js는 자바스크립트를 활용하여 고성능의 비동기 I/O를 지원하는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. (소프트웨어 플랫폼은 런타임과 동일한 개념이다. 반드시 소프트웨어가 포함되어야 한다. 플랫폼 자체는 하드웨어 뿐만 아니라 실제 세계에서 쓰이는 아주 넓은 표현이기때문이다.) https://www.quora.com/Whats-the-difference-between-a-platform-and-a-runtime-environment What's the difference between a platform and a runtime environment? Answer (1 of 2): Hello there, These terms are ..

Side Effects 우리가 작성한 코드 혹은 함수에 side effects가 있는지 어떻게 알 수 있을까? 먼저 side effects에 대해 짚어보기 전에 왜 side effects에 대해 알아야 하는지 짚어보고자 한다. 현대 코딩에서 선언형 프로그래밍의 패러다임이 주를 이루고 있다. 그 방식은 함수형 프로그래밍을 통해 이뤄지고 있는데, 이 함수형 프로그래밍은 명령형 프로그래밍으로 인해 생겼던 수 많은 side effects들을 줄여주게 되었다. 여기서 side effects는 외부 상태의 변화에만 국한되지 않고, Input과 Output, database, log system, API와 같은 것들과 상호작용하면서 영향을 줄 수 있는 경우들을 전부 가리킨다. 즉, 우리가 통제하고자 하는 모든 부분들..

미들웨어 작동 원리 이해하기 먼저 미들웨어 작동원리를 이해하기 위해 자주 사용하는 미들웨어를 적용하면서 정리해보려 한다. 미들웨어를 자주 사용하는 상황 모든 요청에 대해 url이나 메소드를 확인할 때 POST 요청 등에 포함된 body(payload)를 구조화할 때(쉽게 얻어내고자 할 때) 모든 요청/응답에 CORS 헤더를 붙여야할 때 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때 미들웨어를 이용하면 node.js만으로 구현한 서버에서는 번거로울 수 있는 작업을 쉽게 적용할 수 있다. case 1: 모든 요청에 대해 url이나 메소드를 확인할 때 미들웨어는 말 그대로 프로세스 중간에 관여하여 특정 역할을 수행한다. 수많은 미들웨어가 있지만, 가장 단순한 미들웨어 로거(logger)를 예로 들어보면..

클라이언트 서버 아키텍쳐 상품 정보 혹은 금융 정보같은 리소스가 존재하는 곳과, 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처 또는, 클라이언트-서버 아키텍처라고 부른다. 리소스를 사용하는 앱이 바로 "클라이언트", 리소스를 제공(serve)하는 곳은 "서버"라고 부른다. 즉 상품 정보 자체를 전달하는 것에 초점이 맞춰진 것은 서버이며, 클라이언트에서는 그 리소스를 조회하는 것에 중점이 있다. 리소스에 접근하려는 앱은, 카페로 치면 손님과 같다. 손님은 아메리카노를 획득하기 위해, 리소스를 가지고 있는 점원에게 요청해야 한다. 손님의 요청에 따라, 점원은 리소스를 담아 응답한다. 이처럼 클라이언트와 서버는 요청과 응답을 주고 받는 관계이고, 클라이언트-서버 아키텍처에서는 요청이 선행되고, 그 후에..

Promise는 콜백의 단점을 해결하려는 시도 속에서 만들어졌다. Promise 자체가 콜백을 대체할 수 있는 것은 아니다. Promise에서도 콜백을 사용하는 것을 보면 확실히 알 수 있다. Promise를 사용하면, 콜백 함수의 결과를 비교적 예측하기 쉽게 만들어준다. Promise 기반 비동기적 함수를 호출하면, 그 함수는 Promise 인스턴스를 반환한다. Promise는 성공(fulfilled)하거나 실패(rejected)하거나 단 두가지의 경우밖에 가지지 않는다. (Resolve -> 성공, Reject -> 실패) Promise가 성공하거나 실패하면, 그 Promise를 결정(Settled)됐다고 한다. Promise는 객체(내장 객체)이므로 어디든 전달할 수 있다는 점도 콜백에 비해 간편한..

Side Effect(부수효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다. 예시를 통해 설명해보면, let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킨다! bar() 함수는 왜 side effect를 발생시킨다고 할까? console을 찍어보면 알 수 있다. 콘솔창에서 foo를 찍어보면 알 수 있듯, 전역변수인 foo에 영향을 미친 것을 볼 수 있다. 이렇게 되면, 전체적인 기능 구현에 있어서 엄청난 문제를 일으킬 수도 있다. (우리가 var를 안쓰는 이유와 비슷하다고 느껴진다.) Pure Function (순수 함수) 순수 함수란, 오직 ..

Node.js 기본 철학 경량 코어 코어에는 최소한의 기능 세트만 가지고 있고, 코어의 바깥 부분에 유저랜드(userland) 혹은 유저스페이스(userspace)라고 부르는 사용 전용 모듈 생태계를 두는 것 코어란? 플랫폼 자체의 코어이다. Node.js는 거의 기본적인 기능만 제공한다. 어떤 실험을 진행하라고 과학자들에게 실험실을 제공해준 것이다. 이 가장 기본적인 원칙이 Node.js 문화에 엄청난 영향을 주게 됐다. 다른 언어들처럼 플랫폼 자체가 굉장히 엄격하게 관리되면서 느리지만 대신에 안정적인 진화방식을 택하는 대신에 커뮤니티가 사용자 입장에서 여러가지 넓은 해결책들을 실험해볼 수 있는 자유를 준 것이다. 어떤 실험들을 할 수 있었을까? 코어를 최소한의 기능세트로 관리하는건 유지보수 관점에서 ..

Node.js 브라우저에서 사용할 수 있는 비동기 흐름은 타이머 혹은 DOM 이벤트와 관련된 상황으로 다소 한정적이지만, Node.js의 경우 많은 API가 비동기로 작성되어 있다. Node.js 소개 문서의 첫 단락은 Node.js의 정의부터 시작하는데, Node.js는 "비동기 이벤트 기반 자바스크립트 런타임"입니다. 라는 말부터 시작된다. As an asynchronous event-driven JavaScript runtime, Node.js is designed to build scalable network applications. About | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nod..

Rest API ( Representational State Transfer) 로이 필딩의 박사학위 논문에서 웹(http)의 장점을 최대한 활용할 수 있는 아키텍처로써 처음 소개되었다. REST API는 웹에서 사용되는 모든 자원을 HTTP URI로 표현하고, HTTP Method를 통해 요청과 응답을 정의하는 방식을 말한다. REST API를 사용하려면 REST 아키텍처의 제약 조건을 준수해야 한다. Endpoint root-endpoint(혹은 root-URL) : API로 서버와 통신할 때, 서버가 요청을 수락하는 시작점을 뜻한다. 혹은 API가 시작되는 지점이라고 생각하면 이해가 편하다. Github API의 root-endpoint는 https://api.github.com이고, 트위터 API의..