javascript 4

어떻게 CSS file을 JS file 안에 불러올 수 있을까?

main.js import '../styles/global.css'; js에서 특정 엘리먼트 또는 전역적인 스타일이 필요할 때 위와 같이 js파일 안에 css파일을 직접 로드하여 사용해본 적이 있을겁니다. 최근의 프론트엔드에서는 React, Vue 등 라이브러리나 프레임워크를 주로 사용해서 프로젝트를 진행하게 되는데요. 보통은 Create React App, Vue cli 등의 CLI 도구를 통해서 보일러 플레이트를 내려받아 추가적인 구현을 하게 되기 때문에 위 처럼 css파일이 로드되는 것이 자연스럽게 느껴질 수 도 있겠습니다. 그러나 원래 되는 것은 없습니다. 보일러 플레이트 안에 포함된 Webpack, Vite, Parcel 등의 모듈 번들러가 그 역할을 대신해주고 있을 뿐입니다. css-loade..

JS, TS 2023.12.17

package.json exports와 CommonJS, ESM, Vitest

문제의 배경일전에 UI 컴포넌트 라이브러리를 만들어 배포하는 프로젝트를 진행하였습니다. CommonJS와 ESM 두 모듈시스템을 지원해주기 위해서 Rollup과 package.json 설정해주었는데요. (아래 포스팅에서 자세히 볼 수 있습니다.) [UI 컴포넌트 라이브러리] 2. 라이브러리 배포하고 사용하기 (NPM, Github Packages, Docker)[UI 컴포넌트 라이브러리] 1. Typescript로 React 컴포넌트 만들고 Rollup으로 빌드하기 💡 스토리북의 디자인시스템 튜토리얼을 진행하고 오시는 것을 추천합니다. 튜토리얼을 진행하고 오셨다면 예mitchellglobal.tistory.com배포된 컴포넌트 라이브러리를 실제 프로젝트에서 적용해보는데에서 문제를 발견하게 됩니다. UI ..

JS, TS 2023.10.07

[UI 컴포넌트 라이브러리] 1. Typescript로 React 컴포넌트 만들고 Rollup으로 빌드하기

💡 스토리북의 디자인시스템 튜토리얼을 진행하고 오시는 것을 추천합니다. 튜토리얼을 진행하고 오셨다면 예제로 사용할 소스코드가 있을 것입니다. 해당 코드들 위에서 아주 간단한 Input 컴포넌트를 타입스크립트로 작성하고 Rollup으로 빌드하도록 하겠습니다. 01. Typescript 셋팅하기 (tsconfig) 먼저 타입스크립트 패키지를 설치합니다. npm install -D typescript​ tsconfig.json 파일을 루트에 생성합니다. // tsconfig.json { "target": "ES5", "lib": [ "DOM", "DOM.Iterable", "ESNext" ], "jsx": "react-jsx", "jsxImportSource": "@emotion/react", "module"..

Projects 2023.08.22

[UI 컴포넌트 라이브러리] 0. 디자인 시스템, Storybook

회사에서 운영하는 서비스가 늘어갈수록 UI에 대한 반복작업은 점차 많아지게 됩니다. 곧 디자인시스템의 필요성이 나타는데요. 여러가지를 아우르는 디자인시스템에서 개발자들은 특히 UI 컴포넌트 라이브러리에 책임을 두고 있습니다. 도입하게 된다면 각 서비스에서 UI에 관한 코드를 작성하는 효율도 높아지고 유지보수도 간단해질 것입니다. 다음 기술들과 함께 시작해보겠습니다. Typescript, React Emotion: CSS in JS 라이브러리로 컴포넌트의 모든 스타일에 적용합니다. Rollup: 모듈 빌드와 트리쉐이킹에 특화된 빌드툴을 사용합니다. NPM: 빌드된 코드를 어디서든 사용할 수 있게 배포합니다. Storybook: 테스팅, 협업, 문서화 등의 기능으로 디자인시스템 구축을 쉽게 시작할 수 있습니..

Projects 2023.08.15