프론트엔드/Bundler15 NPX, Degit Webpack, Parcel 번들러를 터미널을 이용해서 손쉽게 다운 받는 방법 VsCode를 새창으로 열어준다 터미널에서 아래와 같이 원하는 프로젝트 경로로 이동해준다. npx를 사용하여야 하는데 그러기 위해서는 node.js환경이 설치되어 있어야 한다. NPM :: step 1 (tistory.com) NPM NPM(Node Package Manager): 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리 NVM을 설치하면 자동적으로 NPM도 함께 설치된다. npm 시작 명령어(npm으로 프로젝트 관리 시작): npm init -y 프.. dreaming5developer.tistory.com degit: 원격 저장소의 내용을 내려 받을 수 있는 명령어 다운 받을 저장소를 github에서.. 2021. 7. 10. 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. 이전 1 2 3 다음
