css 썸네일형 리스트형 [React] Emotion 적용하기 1 - @emotion/styled (Styled Components) 🤷🏻♀️ 일반 CSS를 사용하지 않고 Emotion을 사용하는 이유는? JavaScript로 CSS 스타일을 작성하기에 편하게 설계되었기 때문이다.! (css-in-js) 🤷🏻♀️ 그렇다면 Emotion 뿐인가? No! [styled components] 라는 라이브러리도 있음. npm trends에서 지난 6개월간 다운로드횟수를 살펴보니 사용률은 emotion이 좀 더 높았다. @emotion/styled을 먼저 알아보자. 👉🏻 설치 // react에서 스타일 API로 직접 태그를 만들기 위해 사용하는 패키지 npm i @emotion/styled yarn add @emotion/styled 👉🏻 설정 emotion을 적용하기 위해서는 babel의 설정을 바꿔주어야하는데, 만약 react를 CRA .. 더보기 Babel과 Webpack의 내부 동작 이해하기 - 4 webpack [실전 리액트 프로그래밍] webpack을 설치해보자! 👉🏻 webpack 실행해보기 웹팩은 웹에 들어가는 여러 가지 리소스를 사용자에게 전달하기 좋게 하나의 번들 형태로 만들어준다. mkdir webpack-init cd webpack-init/ npm init -y { "name": "webpack-init", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } npm install webpack webpack-cli webpack-cli.. 더보기 이전 1 다음