framer-motion 사용법 빠르게 살펴보기
framer-motion은 리액트를 위한 웹 애니메이션, 제스처 오픈소스 라이브러리입니다. 아래와 같은 기능을 제공하고 있습니다.
Recent Posts
[UX] 모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실
수잔 웨인쉔크의 모든 기획자와 디자이너가 알아야 할 사람에 대한 100가지 사실이라는 책을 최근 읽었습니다. 표면적으로 사용자 중심 디자인 방법론, 사용자 경험 방법론에 대해 이야기하는 사람들은 많지만 제품이나 서비스를 사용하면서 ‘왜 사람들은 이런 행태를 보일까?’에 대한 해답을...
Styled Component Syntax 이해하기
SSG.COM 모바일 UI 컴포넌트를 emotion.js 라이브러리를 사용하여 스타일링하고 있습니다. 스타일드 컴포넌트를 작성하는 몇 개월동안, 저는 Tagged Template Literals syntax에 대한 이해가 없었습니다. 이 포스팅은 저처럼 “이게 되는건 알겠는데, 어...
자바스크립트 패키지 전체를 import하지 않는 방법
웹팩 빌드 환경에서 개발할 때 외부 패키지를 import할 일이 많습니다. 그런데 import하는 방식에 따라 빌드되는 번들 파일 사이즈가 다를 수 있습니다. 관련하여 테스트한 내용을 미디엄에서 일부 발췌해 정리합니다.
신입 웹 개발자일 때 알았더라면 좋았을 기본 웹 아키텍처 개념
이 글은 미디엄의 Web Archtecture 101(https://engineering.videoblocks.com/web-architecture-101-a3224e126947) 글을 보기 쉽게 번역한 글입니다. Storyblocks라는 웹 서비스의 구성을 통해 입문자 관점에서 ...
기본 CLI 명령어
CLI는 Command Line Interface의 약자입니다. 기본적으로 알아야할 CLI 명령어를 정리했습니다.
babel.config.js 파일과 .babelrc 차이점
바벨을 설정할 때, babel.config.js 파일과 .babelrc 파일의 차이점이 궁금해서 찾아보았습니다.
Storybook docs 애드온 적용하기
Storybook Docs는 컴포넌트 스토리들을 문서로 변환해주는 스토리북 애드온입니다.
webpack 기본 이해하기
webpack은 서로 연관 관계가 있는 웹 자원들을 js, css, img와 같은 스태틱한 자원으로 변환해주는 모듈 번들러입니다. 자원들을 최적화해서 압축 등 웹페이지의 성능을 끌어올려줍니다.
react-router 이해하기
Companion Libraries
typescript에서 타입 선언하기
타입스크립트에서 타입을 선언하는 기본 방법을 정리했습니다.