blog.rhostem.com - mysetting

2:13 5/31

blog.rhostem.com

mobile screenshot relative

2:13

blog.rhostem.com

mobile screenshot

blog.rhostem.com
https://blog.rhostem.com/

프론트엔드 웹 개발 기술 블로그

저작도구: blog.rhostem.com

최종 피드 수집: 2024-12-26 00:46

전체 (65)

2y

[번역] 자바스크립트 프레임워크의 네 시대

이 글은 Four Eras of JavaScript Frameworks를 번역한 글입니다.
개발자로 일하며 수많은 기술이 새로 등장하고 사라지는 모습을 반복적으로 보고 있으면 가끔 피곤함이 느껴지곤 합니다. 이 글은 지난 십수년

000

2y

React hook 테스트 코드에서 Recoil snapshot 참조하기

React의 커스텀 훅 함수를 테스트하다가 아래와 같은 상황을 만나게 되었다.
커스텀 훅 C는 Recoil 상태를 업데이트하는 로직을 가지고 있다.
Recoil 상태 A는 커스텀 훅 함수 안에서 업데이트되고, 리턴된다.
Recoi

000

2y

Canvas, Web Audio API를 사용한 오디오 파형 시각화

제작 동기 및 요구사항
오디오 파형(waveform)은 오디오, 영상 편집 툴 및 일부 오디오 플레이어에서 접할 수 있다. 업무에서 개발한 앱에서 오디오 재생 기능이 필요하여 wavesurfer.js를 사용하고 있었다. 그런데 S

00152

3y

Recoil의 쓰기 가능한 셀렉터

파생된 상태를 만드는 단방향 흐름의 selector
Recoil은 selector API를 제공한다. React의 useMemo, Redux의 selector 처럼 다른 상태를 기반으로 파생된 상태(derived state) 만들

004

3y

React 커스텀 훅 함수의 테스트 코드 작성

커스텀 훅은 React 함수형 컴포넌트 API를 사용하는 함수
React에서 사용하는 커스텀 훅(custom hook)은 함수 형태로 구현한다. 하지만 일반적인 함수처럼 테스트 코드를 작성할 수는 없다. 왜냐하면 훅 안에서는 Re

003

3y

Vue 3의 setup 기능이 제공하는 간결한 컴포넌트 문법

Vue는 스크립트, 마크업, 스타일시트를 한 파일 안에서 작성할 수 있는 SFC(Single File Component) 문법으로 컴포넌트를 작성할 수 있는 *.vue 파일을 지원한다. SFC는 아래와 같은 방식으로 작성할 수 있

0010

3y

Recoil atomFamily를 사용한 상태 관리

Recoil에 대한 간략한 소개
Recoil은 Facebook에서 만든 React를 위한 상태 관리 라이브러리다. 아직은 버전이 0.3이며(2021년 7월 현재) Redux의 미들웨어처럼 활용할 수 있는 atomEffect의 스펙

0010

3y

Tailwind CSS의 설치와 활용

Tailwind CSS의 특징
Tailwind CSS는 유틸리티 퍼스트(Utility-first)를 지향하는 CSS 프레임워크다. CSS를 작성하는 방법론 중 하나인 BEM 방법론은 마크업을 컴포넌트 단위로 구분하고 상태에 따라

2141

3y

linear-gradient 속성에 transition 적용하기

블로그를 호스팅하고 있는 Vercel 서비스의 웹사이트를 방문했다가 멋진 CSS 기술을 보게 되었다. 텍스트에 linear gradient를 사용해서 컬러를 입히고, 거기에 일정한 간격을 두고 차례대로 transition 효과를

0013

3y

Mock Service Worker로 만드는 모의 서버

Mock Service Worker
MSW(=Mock Service Worker)는 API 모킹(mocking) 라이브러리로, 서버를 향한 네트워크 요청을 가로채서(intercept) 모의 응답(mocked response)을 내

000

3y

React Query로 서버 상태 관리하기

React Query는 서버 상태(server state)를 관리하는 라이브러리다. 서버 상태란
원격에 위치한 공간에 저장되며 앱이 소유하거나 제어하지 않는다
데이터를 가져오고 업데이트하기 위해선 비동기 API가 필요하다
다른 사

001

3y

TypeScript에서 generic과 index type의 활용

타입스크립트를 사용하면 타입을 직접 지정하는 것도 가능하지만 컴파일러의 추론을 통해 타입을 유연하게 지정하는 것도 가능하다.
예를 들어 아래와 같은 함수가 있다고 하자.
function omitByKey(obj, ...rest)

000

3y

동적으로 import된 컴포넌트의 테스트

앱을 개발할 때 번들 파일의 사이즈가 커지면 로딩 속도를 개선하기 위해 코드를 분할할 필요가 생긴다. React에서는 react-loadable을 사용하는 방법도 있지만, React.lazy를 사용해서 간단하게 동적 import를

000

3y

Web Worker를 사용한 이미지 로딩

웹 워커(Web worker)
자바스크립트는 싱글 스레드로 동작하며 작성된 코드가 순서대로 실행된다. 하지만 자바스크립트로 작성된 웹 어플리케이션도 API 호출 같은 비동기 작업이 완료될 때까지 멈춰있지 않고 빠르게 실행되는 것이

0026

4y

create-react-app에서 snowpack으로의 마이그레이션

최근 실무에서 Webpack 기반의 create-react-app(이하 CRA)으로 구성된 환경으로 개발을 진행하고 있다. CRA는 간편하게 앱을 부트스트랩핑해서 개발을 시작할 수 있다는 장점이 있지만 커스터마이징에 한계가 있다.

004

4y

[번역] 초보자를 위한 React 어플리케이션 테스트 심층 가이드 (2)

이 글은 ”An in-depth beginner’s guide to testing React applications“를 번역한 글입니다
React 앱 테스팅 개요
테스트에 사용할 어플리케이션
무엇을 테스트해야 하는가?
테스트 작성

003

4y

[번역] 초보자를 위한 React 어플리케이션 테스트 심층 가이드 (1)

이 글은 ”An in-depth beginner’s guide to testing React applications“를 번역한 글입니다
대부분의 개발자는 다음의 사실을 알고 있다: 자동화된 테스트는 중요하다. 그렇게 주장하는 데는

002

4y

Gatsby 웹사이트에 적용한 다크 모드

몇년 전부터 Windows, macOS, iOS등의 운영체제가 다크 모드를 지원하기 시작했고 그와 더불어 다크 모드를 지원하는 웹사이트도 많아졌다. 다크 모드는 어두운 곳에서의 가독성 향상은 물론 전력 소모도 줄어들기 때문에 무척

0010

4y

dynamic import로 줄여본 next.js 앱의 최초 로딩 시간

dynamic import
Next.js는 ES2020의 dynamic import 문법을 지원한다. dynamic import를 사용하면 모듈을 빌드 타임이 아닌 런타임에 불러오도록 한다. 이를 통해 번들 파일을 분리하고 퍼

001

4y

프론트엔드 면접 핸드북 - 자바스크립트(3)

이 인터뷰 핸드북은 front-end-interview-handbook/javascript-questions을 기반으로 정리한 것입니다.
41. ES6의 클래스와 ES5의 생성자 함수의 차이점
한줄 답변: 둘 다 생성자 역할을 하

003