웹팩(2)
-
[002] 리액트, 타입스크립트, Webpack, Babel - CSS 설정
안녕하세요~ totally 개발자입니다. style-loader, css-loader 이 2개를 설정해서 CSS 파일을 사용해보도록 하겠습니다. Step 1: 터미널에 다음을 입력해줍니다. Step 2: webpack.config.js 파일을 열어서 다음 내용을 추가해줍니다. Step 3: src 폴더 내에 styles.css 파일을 생성하고 다음처럼 넣어줍니다. Step 4: import './styles.css'; 해주면 됩니다. Step 5: yarn start로 테스트해서 되는 지 확인합니다.
2023.03.03 -
[001] 리액트, 타입스크립트, Webpack, Babel - 초기 설정
안녕하세요~ totally 개발자입니다. 리액트(React), 타입스크립트(Typescript), Webpack, Babel 초기 설정에 대해서 살펴보도록 하겠습니다. 오늘 살펴볼 리액트, 타입스크립트, 웹팩, 바벨의 용도는 아래와 같습니다. 리액트(React) 자바스크립트 라이브러리 타입스크립트(Typescript) 자바스크립트의 확장 언어로 자바스크립트에 타입 등을 부여할 수 있고 엄격한 문법을 사용하도록 지원 웹팩(Webpack) 애플리케이션을 위한 필요한 모든 파일(모듈)을 병합하여 하나의 번들(결과물)로 생성해주는 도구 바벨(Babel) ES6 이상의 자바스크립트 문법을 ES5 형태 즉 모든 브라우저에서 지원할 수 있도록 컴파일해주는 도구 초기 세팅을 위해 기본적으로 VScode, yarn, n..
2023.03.03