soly.log

♣ Caching- webpack은 컴파일로 생성된 파일에서 변경된 내용이 없다면 브라우저는 캐시 상태를 유지하고 그대로 사용하게 된다코드를 직접 작성한 사람은 이 파일이 변경된 건지 안된 건지 알 수 있지만 다른 사람들이 본다면? 업데이트가 된 거야..? 뭐야라고 생각할 수도 있다!이럴 때 알 수 있는 방법은 build시 생성 되는 파일이름으로 확인 할 수 있는데 방법은 아래아와 같다. 1. 파일명에 hash값 작성하기!// 변경 전 output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js', },// 변경 후output: { path: path.resolve(__dirname, 'dist'), filename..

♣ Webpack Plugin의 정의- Plugin이란 번들링이 완료된 결과물(output)에 추가 기능이 필요할 때 사용 하는 것으로 loader가 파일을 변환해주는 역할을 한다면 Plugin은 이미 webpack을 통해 변환된 파일에 추가적인 기능(번들 최적화, 환경 변수 설정, 빌드 자동화)을 더하고 싶을 때 된다 많은 Plugin이 있지만 이번에는 소스코드 내에서 HTML 파일을 생성해서 작업하면 그 파일을 buil 할 수 있게 하는 HTML Webpack Plugin을 정리해보려고한다. 1. plugin 설치npm i -D html-webpack-plugin 2. webpack.config.js에 plugins에 HtmlWebpackPlugin 인스턴스 생성하여 적용const HtmlWebpa..

♣ Webpack Loader에 대해서 알아보자 - 리액트로 플젝을 진행할 때 css, font, image 등 사용할 때 뭔가 설정했던 기억 없음... 왜? 이미 CRA로 webpack이 전부 설정되어 있었기 때문플젝의 자원을 사용할 수 있게 도와주는 Webpack의 Loader는 Webpack이 웹앱을 해설할 때 자바스크립트 파일이 아닌 웹자원(HTML, CSS, Images, Font)들을 변환할 수 있도록 도와주는 속성이라고 생각하면 된다. 지금 해보는 건 scss를 사용한 스타일링이 가능하도록 작업환경을 만들어볼 건데 그러기 위해선 아래와 같이 라이브러리 설치가 필요하다npm i -D css-loader style-loader sass sass-loader 중간에 sass가 들어간 이유는 해당 ..

♣ webpack.config.js- 정말 완전 기초적인 웹팩 기본설정 파일을 만들어본다const path = require('path');module.exports = { mode: 'development', // 시작점(단일) entry: path.resolve(__dirname, 'src/index.js'), // 웹팩 작업을 통해 생성된 결과물 저장위치 output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js', },}; ➜ mode : 번들링 할 때 최적화 수준을 설정하는 옵션development(개발), production(배포), none(설정 없이 webpack기능만적용) 이렇게 3가지를 확인할 수 있는데..

♣ Import 기능 구현해 보기 - 리액트를 사용했던 사람이라면 최소 1번 아니 아주 많이 다른 폴더에서 작성한 컴포넌트를 Import을 통해서 쉽게 가져와서 사용했던 경험이 있을 거라고 말할 수 있다 하지만 이 Import 기능 또한 CRA로 프로젝트를 생성할 때 이미지 Webpack에 설정을 해놨기 때문에 사용할 수 있었다는 걸 모를 수도 있다고 생각하기 때문에 이 부분에 대해서 다뤄보려고 한다.(내가 몰랐기에..ㅎ)▪ 현재 파일 구조/Users/local/Documents/GitHub/study/webpack├── dist│ └── index.html└── src ├── index.js └── randomAddress.js 아래 화면과 같이 코드를 작성해서 Import를 시켰더니 E..

♣ Webpack이란?- 오픈소스로 만들어진 자바스크립트 모듈 번들러로 여러 개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리라고 생각하면 된다.(번들링)♣ Webpack장점다수의 장점 중 가장 크게 보였던 장점 2가지를 말한다면1. 다수 파일의 자바스크립트 코드를 압축하여 최적화할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다2. 모듈 단위로 개발이 가능하여 개발 시 코드의 가독성이 좋아지고 유지보수가 용의 하다 ♣ React를 사용하여 개발을 하면서 왜 한 번도 Webpack을 설정해 본 적이 없을까? - 나는 항상 React로 프로젝트를 생성할 때 Create-React-App(CRA)를 통해 작업을 시작했었다.CRA를 사용했던 이유는 그냥, 그렇..

♣ React에는 무조건 사용되는 babel에 대해서 알아보자!◆바벨이란 무엇인가?- ES2015+ 코드들을 현재 및 이전 브라우저나 환경에서 이전 버전과 호환이 가능한 Javascript 버전으로 변환하는 데 사용되는 컴파일러 또는 트랜스파일러라고 말할 수 있다. ◆바벨이 제공하는 주요 기능을 알아보자 1. 변환구문(Transform syntax)더보기최신 자바스크립트 문법을 구버전에서도 동작할 수 있도록 변환하는 과정이다.이 과정이 필요한 이유는?? 프론트엔드분야는 엄청나게 빠른 속도로 변화하지만 브라우저에서는 바로 적용이 어려울 수 있다 변경된 문법이 있다면 그 문법을 브라우저에서 지원을 안 해 브러우저 입장에서는 이게 무슨 말인데?라고 할 수도 있기 때문이다.그래서 우린 바벨이라는 트렌스파일러를 ..

♣ 파일 삭제 명령어 : rm [파일명]♣ 폴더 삭제 명령어 : rm -r [폴더명] - 현재 작업 중이던 브랜치에서 새로 만든 파일이 있는데 이 파일은 추적이 되지 않는다왜? 새로 만들어져서 이전값이 없으니까 지금 뭐가 변경이 됐는지 알 수가 없음!!! 그래서 checkout으로 특정파일들을 삭제하기 위해 명령어를 작성했지만 components 내부 파일은 삭제가 안된 걸 확인할 수 있다. 삭제 안된걸 어떻게 아나요? -> Updated 0... 업데이트된 게 없다고 나왔다..  그래서 내가 선택한 방법은 파일삭제 style은 폴더도 필요 없어서 폴더내부내용이랑 폴더를 통째로 삭제!rm파일 삭제 명령어-r디렉토리를 삭제할 때 사용 (디렉토리 내부까지 전부 삭제 되니까 주의) 📍참고 [폴더명],[파일..

♣ 삭제 명령어 : git checkout [파일명]- 회사에서는 깃허브데스크탑 이라는 UI도구를 사용한다. 그러다 보니 터미널에 사용하는 명령어는 점점 기억을 잃어가고 있던 상황이었는데집에서 따로 개인 공부를 하기 시작하였고 깃허브데스크탑으로는 바로 확인용으로 사용하고 모든 연결 작업은 터미널을 통해서 하기로 마음먹고바로 다음날인 오늘 회사에선 아무렇지도 않게 사용했던 아래 이미지에 보이는 Discard 처리를 터미널로 하려고 하니 손가락이 굳어버렸다.. 그래서 열심히 구글링 결과 명령어를 찾게 되었고 아래와 같이 특정 폴더만 작업내용 삭제해 봤고 아래와 같은 내용 발생 깃허브데스크탑에서도 확인해 보니까 삭제되어 있다...!!! 평소 업무에서 아무렇지 않게 편한 UI를 사용하다 보니 명령어를 알아야 한..