React 썸네일형 리스트형 [React] Emotion 적용하기 2 - @emotion/react (css-in-js) 👉🏻 설치 // 프레임워크에 구애받지 않는 가장 베이직한 패키지 (VanillaJS 등에서 사용) npm i @emotion/css // react 사용자에게 권장되는 패키지 npm i @emotion/react yarn add @emotion/react 👉🏻 CSS Prop Emotion 사용해서 css-in-js 스타일링을 하려면 CRA의 경우 코드에 /** @jsx jsx*/를, 아닐 경우 .babelrc에 아래와 같이 설정을 추가해준다. - CRA Project /** @jsx jsx */ import { css , jsx } from '@emotion/react'; const color = 'darkgreen'; render ( ) - Set .babelrc { "presets": ["@emot.. 더보기 [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.. 더보기 Babel과 Webpack의 내부 동작 이해하기 - 3 polyfill [실전 리액트 프로그래밍] polyfill을 설치해보자! > 바벨과 폴리필 JS의 최신 기능을 모두 사용하면서, 오래된 브라우저에서도 최신 문법을 지원하려면 바벨로 코드 문법을 변환하는 동시에 폴리필도 사용해야 한다. 폴리필은 런타임에 기능을 주입하는 것을 말한다. 기능이 존재하는지 검사하여 없는 경우에만 주입한다. 바벨만으로는 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 없다. 폴리필을 별도 설정해줘야 한다. > 모든 폴리필 사용하기 import '@babel/polyfill'; module.exports = { entry: ['@babel/polyfill', './src/index.js'], //... }; 웹팩 사용하는 경우는 entry 속성에 추가한다. 이 경우 필요하지 않은 폴리필까지.. 더보기 Babel과 Webpack의 내부 동작 이해하기 - 2 Babel 설정 [실전 리액트 프로그래밍] babel을 사용하는 여러 방법을 직접 설정해보자! 바벨 설정 파일에서 사용할 수 있는 다양한 속성이 있다. extends: 다른 설정 파일을 가져와서 확장 env / overrides: 환경별 또는 파일별로 다른 설정 적용 > extends 속성으로 다른 설정 파일 가져오기 /common/.babelrc { "presets": ["@babel/preset-react"], "plugins": [ [ "@babel/plugin-transform-template-literals", { "loose": true } ] ] } plugins에 옵션을 설정할 때는 배열로 만들어서 두 번째 자리에 옵션을 넣는다. loose 옵션을 주면 문자열을 연결할 때 concat 메서드 대신 + 연산.. 더보기 Babel과 Webpack의 내부 동작 이해하기 - 1 Babel 실행 [실전 리액트 프로그래밍] babel을 실행해보자! babel이란? 리액트의 JSX 문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법 등을 사용할 수 있게 해 주는 자바스크립트 코드의 컴파일러. babel을 실행하는 여러 가지 방법 @babel/cli로 실행하기 웹팩에서 babel-loader로 실행하기 @babel/core를 직접 실행하기 @babel/register로 실행하기 프로젝트를 생성할 폴더에 npm으로 생성한다. npm init -y /package.json 파일이 생성된다. > 다음으로 필요한 패키지를 설치 바벨을 실행하기 위해서 필수적인 @babel/core와, 두 개의 플러그인, 프리셋 하나를 설치한다. npm install @babel/core @babe.. 더보기 [CentOS 7] React start를 위한 Yarn 의존모듈 설치 서버에 NodeJS를 올렸으니 이제 ReactJS를 올려볼 차례. 👉🏻 Yarn npm 패키지의 설치, 업데이트, 구성 및 제거 프로세스를 자동화하는 데 사용되는 JavaScript 패키지 관리자. Yarn, npm 둘 다 쓰는데 솔직히 체감상 어떤 차이가 있지는 않고, 이것저것 모듈 다운받으면서 하나로 통일하기보다는 둘 다 혼용해서 사용하다보니 yarn도, npm도 둘 다 깔아놓는 게 그냥 속편한 것 같다. 이미 nvm 설치하면서 npm은 깔려있는 상태라 yarn만 새로 설치했다. 👇🏻 npm 설치 [CentOS 7] Node.js 설치, 프로젝트 Git Clone 해서 확인하기 1. nvm 설치 nvm을 통해 node, npm 버전을 상황에 따라 활용할 수 있도록 한다. yum install wget.. 더보기 이전 1 2 다음
