전체 글 18

어떻게 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

Vite, nginx, docker 환경에서 무한 reload 현상 고치기

Vite devServer를 nginx proxy 하기 사내 개발환경에서 백엔드서버와 프론트엔드 서버들을 Docker 위에서 nginx의 리버스 프록시로 띄워서 사용하고 있었습니다. 그 중 Vite로 빌드한 React App과 devSever도 포함되었습니다. devServer와의 연결을 위해서 nginx에선 HTTP를 WebSocket으로 업그레이드 하느 설정이 반드시 필요합니다. 설정은 아래와 같이 간단합니다. server { listen 80; client_max_body_size 50M; location /api { proxy_pass http://backend; } location / { proxy_pass http://frontend; proxy_http_version 1.1; proxy_se..

JS, TS 2023.11.15

Socket과 실시간 통신 (TCP Socket, WebSocket)

들어가며 주식, 채팅 같은 서비스 또는 프론트엔드 개발을 하다보면 자주 만나는 WebPack과 Vite등 빌드툴이 제공하는 devServer는 모두 실시간 통신을 위해 서버와의 양방향 통신을 하고 있습니다. 특히 웹 프론트엔드(HTML5)에서는 WebSocket이라는 프로토콜을 통해서 실시간 통신을 구현하게 됩니다. 이제부터 Socket은 무엇이며, 양방향 통신은 어떻게 이루어지고 마지막으로 웹소켓은 어떻게 사용할 수 있는지 정리하도록 하겠습니다. 양방향 통신 실시간 서비스를 위해 양방향 통신을 한다고 앞서 말하였습니다. 일반적으로 프론트엔드 영역에서 서버로부터 데이터를 받을 때 fetch API나 Axios 라이브러리를 이용해서 응답을 받곤 했었는데요. 이 때 데이터를 받는 것(응답)은 저희가 데이터를..

JS, TS 2023.11.11

SocketIO로 실시간통신 프론트엔드 테스트 및 TDD 하는 법 (리액트)

들어가기 전에 컴포넌트 단위테스트를 작성할 때에는 관심사가 어떠한 데이터가 잘 주어졌다면 UI가 제대로 렌더링하는지에 한정되어 있습니다. 그러나 통합테스트로 넘어가면 데이터가 잘 주어지는 상황 자체를 Mocking 해야할 필요가 있습니다. 그래서 이전 포스팅에서는 msw를 활용하여 REST API를 Mocking 하여 LoginPage에 대한 통합테스트를 작성할 수 있었는데요. msw에서는 단방향 통신에 대해서는 지원을 해주지만 WebSocket과 같은 양방향 통신에서는 적합하지 않았습니다. 따라서 이번 포스팅에서는 Socket.IO를 활용하여 양방향 통신, 즉 채팅과 같은 실시간 통신을 Mocking 하는 방법을 공유해드리고자 합니다. Socket.IO에 대한 Mocking은 공식문서를 참고하였습니다...

JS, TS 2023.11.06

LoginPage로 보는 React 통합테스팅(with. msw, testing-library, vitest)

들어가기 전에이전 포스팅에서는 LoginForm 컴포넌트에 대한 단위테스트(Unit test) 코드를 작성하면서 리팩토링까지 해보았습니다. 단위테스트에 대한 내용은 아래 링크를 통해서 확인하실 수 있으며, 이 글을 이해하는데에도 도움이 됩니다. testing-library, vitest로 리액트 Unit test 작성하며 리팩토링하기늘어가는 기능과 화면에 비례해서 버그 또한 늘어나기 마련입니다. 그런데 그 버그를 수정하면 또 다른 곳이 터져버리는 불상사가 눈앞에 펼쳐지게 됩니다. 사람은 실수를 하기 마련이고 그것mitchellglobal.tistory.com 아래 라이브러리들에 대해서 선행적으로 학습하시면 글을 이해하는데 도움이 됩니다.React Query, React Router, React-toast..

JS, TS 2023.10.28

testing-library, vitest로 리액트 Unit test 작성하며 리팩토링하기

늘어가는 기능과 화면에 비례해서 버그 또한 늘어나기 마련입니다. 그런데 그 버그를 수정하면 또 다른 곳이 터져버리는 불상사가 눈앞에 펼쳐지게 됩니다. 사람은 실수를 하기 마련이고 그것을 줄이기 위해서는 더 많은 시간을 쏟아야 합니다. 이러한 이유 때문에 테스트코드는 결국 필요하게 됩니다. 따라서 이번 포스팅에서는 Frontend 영역에서의 Unit test에 대해서 작성하고, 테스트를 작성하면서 기존 코드의 문제점을 분석하고 리팩토링 하겠습니다. 예시로는 LoginForm 컴포넌트에 대해서 작성합니다. 들어가기 전에 선수지식에 대해서는 반드시 알고 가셔야 이해하실 수 있습니다. 이 글에서 사용되는 기술들에 대해서 전부 알 필요는 없습니다만 참고용으로 적어두었습니다. ✅ 선수지식 React, Vitest(..

JS, TS 2023.10.20

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

아이콘은 어떤 확장자로 써야할까? (SVG, PNG, JPEG, GIF, WebP)

아이콘 이미지는 어떻게 관리할 것인가? 여러 프로젝트에서 디자인시스템과 함께 일관된 아이콘을 제공해주기 위해서는 아이콘 또한 쉽게 import 할 수 있는 방법을 제공해야합니다. 이때 아이콘이미지를 어떤 파일로 제공할 것인지 결정하는게 중요한 포인트인데요. 이미지 확장자에 따라 용량, 특성이 모두 다르기 때문입니다. 결론부터 말하자면, 아이콘은 SVG. SVG로 아이콘을 제공하는 것이 가장 효과적이고 효율적인 방법이라고 생각되어 사내 디자인시스템 내에서는 모든 아이콘을 SVG 형태로 제공하도록 결정하였습니다. 정확히는 SVG를 이미지 형태로 제공한 것이 아니라, 리액트컴포넌트로 랩핑하여 제공합니다. 어떠한 특성 때문에 그렇게 가능한지 SVG가 무엇인지 알아보겠습니다. SVG (Scalabe Vector ..

JS, TS 2023.09.20

자바스크립트 비트연산자 시프트 활용하기 (Hex to RGB 컬러변환)

문제의 발견 프로젝트 내에서는 사용되는 컬러값을 pallete 상수에 저장해서 CSS in JS로 불러오고 있었습니다. 특정 상황에서 엘리먼트의 CSS 컬러 값이 제대로 반영되었는지 테스트하였는데요. // 테스트코드 중 일부 const styles = getComputedStyle(element) await expect(styles.backgroundColor).toBe(theme.pallete.white) 그러나 다음과 같이 테스트는 실패하게 됩니다. 브라우저에서는 컬러값을 RGB로 변한 후 화면에 렌더링하기 때문에 #FFFFFF(흰색)이 RGB(255, 255, 255)로 변환되어 테스트가 진행된 것입니다. 따라서 Hexadecimal(16진수)로 표현된 컬러 값을 RGB로 변환 후에 테스트를 진행해..

JS, TS 2023.09.08

[UI 컴포넌트 라이브러리] 2. 라이브러리 배포하고 사용하기 (NPM, Github Packages, Docker)

[UI 컴포넌트 라이브러리] 1. Typescript로 React 컴포넌트 만들고 Rollup으로 빌드하기 💡 스토리북의 디자인시스템 튜토리얼을 진행하고 오시는 것을 추천합니다. 튜토리얼을 진행하고 오셨다면 예제로 사용할 소스코드가 있을 것입니다. 해당 코드들 위에서 아주 간단한 Input 컴 mitchellglobal.tistory.com 이번에는 1편에 이어서 빌드한 소스를 만들어둔 소스를 필요한 곳에서 사용할 수 있도록 NPM registry에 배포하고 프로젝트에서 불러와 사용하는 방법을 공유하겠습니다. 전체적으로 다음과 같은 내용을 학습하게 되겠습니다. 오픈소스로 라이브러리 배포하기 Private으로 라이브러리 배포하기 Github Action으로 배포 자동화하기 Docker 환경에서 Privat..

Projects 2023.09.02