webpack3 [React] react 에서 이미지 적용하기 - 떽떽대는 개발공부 오늘은 react 사용 시 이미지를 적용하는 법에 대해 공부 했다. webpack 공부할 때 왜 공부를 안하고 넘어갔는지.. 후회 했다ㅠ 먼저, file-loader 와 url-loader 를 install 해준다. npm i -D file-loader url-loader 그리고 webpack 에서 output 부분에 publicPath 를 넣어 주어야 한다. output: { filename: "bundle.js", path: path.resolve(__dirname + "/build"), publicPath: '/' }, 이후 webpack : module - roules 부분에 아래와 같이 추가한다. { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-load.. 2021. 2. 15. [React] 절대경로를 사용하여 css 적용하기 - 떽떽대는 개발공부 2021/01/14 - [React] - [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 2020/12/30 - [React] - [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 리액트 프로젝트 생성 및 실행 방법 프로젝트 생성 프로젝트 생성 ddeck.tistory.com 이전 글에서 webpack 을 이용하여 개발환경을 구성했다. 작성한 프로젝트에 css를 추가하고자 한다. src 디렉토리가 위치한 동일 디렉토리에 public 디렉토리를 생성하고 css 디렉토리를 생성한 후 style.css 파일.. 2021. 1. 15. [React] React webpack 을 이용하여 개발 환경 구성하기 - 떽떽대는 개발공부 2020/12/30 - [React] - [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 [React] 프로젝트 생성하고 실행하기-떽떽대는 개발공부 리액트 프로젝트 생성 및 실행 방법 프로젝트 생성 프로젝트 생성 명령 설치하기 npm install -g create-react-app 위 명령으로 리액트 프로젝트를 생성하는 create-react-app명령을 설치했다. -g옵션이 주어 ddeck.tistory.com 상기 글에서 리액트 프로젝트를 생성하는 방법을 포스팅 했다. 실제 프로젝트 작업을 하기 위해 상기의 생성 프로젝트에서 수정해야 할 사항이 보이는데 이 부분을 보다 웹팩을 이용하여 직접 프로젝트 개발 환경 구성하는 법에 대해 알아보았다. 먼저 프로젝트를 생성할 디렉토리를 열어준다. 터.. 2021. 1. 14. 이전 1 다음
