개요 이번엔 RN(React Native)을 살펴볼 일이 생겼는데, 문득 RN이 어떤 방식으로 JavaScript에서 브라우저 엔진 없이 Native(iOS,Android)에서 상호작용과 UI가 그려지는지 궁금하게 되었다. 이번 글은 RN의 과거와 현재의 아키텍처가 어떤 식으로 구성되어 왔고, 개선된 아키텍처는 어떤 방식의 메커니즘을 가지게 되는지 정리해 보고자 한다. 웹 개발만 해 오던 분들이라면 너무 깊게 이해할 필요는 없을 것 같고, 단순히 React와 RN이 어떻게 다르게 동작하는지를 아키텍처 관점으로만 가볍게 봐도 괜찮을 것 같다. 먼저 RN의 메커니즘을 이해하기 위해선 아키텍처를 이해해야 하는데, RN은 0.68 버전 전부터 적용해 오던 브릿지(Bridge) 메커니즘을 적용하고 있었다. 하지만..
[원문]: https://code.visualstudio.com/blogs/2023/06/05/vscode-wasm-wasi#_how-does-it-work 한때 우리는 웹용 VS Code(https://vscode.dev)를 브라우저에서는 모든 편집 / 컴파일 / 디버그 주기를 지원하는 것을 목표로 하고 있었습니다. 브라우저에서 자바스크립트 실행 엔진이 제공된 후로 자바스크립트와 타입스크립트와 같은 언어는 비교적 쉽게 적용할 수 있었습니다. 하지만 코드를 실행(디버깅 같은)할 수 있게 된 후로 다른 언어에서는 더욱 어려웠습니다. 예를 들어, 브라우저에서 Python 코드를 실행하려면 Python 인터프리터를 실행할 수 있는 실행 엔진이 필요합니다. 이런 언어 런타임은 보통 C/C++로 작성됩니다. 웹 ..
개요 지난 번 오픈 소스 스터디를 위해 tsserver에 관해 조사한 적이 있었다. 당시에는 조사에만 그치고 내부 구조에 대해 파편화된 정보로만 조사했었다. 그런데 타입스크립트를 사용하면서 tsserver의 내부 구조에 관한 글을 본 적이 없는 것 같아 이번 기회에 tsserver에 대해 톺아보기에 시간을 가져가고자 한다. 자 이제 숨 쉬듯 쓰던 TS(TypeScript)가 어떻게 IDE에서 그렇게나 많은 타입을 검사하고, 변환하고, 유추하는데 사용자가 큰 불편함 없이 사용할 수 있었던 원인을 알아보자. 이 글은 단순히 tsserver의 이론적인 정보를 전달하는 글이 아니다. 이론과 비즈니스 로직을 파악하면서 순차적으로 코드 중심적으로 작성하고자 한다. 전달하고자하는 내용 tsserver가 IDE에 어떤..
참고) 본 글은 feconf2022의 박서진 님의 발표 영상을 참고하여 정리한 글입니다. import? require? 개발하다보면 많이 보이는 에러 메시지들… 우리가 사용하는 import문은 왜 이상할까? 어떻게 하면 올바른 import문을 사용할 수 있을까? CJS(CommonJS) 옛날방식…Embed… CommonJS의 문제점과 가능해진 점 전역변수를 무조건 참조로 인한 네이밍 중복 파일을 하나하나 가져오기 때문에 수천 개의 모듈/파일을 관리하기에 용이하지 않음 이를 해결하고자 CommonJS에서 require(CommonJS를 규정할 수 있는 가장 큰 특징의 함수) 함수 제공. 앞서 복잡한 라이브러리 함수들을 가져오는 방식에서 require 호출 한 번으로 처리가 가능해졌다. CommonJS를 사..