킹의 개발일지

지난 포스팅에서 bun.js이 뭔지 간략하게 알아보았다. 오늘은 bun.js를 써서 간단한 HTTP 서버를 만드는데 필요한 Bun.server API에 대해서 알아보고자 한다. 설치 bun은 윈도우에 정식으로 빌드를 제공하고있진 않다. 실험적인 빌드를 제공한다고는 하는데 오직 bun runtime만 제공한다고 한다. 때문에 윈도우를 사용하고있는 나로써 WSL을 사용해서 bun을 받아야한다. 사용법은 아주 간단하다. 윈도우 스토어에서 Ubuntu를 찾아서 다운받아주면 끝이다! 원하는 버전을 고르고 다운로드를 하면 윈도우에서 우분투 환경을 사용할 수 있다. 우분투가 준비됐으면 bun.js을 다운받기 위해 'unzip' 툴이 필요하다. 다음 명령어로 unzip 툴을 다운받자. sudo apt install u..

문제의 발단 토이 프로젝트를 진행하면서 구현하고자 하는 로직은 간단했다. add task로 생성한 Task 컴포넌트를 drag and drop을 사용해서 원하는 보드에 올려두면 저장되는 로직이다. 생각했던 방법은, react의 Context Api를 사용해서 전역 상태를 관리하고, drag end(끌어서 보드위에 올리는) 이벤트가 발생시 POST를 날리는 것이다. 그러나 Sorting 기능을 넣고나서, 가끔씩 drag over(드래그 중인 컴포넌트가 task 또는 보드, 즉 droppable 컴포넌트 위로 지나갈 때) 이벤트가 일어날 때 문제가 발생했다. 보드 위에서, 현재 드래그 중인 Task의 순서를 정하기 위해 기존 Task들 사이로 컴포넌트를 움직이다가 컴포넌트를 놓으면 db에 저장된 Task의 ..

bun에 대해서는 유튜브를 탐방하다가 우연히 알게 됐다. 영상 제목부터 '속도가 미쳤습니다. bun!', '노드보다 4배 빠르다던데... ' 그리고 썸네일은 막 불에 타는 만두?와 속도를 비교하는 그래프를 보여주면서, '얘는 엄청 빨라!' 라는 것을 대문짝만하게 광고하고 있었다. 그런 영상들에 매료되어 bun 이라는 놈을 맛보기로 마음먹었다. 그래서 bun 너는 뭐야? bun.js 공식 홈페이지에 들어가면 다음과 같이 설명한다. Bun is a fast JavaScript runtime, package manager, bundler, test runner, all-in-one toolkit. Develop, test, run, and bundle JavaScript & TypeScript projects..

45일차 이전 파트에서 반응형 아키텍처에 대해서 저자는 ' 반응형 아키텍처에서는 하려고 하는것만 처리한다. 그리고 모든 것은 어떤 일이 일어나면 그에 대한 응답으로 처리한다.' 라고 설명 했었다. 이를 지금까지 봐왔던 '장바구니 예제'를 가지고 이해해 보자. 장바구니 예제에서는 전역 상태는 장바구니 하나뿐이다. 때문에 필요한것은 장바구니가 변경될 때 Y(특정 행동) 하는것이다. 우선 장바구니를 몇 가지 동작과 함께 객체로 만들어보자. 다음 함수는 변경 가능한 값(장바구니)을 일급 함수로 만드는 코드이다. #ValueCell function ValueCell(initialValue) { var currentValue = initialValue; return { val: function() { return ..

44일차 자바스크립트는 다음과 같이 단순한 시간 모델을 가지고 있다. 이는 언어차원에 존재하는 암묵적 시간 모델이다. 위 그림은 단일 스레드로 동작하는 자바스크립트의 암묵적 시간 모델이며 복잡한 프로그래밍에서 발생하는 문제들을 앞에서 살펴보았다. 우리는 이런 문제들을 해결하기위해 Queue, Cut, JustOnce, DroppingQueue와 같은 동시성 기본형을 만들어 보았다. 이런 동시성 기본형들은 명시적 시간 모델이다. 이제 우리가 만들었던 명시적 시간모델들의 기본적인 타임라인 다이어그램을 보도록 하자. 확실히 암묵적 시간 모델에 비해 명시적 시간 모델은 예기치 못한 동시성 문제들을 우리가 컨트롤 할 수 있게 만들어 준다. 18장부터 더 높은 수준에서 설계와 아키텍처에 대해 설명한다. 여기서 소개..

43일차 저번 파트에서는 Cut 메서드를 사용해서 두 ajax 콜백 중 마지막 콜백이 호출 됐을 때 실행 될 콜백을 지정해 타임라인을 조율 해 보았다. 이와 비슷하게 첫 번째 타임라임에 콜백이 실행되도록 하는 동시성 기본형을 만들어볼 수 도 있다. 이는 JustOnce()라고 해보고 만들어보자. 먼저 누군가에게 메세지를 보내는 함수를 사용한다고 해보자. # sendAddToCartText function sendAddToCartText(number) { sendTextAjax(number, "안녕하세요!"); } 다음은 어떤 함수를 새로운 함수로감싸는 JustOnce() 동시성 기본형이다. # JustOnce function JustOnce(action) { var alreadyCalled = false..

42일차 저번 파트에서 마친 타임라인 그리기 1, 2단계에, 마지막 3 단계, 단순화 작업을 이어가보자. 3 단계는 액션을 통합하고 타임라인을 통합하는 작업이다. 하나의 타임라인에 있는 모든 액션은 하나로 통합한다. 타임라인이 끝나는 곳에서 새로운 타임라인이 '하나만' 생긴다면 통합한다. 단순화 작업이 끝난 다이어그램은 다음과 같다. #다이어그램 이렇게 타임라인 다이어그램을 그려서 보니 문제점이 눈에 보이기 시작한다. cost_ajax 콜백과 shipping_ajax 콜백중 어느것이 먼저 실행될 지 알수가 없다. 만약 shipping_ajax의 콜백이 먼저 실행된다면 제품 가격 없이 total이 DOM에 업데이트 되는데, cost_ajax의 응답을 받기전에 DOM이 업데이트됨으로 이것은 우리가 의도하지 ..

41일차 다른 부서에서 사용자 인터페이스 속도를 개선해 달라는 요청이 생겼다고한다.. 최적화된 코드를 먼저 살펴보자. # 최적화한 후 function add_item_to_cart(item) { cart = add_item(cart, item); update_total_queue(cart); } function calc_cart_total(cart, callback) { var total = 0; cost_ajax(cart, function(cost) { total += cost; }); shipping_ajax(cart, function(shipping) { total += shipping; callback(total); }); } function calc_cart_worker(cart, done) {..

40일차 저번 파트에서 Queue 메서드로 공유하는 자원을 안전하게 만드는 방법을 알아보았다. 하지만 이전에 만들었던 코드는 재사용하기 어려운 코드다! 오직 update_total_dom만 사용할 수 있기에 함술 본문을 콜백으로 바꾸기 리팩터링을 적용해서 큐를 반복해서 처리하는 코드와(runNext()를 부르는 코드) 큐에서 하는일을(calc_cart_total()을 부르는 코드) 분리해 보자. 그리고 나아가 더 많은 동작에 재사용할 수 있도록 해보자. # 개선된 코드 function Queue(worker) { var queue_items = []; var working = false; function runNext() { if (working) return; if (queue_items.length ..

39일차 지금까지 타임라인끼리 공유 자원을 줄이는 방향을 배웠다. 저자또한 자원을 공유하지 않는 타임라인이 가장 좋다고 말한다. 하지만 자원 공유가 필요한 경우가 있는데, 이때 자원을 안전하게 공유하기 위한 동시성 기본형(concurrency primitive)이라는, 재사용 가능한 코드를 만드는 방법을 알아보자. 그럼 '안전하게 공유한다' 이 말은 무엇일까, 저자는 '올바른 순서대로 자원을 쓰고 돌려준다' 라고 말한다. 저번 파트에서 만들어본 타임라인 예시를 통해서 안전하게 자원을 공유하는 방법을 알아보자. 저번 파트에서 작성한 타임라인에는 DOM을 공유한다는 문제점이 있다. 저번 파트에서 그린 타임라인을 보면 두 타임라인 모두 마지막에 DOM을 업데이트한다. 이는 잠재적인 문제를 안고 있는데, 첫 번..