개요 이번엔 RN(React Native)을 살펴볼 일이 생겼는데, 문득 RN이 어떤 방식으로 JavaScript에서 브라우저 엔진 없이 Native(iOS,Android)에서 상호작용과 UI가 그려지는지 궁금하게 되었다. 이번 글은 RN의 과거와 현재의 아키텍처가 어떤 식으로 구성되어 왔고, 개선된 아키텍처는 어떤 방식의 메커니즘을 가지게 되는지 정리해 보고자 한다. 웹 개발만 해 오던 분들이라면 너무 깊게 이해할 필요는 없을 것 같고, 단순히 React와 RN이 어떻게 다르게 동작하는지를 아키텍처 관점으로만 가볍게 봐도 괜찮을 것 같다. 먼저 RN의 메커니즘을 이해하기 위해선 아키텍처를 이해해야 하는데, RN은 0.68 버전 전부터 적용해 오던 브릿지(Bridge) 메커니즘을 적용하고 있었다. 하지만..
본 강의는 글또를 통해 무료로 지원받은 유데미 강의입니다. TDD(Test Driven Development)란, 작성하고자 하는 코드가 어떤 일을 할 것인지를 묘사하고 동작을 검증할 테스트 코드를 먼저 작성하고 빠르게 테스트를 진행하는 방법 아직 많은 프론트엔드 개발자에게 있어서 테스트 코드와 테스트 프로세스를 적용하는 것에 있어서 선뜻 수행하기가 쉽지 않은 게 현실인 것 같다. 그런데 TDD요...? 웹 프론트엔드 개발자 입장에서 수많은 경우의 수가 존재하는 환경(브라우저, 모바일, 태블릿 디바이스 등)의 유저 인터렉션을 테스트하기란 정말 쉽지 않은 환경이라고 생각한다. (하기 싫어서 안 하는 것도 있겠지만...) 필자도 테스트를 깊게 적용해 보진 않았지만 이것 저것 찍먹으로 해봤던 경험이 있다 보니..
[원문]: 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에 어떤..
개요기존 홈페이지에서 페이지 로드 시 높은 화소 이미지로 인한 느린 랜딩 속도로 인해 UX 개선이 절실히 필요하였다. 차선책으로 이미지 압축을 통해 약간의 개선을 하였지만, 그래도 높은 용량의 이미지 처리와 떨어진 퀄리티로 인해 디자이너, 개발자의 만족도가 낮은 상태였고, 퀄리티를 개선하는 방향을 찾다 Next.js(v12.2)의 이미지 최적화 서버를 활용 가능하다고 판단하여 적용하게 되었다. 사실 Next.js의 next/image 컴포넌트는 이미 사용 중이었으나, 다양한 이유로 인해 운영환경에서 최적화가 된 채로 배포가 되지 않고 있었다. 다른 사람들은 그냥 컴포넌트만 쓰면 알아서 optimize가 된다는데…. 왜 우리만…!? 보안 이슈, yarn-berry에서의 Sharp 이슈와 Low 버전의 C..