웹 공부하기
[인프런] 실전 웹 성능 최적화 (Lighthouse, 이미지 사이즈 최적화)
구글 크롬 개발자도구에 있는 Lighthouse 패널에서 성능 분석을 해보고, 이미지 사이즈를 최적화 해보자. Lighthouse 패널을 이용해 사이트를 분석해보자. 강의에서는 Audits 툴이라고 나오는데 Lighthouse로 이름이 바뀐 것 같다. 무엇을 위해 검사할 것인지에 대한 선택을 해야한다. 우리는 desktop 환경이고 performance에 대해 분석하고자, 위와 같이 세팅했다. 이제 Generate report 버튼을 눌러 분석을 시작하자. 숫자 페이지 성능을 나타내는 점수이다. (Metrics라는 검사 지표에 의한) 스크린샷 페이지가 로드되는 흐름을 스크린샷으로 보여주고 있다. 위의 항목들은 해당 사이트의 문제점과 문제점을 해결할 수 있는 가이드를 제공한다. Opportunities 리..
[인프런] 프론트엔드 개발환경의 이해와 실습 (웹팩 - 최적화)
최적화가 필요한 상황과 웹팩에서 최적화를 적용하는 방법에 대해 알아보자. 최적화 코드가 많아지면 웹팩으로 번들링한 결과물의 크기도 커진다. 메가바이트(MB) 단위로 커질 수 있는데, 이는 브라우저 성능에 영향을 줄 수 있다. 파일을 다운로드하기까지 시간이 오래 걸리기 때문이다. 번들링한 결과물을 어떻게 최적화할지 살펴보자. production 모드 가장 기본적인 방법은 웹팩에 내장되어 있는 최적화 방법 중, mode 값을 설정하는 것이다. development는 디버깅 편의를 위해 아래의 플러그인을 사용한다. NamedChunksPlugin NamedModulesPlugin 추가로 DefinePlugin을 사용한다면 process.env.NODE_ENV 값이 development로 설정되어 애플리케이션에..
[인프런] 프론트엔드 개발환경의 이해와 실습 (웹팩 - 핫 로딩)
핫 로딩이 무엇인지 알아보고, 웹팩에서 직접 적용해보자. 핫 로딩 핫 모듈 리플레이스먼트 웹팩 개발서버의 한 기능으로, 코드 변경 사항이 있을 때 전체 화면을 갱신하지 않고 변경된 모듈의 화면만 갱신해준다. SPA(Single Page Application)은 브라우저에서 데이터를 담고 있기 때문에 리프레시 하면 모든 데이터가 초기화 된다. 내가 수정한 부분과 무관한 곳도 초기화되어 불편할 경우가 생긴다. 따라서 해당 기능을 사용하면 이러한 불편함도 줄이고, 개발 속도를 빠르게 할 수 있다. devServer.hot 속성을 켜서 핫 로딩을 설정해보자. webpack.config.js module.exports = { devServer = { hot: true } } 이렇게 설정해주면 웹팩 서버의 HMR ..
[인프런] 프론트엔드 개발환경의 이해와 실습 (프리티어 Prettier)
ESLint와 유사한 Prettier에 대해 알아보고 적용해보자. 프리티어(Prettier) 프리티어는 ESLint의 역할 중 포맷팅과 비슷하다. 코드 품질과 관련된 기능은 하지 않고, ESLint 보다 조금 더 일관적인 스타일로 코드를 다듬는다. 프리티어 패키지를 설치해보자. npm install -D prettier 프리티어를 적용할 코드를 작성하자. app.js console.log('hi');;;;;; Prettier로 검사해보자. npx prettier app.js --write —write 옵션을 추가하면 자동으로 파일을 수정해준다. app.js console.log("hi"); prettier는 ESLint와 달리 규칙이 미리 세팅되어 있어 설정 없이도 바로 사용할 수 있다. 그러나, 여전히..
[인프런] 프론트엔드 개발환경의 이해와 실습 (린트 Lint)
린트가 무엇인지 알아보고, 자주 사용하는 ESLint 사용법을 살펴보자. Lint 린트란? 오래된 스웨터의 보푸라기 같은 것을 의미하는데, 코드에도 이러한 보푸라기가 있다. 들여쓰기를 맞추지 않거나, 선언한 변수를 사용하지 않는 등의 경우이다. 보푸라기가 있는 옷을 입을 수는 있듯이 이러한 코드로 만든 애플리케이션도 동작한다. 그러나 코드의 가독성이 떨어지고 유지보수하기 어려워질 수 있다. 따라서 코드의 오류나 버그, 스타일 등을 점검하는 것이 필요하며, 이를 린트(Lint) 혹은 린터(Linter)라고 부른다. 린트는 코드의 가독성을 높이는 것 뿐만 아니라 동적인 언어의 특성인 런타임 버그를 예방하는 역할도 한다. ESLint ESLint는 EMS 코드에서 문제점을 검사하고 더 나은 코드로 정정하는 린..
[인프런] 프론트엔드 개발환경의 이해와 실습 (사스 Sass)
사스를 사용하는 방법에 대해 알아보자. 사스(Sass) 바벨을 설정하는 것과 거의 유사하다. 바벨이 ES6를 ES5로 변환해주듯이, 사스는 sass, scss(sass+css)를 css로 바꿔주는 전처리를 한다. 먼저 두가지를 설치해주어야 한다. $ npm install -D sass-loader node-sass node-sass : sass코드를 css로 컴파일해줌 sass-loader: 웹팩에서 sass를 만나면 node-sass를 내부적으로 실행시켜줌 webpack.config.js ... module: { rules: [ { test: /\.(scss|css)$/, use: [ process.env.NODE_ENV === "production" ? MiniCssExtractPlugin.loade..
[인프런] 프론트엔드 개발환경의 이해와 실습 (바벨 사용법과 웹팩 통합)
자주 사용하는 바벨 프리셋을 적용해보고, 웹팩과 통합시켜 사용하는 법을 알아보자. 바벨 사용법과 웹팩 통합 이처럼 바벨은 목적에 따라 몇 가지 프리셋을 제공한다. 바벨에서는 프리셋을 잘 사용하는 것이 중요하다. preset-env ECMAScript2015+를 변환할 때 사용한다. 즉, 위에서 우리가 커스텀했던 프리셋과 거의 비슷한 역할을 한다. preset-flow flow를 변환하기 위한 프리셋이다. preset-react react를 변환하기 위한 프리셋이다. preset-typescript typescript를 변환하기 위한 프리셋이다. 커스텀 프리셋 대신 preset-env을 적용해보자. 먼저 설치를 해야한다. $ npm install -D @babel/preset-env 그리고 바벨 설정 파일..
[인프런] 프론트엔드 개발환경의 이해와 실습 (바벨의 기본 개념)
바벨의 기본 개념을 알아보고, 프로젝트에 직접 적용해보자. 바벨의 기본 개념 바벨이 나온 이유 브라우저마다 사용하는 언어가 달라서 프론트엔드 코드가 일관적이지 않을 때가 많다. 인터넷 익스플로러에서 Promise를 이해하지 못하는 것 처럼 말이다. 이와 같은 크로스브라우징을 해결해 줄 수 있는 것이 바로 바벨이다. ECMAScript2015+로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다. 바벨의 기본 동작 바벨은 EMS2015 이상의 코드를 적당한 하위 버전으로 바꿔준다. 바뀐 코드는 최신 자바스크립트 코드를 이해하지 못하는 구 버전 브라우저에서도 잘 동작한다. 바벨을 이용해 아래 코드를 바꿔보자. src/app.js const alert = msg => window.alert(msg)..