본문 바로가기

dev-log

 (13)
[Granola] 프로젝트 1차 이터레이션 회고 그래놀라 그래놀라는 TodoMVC의 데스크탑 버전입니다. 시간을 덤덤하게 사용하고 싶은 마음에 저만의 투두 프로그램을 만들었습니다.  그래놀라에서 사용하는 데이터는 주제(bowl)와 할 일 템플릿(flake), 그리고 할 일 인스턴스(todo)로 구성되어 있어요. 사용한 기술 스택Wails(Webview on Rails): wails는 GO를 백엔드로, webkit window를 프론트엔드로 구성한 프레임워크입니다. 상호 통신은 IPC로 이루어지고, Bind라는 컨셉을 통해 struct의 메소드를 타입스크립트 인터페이스로 노출시킬 수 있습니다. 일렉트론을 안쓰고 Wails를 사용한 이유는 새로운 언어에 익숙해지고 싶은 마음과, 이왕이면 경량화된 프로그램을 만들어보고싶은 마음 때문입니다.  GO와 관련된 ..
GO의 자동화 테스트 정리 GO의 테스트 환경은 go test 툴과, 테스트와 관련된 컨벤션으로 구성된다. GO에서 테스팅 할 수 있는 요소는 자동화 테스트, 벤치마킹, 예시(go doc에서 활용)가 있다. 이 글에서는 자동화 테스트에 포커스를 두고 기록해본다. 컨벤션go test 툴은 테스트 드라이버로 컨벤션이 맞춰진 패키지를 테스트한다. 이 드라이버는 패키지 디렉토리에서 _go.test 로 이루어진 파일에 대해 테스트를 수행한다. 이 파일에서 자동화 테스트, 벤치마킹, 예시를 작성하는데 자동화 테스트는 TestName과 같이 Test이 접두인 함수에 해당한다. 테스트 함수의 컨벤션은 다음과 같다.// 파라미터는 테스트에 대한 로깅, 리포트와 관련된 메소드를 제공한다.func TestName(t *testing.T) { /* ...
[Granola] 002 만드는 것 자체에 재미를 느끼는 경험은 처음인 것 같다. 일이라고 생각하면 그 무게가 자주 압박처럼 느껴지기 때문에 더더욱 이 기분이 소중하다. use, useActionState 모두 사용하기 편하다. 캐싱해둔 상태는 딱 한 개 뿐이고 직접적인 도메인과 관련된 캐싱은 라우트 레이어에서 하고 있다. useActionState는 이런 방식으로 사용하고 있다. use는 context와 promise 처리(1, 2)를 위해 사용하고 있다.Tanstack Router으로 개발을 하고 있다. React Router와 Next가 가지는 장점들을 모두 가져온 느낌이다. file-based routing을 . 할 때 CLI가 자동으로 타입을 만들어주기 때문에 개발 생산성이 되게 편하다. shadcn/ui으로 UI를 ..
Two Events 이벤트 드리븐 프로그래밍은 “프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식”이다. 브라우저에서 돌아가는 프로그램의 구성 요소(EventTarget)는 “특정 타입” 에 대한 이벤트에 대해 “이벤트 핸들러”를 브라우저에 등록하고, 그 이벤트가 발생하면 브라우저로 하여금 이벤트 핸들러를 호출하도록 한다. 이러한 맥락에서 이벤트는 발생한 사건(occurance)의 성격을 가진다. 하지만 이벤트 드리븐 프로그래밍에서의 이벤트는 단순히 발생한 사건만을 의미하지는 않는다. 때로 이벤트는 무언가를 하도록 한다는 행위(action)으로서의 성격을 가질 수 있다. 자바스크립트 딥다이브 40장을 공부하면서 이벤트의 두 가지 성격에 대해 구분해서 생각하면 좋을 것 같아 이 글을 작성하게 되었다.  사건으로서의 ..
[Granola] 001 그동안 개발을 안하다가 오늘부터 데스크탑 프로그램을 개발하기 시작했다. 이름은 그래놀라. 누군가는 밋밋하다며 기피하지만 누군가는 그 담백한 맛을 좋아해서 찾는 시리얼 이름이다. 나에게 그래놀라는 시간이다. 조금은 밋밋하게 썼던 시간들을 바라보고 싶다. 그래서 만들어본다.     아래는 오늘 작업을 진행하면서 느낀점과 해결해야할 과업이다 1. 언어는 뭘 만드는데 그렇게 중요한 것 같지 않다. 언어 자체만 보면 그렇다. 이 프로그램은 GO와 타입스크립트로 만들고 있는데, GO로도 충분히 데스크탑 앱을 만들 수 있다. 2. 개발을 오랜만에 다시 하니 재밌다.  3. 컴파일 할 때 마이그레이션 코드가 실행된다 -_- 앱이 스타트업 될 때 마이그레이션 코드를 실행시키는 걸로 바꿔야 한다. 4. Go의 테스트 시스..
[Javascript] Promise.all Promise.all 메소드에 전달되는 인자는 Iterable | T> 타입의 값이다. 얼핏 보면 간단한 이 구문은 중요한 함의를 가진다. 자바스크립트 언어의 맥락 속에서 Promise 값 자체는 동시에 처리될 수 없다는 것이다. 이유는 실로 간단하다. 자바스크립트 코드는 싱글 스레드로 처리되기 때문이다. Worker나 Worklet은 엔진이 따로 격리되어 작동하지만 그 안에서 자바스크립트 언어는 여전히 싱글 스레드로 처리된다. Promise.all에 배열을 넣고 await을 걸면 배열 안에 아이템이 동시에 처리되는 것처럼 보인다. 근데 Promise Constructor를 실행하는 것은 동기적으로 처리된다. 동시에 네트워크 처리를 하는 건 자바스크립트가 해주는 것이 아니라 자바스크립트를 둘러싼 런타임의..
I/O와 리소스 스트림에 대한 단상 Input/Output은 컴퓨터와 바깥 세상 간의 상호작용이다. 프로그램의 입장에서 Input은 바깥 세상으로부터 받은 전기신호, 또는 데이터이다. 프로그램의 입장에서 Output은 바깥 세상으로 보낸 전기신호, 또는 데이터이다. Input과 Output은 각각과 관련된 동작을 설명하기도 한다.입력은 데이터가 어디에서부터 램으로 이동하는 것, 또는 이동하는 흐름.출력은 컴퓨터가 입력을 받아 결과를 내는 것, 또는 결과를 내는 흐름 으로 쓰인다.디스크, 다른 서버, 다른 디바이스 = 대상 입력 출력대상 --------> 컴퓨터 -------> 대상내가 어떤 대상으로부터 데이터를 읽는다 = 입력내가 어떤 대상으로 데이터를 보낸다 = 출력리소스란프로그램의 세계로부터 그 너머의 ..
[JavaScript] 자바스크립트의 배열 최근 감사한 기회로 짝꿍이 활동하고 있는 스터디 그룹에 참여하게 되었다. 이번 주는 배열에 관한 주제로 이야기를 나누는 시간이다.나는 자바스크립트 배열은 배열이 아니라는 것과 자바스크립트 배열은 희소 배열이라는 것에 대해서 이야기를 해보고 싶다.자바스크립트의 배열은 배열이 아니다.먼저, 자바스크립트 배열이 아닌 배열은 무엇일까? 이 배열은 밀집 배열이라고 부르는데, 주로 다음과 같은 특징을 가진다.1. Fixed Capacity: 요소가 들어갈 수 있는 개수가 정해져 있다. 이 개수는 바뀌지 않는다.2. Contiguous Memory: 배열은 연속된 메모리 공간을 차지하며 인덱스(offset)를통해 특정 메모리 공간에 접근할 수 있다. 많은 언어가 밀집 배열을 자료형으로서 지원하기 때문에 자연스럽게 ..
URL과 프론트엔드 상태에 관한 짧은 생각 프론트엔드 개발은 화면에 보일 요소를 어떤 값을 기반으로 처리하도록(보이도록) 표현하는 행동이고 리액트에서 이 값의 성질은 props 아니면 state 으로 표현된다. 리액트가 관리하지 않지만 리액트에서 관리할 필요성이 있는 state가 한가지 더 있다. URL이다. 물론 프로덕트의 작동 방식을 어떻게 결정하는지에 따라 다르지만, URL이 상태가 될 수 있는 기획은 정말이지 많을 것이다.  유저가 iphone을 입력하고 3페이지에 있는 내용을 URL로 복사해서 공유하도록 해주세요! 라는 스펙이 결정됐다고 해보자. 그러면 URL에는 쿼리스트링으로 검색어에 관한 키와 값, 페이지에 관한 키와 값이 있어야 한다. 예를들면 다음과 같다. https://service.xyz/products?q=iphone&pa..
렌더링 렌더링 그놈의 렌더링 렌더링은 리액트에서 컴포넌트를 이루고 있는 요소가 무엇인지 계산하는 과정이다. '브라우저 렌더링' 혹은 'UI 렌더링'의 렌더링은 리액트에서 '페인팅' 이라는 용어로 사용하기 때문에 용어의 혼동에 주의해야 한다. 리액트에서는 다음과 같은 순서를 거쳐 화면에 UI를 보여준다. Triggering - Trigger Render(Queue Render) 렌더링 과정을 트리거 하는 단계로, 그 주체는 앱을 초기화하는 단계인지 초기화된 이후의 단계인지에 따라 나뉜다. 전자의 경우 호스트 라이브러리(ReactDOM, ReactNative)에서 최초 렌더링을 트리거하며 후자의 경우 다음의 시점에서 렌더링을 트리거 한다. 1. useState의 setter를 호출한 시점 2. useReducer의 dispatch를 호..

티스토리툴바