![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/urO2a/btreDUUhaMK/ZoAeensTMKOYKEjuIXSKk1/img.png)
현재 재직중인 회사에서 yarn workspace를 활용하여 모노레포(MonoRepo) 프론트엔드 시스템을 구축하고 있습니다. 제가 하는 업무는 기존 서비스하는 application의 공통적으로 사용되는 컴포넌트를 storybook에 작성한 뒤 storybook 컴포넌트를 기존 컴포넌트와 교체하는 작업입니다. 이러한 업무를 진행하던 중 이슈가 발생하여 기록해놓고자 합니다. Monorepo 여러개의 프로젝트를 하나의(mono) 저장소(repository)로 관리하는 시스템을 의미합니다. 각각 패키지를 하나의 Root Package 아래에 묶어 하나의 저장소로 관리합니다. 기존 멀티레포 시스템에서 모노레포 시스템으로 프로젝트를 구축하며 다음과 같은 이점을 얻기를 원하고 있습니다. 중복되는 패키지에 대한 공간..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/A9hXS/btrdkNtOfGA/Q18YiHx1X1G8tF5WDZfj5K/img.png)
Rust 코드로 작성하는 WASM (with react) EventListener 이번 포스트는 EventListener를 이용하여 마우스 이벤트 또는 키보드 이벤트를 배워보도록 하겠습니다. rust에서는 javascript의 EventListener를 지원하기위해 gloo라는 라이브러리가 있습니다. 먼저 gloo 라이브러리를 cargo의 dependencies에 추가해줍니다. // Cargo.toml ... [dependencies] ... gloo="0.3.0" ... click event 그런다음 wasm 프로젝트의 lib.rs에 rust 함수를 작성해보겠습니다. Rust 코드 pub mod wasm_event; use wasm_event::*; #[wasm_bindgen] pub fn on_cli..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/UNvXc/btrczQLF1xK/2OETwbjeOWRkUOkCWKTAk0/img.png)
Rust 코드로 작성하는 WASM (with react) Document getElementById method javascript의 Dom method 중 getElementById를 wasm으로 구현할 수 있습니다. web_sys::Document의 get_element_by_id(id) 메서드를 이용할 수 있습니다. cargo.toml 설정 [dependencies.js-sys] version = "0.3.5" [dependencies.web-sys] version = "0.3.5" features = [ 'console', 'Document', 'Window', 'HtmlElement', ] web_sys에서 지원하는 window.document.get_element_by_id('id')를 사용하..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/5YVIc/btrb9RLu1Wu/f38fBNUPD6DtDOGgKVYvL1/img.png)
wasm을 학습하다 보니 생각보다 굉장히 잘 되어 있어서 싱방하여 몇가지 기능들을 포스팅해두려고 합니다. 이전에 react 개발환경에 wasm을 사용할 수 있도록 설정한 react 프로젝트가 있으므로 해당 프로젝트를 이용하여 wasm 코드를 작성했습니다. react는 javascript가 아닌 typescript를 사용한 프로젝트입니다. :) Console.log console에도 수많은 기능이 있지만 여기서는 자주 사용하는 console.log기능만 포스팅 하겠습니다. Cargo.toml dependency 설정 web-sys를 Cargo.toml에 추가해주어야 합니다. ... [dependencies.web-sys] version = "0.3.5" features = [ ..., 'console', ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/RTbe4/btrbkVVqW2e/Ew7KE4kRiH7uwCsColtGuK/img.png)
1. canvas 요소 및 ref 정의 //html //typescript const canvasRef = useRef(null); //rust //dom에 직접 접근하지 않음. //wasm 사용 중이므로 함수의 인자로 넘겨주는 방식 fn canvas(canvas: web_sys::HtmlCanvasElement) { ... } 2. '2d' context 정의 - context는 화면에 그림을 그릴 펜이라고 생각하면 된다. //typescript //ref가 null일수 있으므로 옵셔널 체이닝 정의 let context = canvasRef.current?.getContext('2d'); //rust let context = canvas .get_context("2d") .unwrap() .unwrap..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/nmnWg/btra34jZsc9/GkxZHw3ywpIWpaxBeVkOeK/img.png)
Next.js란? React에서 SSR(Server Side Rendering)을 지원해주는 framework이다. Nextjs 공식 사이트 https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org SSR이란 서버사이드렌더링의 약자로 CSR의 단점인 로딩 시간의 감소를 위한 기술이다. CSR은 클라이언트사이드렌더링이고 클라이언트 측에서 html, css, ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/EPXHh/btraSZJGonB/d4WUvY4volWZAFhlGEIw81/img.png)
기존에 webpack을 공부하며 react환경과 webpack을 이용하여 react 개발환경과 비슷한 프로젝트를 생성해보았다. entry, output, plugin설정 module설정 등등 직접 해보며 react application 개발환경을 완성했다. 사실 가장 큰 목표는 wasm과 react를 연동해보는것 이었다. CRA react라면 eject를 하거나 rewired를 설치하거나 여러가지 방법이 있겠지만, 아무래도 webpack을 이용하여 직접 설정한 프로젝트에서 연동해 보는게 좀더 욕심이 났기 때문에 webpack을 공부하고 react프로젝트를 세팅하는것도 공부해보았다. (본 포스팅은 CRA가 아닌 webpack, babel로 react개발환경을 직접 설정한 후 진행했습니다.) wasm 설정하..
sass는 css에서 조건분기 함수 등을 사용할 수 있도록 문법을 제공한다. sass확장자와 scss확장자 2가지가 있다. 각 확장자에 따라 작성하는 문법이 다르다. scss모듈을 사용할 수 있도록 webpack에 설정해볼것이다. 이를 위해 sass-loader, node-sass를 설치해야 된다. sass-loder node-sass yarn add sass-loader node-sass -D loader-chaning sass파일을 css파일로 컴파일 컴파일 된 css파일이 css-loader를 통해 build sass-loader가 먼저 작동 loader-chaning은 use[index1, index2, ..., indexN]배열의 index가 큰 loader부터 순서대로 진행된다. css 모듈 ..