본문 바로가기

분류 전체보기474

npm 프로젝트를 배포하는 방법(Netlify 사용) 배포를 진행하기 위해서는 미리 github에 저장해두어야한다. 이전 게시물 참고 VS Code에서 git(github)사용하기 (버전관리 방법) :: step 1 (tistory.com) VS Code에서 git(github)사용하기 (버전관리 방법) VS Code를 실행하여 해당 프로젝트를 열어준 후 터미널을 실행 (git 설치후 VS Code를 재시작 해주어야 한다) 터미널 확인(터미널 경로가 프로젝트 경로와 일치하는지 확인 해주어야 함) 깃 선언 (git i dreaming5developer.tistory.com github를 이용한 배포 방법(Netlify) :: step 1 (tistory.com) github를 이용한 배포 방법(Netlify) netlify를 이용하면 github에 새로 수정.. 2021. 7. 10.
Webpack - babel 설정 babel: 최신 문법의 자바스크립트 문법을 모든 브라우저에서 사용할 수 있도록 도와주는 도구 공식 사이트: https://babeljs.io/docs/en/ Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 참고 사이트: [Babel] Babel 의 역할, 기본적인 사용법 (tistory.com) [Babel] Babel 의 역할, 기본적인 사용법 이번에 프론트엔드 프로젝트를 진행하며 BABEL 을 사용하게 되었다. 이전 프로젝트에서 리액트를 하면서 사용해보긴 했지만 별다른 설정없이 리액트에서 생성해주는 설정그대로 사용하다보니 javacpro.tistory.com.. 2021. 7. 10.
Webpack - Autoprefixer Autoprefixer: 구형 브라우저에 최신의 css 기술을 적용 시키기 위해 공급업체 접두사를 자동으로 붙여주는 기능 display를 이욯하여 테스트 기존의 작성한 scss 파일에 display: flex를 설정 display: flex; 브라우저에서 동작하는지 확인 명령어: npm run dev 터미널에서 3가지 패키지를 설치 postcss: 스타일의 후처리를 도와주는 패키지 autoprefixer: 공급업체 접두사를 붙여주는 패키지 postcss-loader: webpack에서 사용할 수 있도록 도와주는 패키지 명령어: npm i -D postcss autoprefixer postcss-loader package.json 파일에서 확인 webpack.config.js -> rules -> use .. 2021. 7. 10.
Webpack - SCSS 사용 root 경로에 scss 폴더, 파일 생성 webpack의 진입점인 main.js파일에 scss파일을 import 시킨다. import '../scss/main.scss' webpack.config.js 파일의 scss를 읽을 수 있도록 module에 설정한다. 자세한 설정은 이전 게시물 (Weppack - module)을 참고 // .css, .scss파일을 찾도록 하는 정규표현식 test: /\.s?css$/, SCSS를 읽고 적용시킬수 있는 패키지를 설치한다. 명령어: npm i -D sass-loader sass package.json 파일을 확인한다. webpack.config.js파일에 sass-loader가 동작하도록 설정 (순서가 중요) main.scss파일을 수정 $color--black.. 2021. 7. 10.
Webpack - module Root 경로의 css파일을 읽어 오는 방법 폴더 및 파일 생성 main.css body { background-color: skyblue; } main.js 파일에 css파일을 연결한다. // root 경로의 css파일을 main.js 파일로 가져온다. // 그렇게 되면 webpack이 실행될때 처음 main.js파일을 읽어서 가져오기 때문에 dist 폴더에 css 파일이 생성된다. // js파일의 현재 위치를 기준으로 css파일을 찾기때문에 상위로 이동해서 찾도록 설정 import '../css/main.css' webpack.config.js 파일에서 진입점 확인 webpack자체는 css 파일을 읽어 올 수 없기 때문에 현재는 dist 파일에 css 파일을 생성해 주는 정도의 기능만 제공한다. 따.. 2021. 7. 10.
Webpack - 정적 파일 연결 fabicon파일과 이미지파일을 해당 프로젝트 파일에 옮겨둔 후 시작한다. 아래 이미지와 같이 파일을 옮겨준다. index.html에 아래와 같은 코드를 추가해준다. 정적 파일을 연결하기 위해서 패키지를 추가로 설치 해주어야 한다. 명령어: npm i -D copy-webpack-plugin 설치가 완료된 후 webpack.config.js 파일에서 설치한 패키를 가져와서 사용한다. // 정적 파일 연경을 위한 패키지 가져오기 const CopyPlugin = require('copy-webpack-plugin'); // 설치한 패키지 사용하기 (플러그인 내부에 추가로 입력한다.) new CopyPlugin({ patterns: [ // static 폴더 안에 파일들이 dist라는 폴더로 들어가도록 설정.. 2021. 7. 8.

티스토리툴바