라이브러리를 만들어보자 - (3) Rollup+babel로 ESM과 CJS모두 대응되게 만들기

이전 게시글에서 TS는 내부 코드의 확장자를 변경하지 않는다는 것을 알 수 있었다.그렇다면 tsconfig.json 두개로 cjs와 esm 모두 대응되게 만든다는 것은 어려운 일이라는 것을 알 수 있다.하지만, 시작한 이상 여기서 포기하고 싶진 않았다. 그래서 번들러로 코드를 번들링한 결과를 npm에 배포하도록 했다. 왜 Rollup?Webpack과 Vite, Rollup등 다양한 번들러가 있으나 Rollup을 택했다.이유는1. 라이브러리 번들링이기에 HMR이나 개발서버가 필요하지 않았다. (결과물 테스트는 Jest와 Storybook을 활용하여 확인한다)2.  Rollup은 ES6형태로 번들링 결과를 반환해서 ESM코드에 대해서 트리쉐이킹을 지원한다.3. 사실 2번은 웹팩도 지원하지만, rollup이 ..

typescript 컴파일러와 모듈 시스템에 대한 이해

이전 게시글에서 확장자 문제에 부딪혔고, 이런 문제를 해결해보고자 했다. 이를 이해하기 위해서는 이 문서를 읽는게 직빵이었는데, 이 글에 해당 내용을 담으려고 읽다가 보니 그냥 번역해서 오픈소스에 기여해보는게 좋을거란 생각이 들어서 해보았다. https://github.com/microsoft/TypeScript-Website-Localizations/pull/224 #6 Translate module-reference/Theory.md to korean by d0422 · Pull Request #224 · microsoft/TypeScript-Website-Localizationsen Theory 리뷰 요청합니다 : @yeonjuan @bumkeyy ref #6 감사합니다. 처음 해보는거라 잘 모르는..

라이브러리를 만들어 배포해보자 - (2) tsconfig와 ESM,CJS

배경이전 게시글에서 라이브러리를 tsc만으로 컴파일해서 배포했다. 그랬더니 아래와 같은 일이 발생한다.CJS방식으로 require했을때도, ESM으로 import했을때도 잘 작동되지 않는다.왜 이런일이 발생했을까? 모듈 시스템그전에, 모듈 시스템 중 CJS와 ESM에 대해 살펴보자.CJSrequire와 module.exports를 통해 동작한다. 동기적으로 실행된다.또한, 메인스레드를 블로킹한다. 즉, 모듈의 코드 실행까지 다음 진행이 차단되는 것이다.exports되는 항목을 마치 object처럼 취급한다. 아래와 같은 코드가 있다고 하자.//module.jslet num=20;function setNum(n){ num=n;}function getNum(){ return num;}module.export..

라이브러리를 만들어 배포해보자 - (1) tsc만으로 기본 설정하기

배경아직 대학생이기에, 아직 취업을 하지 못하기에 최근에 용돈벌이용으로 외주를 시작했다.첫 외주를 진행하다가 문득, 보통 외주를 통해 개발하는 웹페이지는 구성, 기능들이 어느 정도 비슷할 수 있다 생각하게되었다. 특히 랜딩페이지와 같이 사용자 UI를 신경써야하는 부분은 더욱 그런 기능이 겹치기 마련이다. 그래서 이런 부분들을 빠르게 개발하기위해 자주 반복되는 로직을 react-hook형태로 모아보자는 다짐을 하게되었다.이번 글에서는 기본적인 설정만 간단하게(아무생각없이...) 하기에 간단하게 살펴보고, 이로인해 발생한 문제들을 다음 게시글에서 해결해 볼 것이다. 기본 설정package.json아래와 같이 구성해주었다.{ "name": "@rapiders/react-hooks", //패키지의 이름 "v..

불굴의 의지로 살아내기 - 노인과 바다

130페이지정도의 짧은 이 소설이 왜 세기의 명작인지 알 수 있게 되었다. 정말 추천한다. 삶은 꽤나 허무하고, 무의미하다. 결과적으로 노인이 잡은 물고기는 앙상한 뼈만을 남겼다. 그러나, 그 고기를 잡기까지의 고통, 그리고 그것을 견뎌내는 노인의 의지는 너무나도 아름답다. 한번만 더...! 한번만 더..! 를 속으로 외치며 삶과 투쟁하는 모습을 보며 정말 숭고함을 느낄 수 있었다. 내가 견디지 못할 것 같아. 아냐, 그럴 리가 없어, 하고 그는 스스로에게 타일렀다. 난 언제까지나 끄떡없을 거야....머리를 맑게 해야해. 머리를 맑게 해서 어떻게 하면 인간답게 고통을 견딜 수 있는지를 알아야 해. 아니면 고기처럼 말이지. 하지만 한 번만 더 시도해 봐야지. (...) 노인은 다시 한 번 시도해 보았다. ..

모노레포 Vite 경로의 마법사를 해부해보자 - vite-tsconfig-paths

어떻게? 왜 작동하는가? 자 이전글에서 모노레포에서 tsconfigPath의 마법 같은 경로문제 해결 기능을 보았다. 하지만, 개발자라면 마법과 같은 일은 없으리라는 것을 알고 있을 것이다. 결국 왜? 를 알아야 내 것이 되는 것이다. 어떻게 tsconfigPath가 경로문제를 해결했는지 확인해보자. 바쁜 분은 결론만 보아도 이해에 도움이 될 수 있을 것 같다. viteFinal .storybook/main.ts의 viteFinal은 vite-builder를 통해 storybook을 구성하는 경우에 사용되는 옵션이다. 추가적인 플러그인을 적용시키는게 가능하다. 즉 아래 코드는 기존 storybook vite의 config를 가져와서 tsconfigPath plugin을 적용시킨 후에 merge하고, 이를..

모노레포에서 Storybook 통합으로 UI배포 시간 단축시키기 (6min -> 2min)

이전 게시글에서 UI테스트를 하기 위해 Storybook을 도입했다. 각각의 프로젝트마다 각각의 컴포넌트 테스트를 해볼 수 있어서 좋을것이라 판단했다. 하지만 문제가 있었다. 배포가 너무 많다. 3개의 배포 3개의 레포에 대해서 chromatic을 통해 storybook을 각각 배포하다보니 두가지 문제가 발생했다. 테스트하기 힘들다. 배포 완료된 링크가 3개라 일일히 들어가서 테스트해봐야한다는 단점이 있다. 속도가 느리다. 위 사진처럼 순차적인 형태로 각각의 레포 storybook을 배포하다보니 2분씩, 총 7분가까이 걸리는 문제가 발생했다. 심지어 이 CI는 pull_request마다 돌아야하므로 더 자주, 더 많이 호출되어야한다. 또 우리 레포는 현재 4개의 프로젝트로 구성되어있고, 추후에 더 추가될..

UI테스트를 위해 Storybook을 도입하게 된 이야기

이제 프로젝트는 앱 런칭을 앞두고 QA를 진행하고있다. 이렇게 QA를 진행하다보니 알게된 것은 생각보다 다양한 기기에서 테스트하다보니 UI가 깨지는게 많다는 점이었다. 그러나 의외로 UI 깨지는 것을 쉽게 해결하기가 쉽지않았다. 아래와 같은 이유들 때문이었다. 특정 사이즈에서만 깨진다. 아래와 같이 화면이 좁아지면 UI가 깨진 다던가... 문제가 있었다. 반응형 사이즈 테스트를 해볼 수가 없다. 서버 API호출을 줄여 운영 비용을 줄이기 위해 네이티브 DB를 사용하기로 결정했었다. 사용자가 쓴 글, 좋아요 누른 글 등을 앱 내부 DB에 저장하게 하고, 로그인시 서버와 1회 통신을 통해 동기화하는 형태로 서비스를 구성했다. 이렇게 앱 내부 DB를 사용하는 곳이 늘어나다보니 이제는 브라우저로 배포된 서비스 ..

노르웨이의 숲

무라카미 하루키의 소설을 처음 읽어보았다. 하루키의 문장들 처음 접한 하루키의 책은 달리기를 말할 때 내가 하고 싶은 이야기였다. 이 책은 에세이였어서 하루키의 문체를 제대로 경험하지 못했다는 걸 이번 책을 읽으면서 알게 됐다. 하루키의 문체는 정말... 뭐랄까... 모네의 그림같은 느낌이다. 나는 모네의 그림을 좋아한다. 분명 현실을 담았음에도 그 순간의 기억, 기분, 냄새까지 담겨 있는, 한순간의 추억을 담아내기때문이다. 하루키의 문장에서도 비슷한 느낌을 받을 수 있었다. 하늘은 더할 나위 없이 새파랗고 가늘게 흩뿌려진 구름은 마치 시험 삼아 페인트를 슬쩍 칠한 것 처럼 하늘 천장에 희뿌옇게 달라붙었다. 때로 머리에 깃털 장식 같은 것을 단 빨간 새가 눈앞을 가로질렀다. 푸른 하늘을 배경으로 날아가는..

React-ReactNative Webview통신을 Event-Driven에서 Request-Response형태로 확장하기

이전 게시글들에서 React Webview와 ReactNative의 통신을 시켜보았고, 추가적인 데이터도 주입시켜보았다. 이때의 통신은 ReactNative->React 통신의 경우 onLoad시 React Webview에서 필요한 데이터를 한번에 주입시켜주는 형태 하나였고 React->ReactNative 통신이 대다수여서 불편함이 있지 않았었다. 하지만 프로젝트가 커지고, 서버 API호출을 줄이고자 내활동을 저장하는 부분에 대해 네이티브 기기의 DB를 사용하는 부분을 적용시켰고, 이에 따라 Webview가 열린 후에 데이터를 요청해야하는 부분이 점점 커져갔다. 기존의 방식 처음에는 native DB에 있는 하나의 데이터만이 필요하여 ReactNative의 WebView컴포넌트가 열린 후, onLoad..