React Material-UI
React is an open-source JavaScript library used for creating user interfaces.There are various React-based UI libraries that help in building beautiful user interfaces. Some of the most popular ones include Material-UI, Semantic-UI-React, Ant-Design,
Biome: 차세대 JS Linter와 Formatter
안녕하세요. 데이블 Service Front-end Team(SF Team)의 장희영입니다. 이 글에서는 JavaScript에서 Code Formatter와 Linter 역할을 동시에 수행하는 Biome이라는 도구를 소개해보려고 합니다. 들어가기 전에… 혹시 Prettier라는 Code Formatter를 들어본 적이 있으신가요? 아마 자바스크립트를 사용하는 개발자라면 모를 수가 없을 것으로 생각합니다. Prettier는 지배적인 위치를 차지하
웹에서 프리 드로잉 밑바닥부터 구현하기
Vue3, Composition API와 Pinia를 이용한 상태관리 (2)
이번 포스팅은 Vue3, Composition API와 Pinia를 이용한 상태관리 (1) 글의 후편입니다. 이전 포스팅에서 Composition API, Pinia에 대한 이론적인 설명을 다루었다면 이번 포스팅에서는 실제로 Pinia를 어떤 방식으로 적용했고 어떤 작업 결과를 냈는지 다루려합니다. 글의 목차는 아래와 같습니다. 03. 적용 결과: 인재풀에서의 Pinia 04. 느낀점: 이론적 장단점과 내가 느낀 실제 Vue3가 적용된 인재풀서
ffmpeg.wasm
쏘카의 웹 팀에 관하여
쏘카의 웹 프론트엔드 개발자들은 어떤 일을 할까요?
Angular Router 적용
안녕하세요, 씨앤텍 시스템즈 임재원 연구원입니다 이번 포스트는 Angular에 기본적인 Router를 사용하는 방법에 대해 작성하려 합니다. * 버전 정보 Node version -20.9.0 Angular CLI -17.0.3 Angular Router 란 ? Angular 애플리케이션에서 내비게이션을 관리하기 위한 라이브러리입니다. 단일 페이지 애플리케이션(SPA)에서 페이지간의 전환 및 라우팅을 담당합니다 SPA는 페이지를 새로 로드하지
npm 패키지 배포 가이드
안녕하세요! 무스마 FE파트의 Yong입니다. 입사 후 온보딩으로 npm 배포를 실습해 보며 정리한 것들을 바탕으로 가이드를 작성해 보려 합니다. 여담이지만 저는 입사 전 npm에 배포되어 있는 패키지들을 사용할 줄만 알았지 배포해 본 경험은 없었습니다.. 반면, 무스마에서는 패키지가 잘 관리되고 있어서 무스마 크루들의 노력이 대단하다고 느꼈습니다! 목차 사전 준비 프로젝트 생성하기 폴더 생성 package.json 생성 module 작성 테스
WebRTC 화상회의 서버 구축
WebRTC 화상회의 서버 구축 소개하기 전… WebRTC 기본 정보 WebRTC 란? WebRTC 종류 WebRTC 서버 구축을 위해 필요한 4가지 테스트 프로젝트 spring boot 시그널링 서버 프론트 코드 ( html + javascript ) flutter 예제 소개하기 전.. 이번에 프로젝트에서 webRTC 사용하게 되었습니다. 사용 이유는 CCTV 를 웹과 flutter 앱 화면에 보기 위해서 입니다. 저는 WebRTC를 한번도
프론트엔드 테스트 자동화 전략 - 3. 구현하기
이전 글에서는 제품의 요구사항을 분석하며, 테스트 케이스를 산출하는 방법에 대해 알아봤습니다. 이 글에서는 구체적으로 어떻게 테스트 코드를 작성할 수 있는지에 대해 알아봅니다.
React Query의 구조와 useQuery 실행 흐름 살펴보기
리액트 프런트엔드 프로젝트에서 서버 상태 관리를 위해 React Query…
반응형 프로그래밍 with RxJS
GitHub Actions - JavaScript action 만들기
머리글 안녕하세요. 카카오웹툰 프론트엔드를 개발하고 있는 레이입니다 :) 첫 번째 글, 두 번째 글 이후 벌써 세 번째 글입니다. 2023년도 시작한지 얼마 되지도 않았는데 벌써…
View Transitions API
View Transitions API에 대해 들어보신 적 있으신가요? 공개된 지 얼마 안 된 따끈따끈한 신상이라서 아무래도 모르시는 분들이 많을 것 같습니다. 알고 계신 분들도 있겠지만, Nomad Coders…
나만의 Jest Matchers 만들기
테스트의 중요성이 부각되며 많은 프로젝트에 테스트를 도입하는 시도가 증가하고 있다. 테스트는 코드 변경에 대한 Side Effect…
라이브러리 없이 라우터(Router) 만들기
많은 SPA(단일 페이지 애플리케이션)를 개발하며, 페이지 이동을 개발하기 위해 라우터를 사용해본 경험이 있을 겁니다. 하지만 라우터를 직접 개발하기 보다는 유명한 라이브러리(react-router-dom…
Typescript - Union Type, Intersection Type, Etc.
타입스크립트는 Structural Type System 을 사용한다. 그러니까 타입을 비교할 때 구조(structure)를 보고 서로 할당이 가능한지 판단하는 것이다. 그래서 아래 코드는 문제가 없다. Java…
ECMAScript 명세 이해, 1부
이 글에서는 명세 내 간단한 함수를 이용하여 ECMAScript의 표기법을 알아본다.