시리즈

프론트엔드 개발환경의 이해와 실습

1.NPM(Node Package Manager) 1

프론트엔드 개발에 Node.js가 필요한 이유 > 최신 스펙으로 개발할 수 있다 자바스크립트 스펙의 빠른 발전에 비해 브라우저의 지원 속도는 항상 뒤쳐진다. 무리 편리한 스펙이 나오더라도 이것을 구현해 주는 징검다리 역할, 이를테면 바벨 같은 도구의 도움 없이는

2022년 7월 11일

패키지 설치 - CDN을 이용한 방법 CDN 서버 장애로 인해 외부 라이브러리를 사용할 수 없다면 우리 애플리케이션 서버가 정상이더라도 동작하지 않을 것이다. - 직접 다운로드하는 방법 라이브러리 코드를 우리 프로젝트 폴더에 다운받아 놓을 수 있다. 하지만 라이브러리가 계속 업데이트 될 때 마다 매번 직접 다운로드 하는 것은 매우 귀찮은 일이다. - ...

2022년 7월 11일

3.[Webpack5] 웹팩5 시작하기

배경 import/export 구분이 없었던 모듈 이전 상황 math.js app.js 두 자바스크립트 코드를 하나의 HTML파일에 로드해야 실행할 수 있다. index.html 단점 : 전역스코프가 오염된다 IIFE 방식의 모듈 IIFE는 즉시 실행 함

2022년 7월 16일

4.[Webpack5] loader와 asset modules

로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다.뿐만 아니라 CSS 파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다.로더를 테스트 해보기 위해 my-webpack-loader.js 파일을

2022년 7월 19일

5.[Webpack5] 플러그인

플러그인 로더는 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리한다 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다. 커스텀 플러그인 만들기 my-webpack-plugin.js 플러그인이 동작하면 MyPlugin: don

2022년 7월 24일

6.[Babel] 바벨의 기본 개념

바벨의 배경 크로스 브라우징 브라우져마다 사용하는 언어가 달라서 프론트엔드 코드는 일관적이지 못할 때가 많음 크로스브라우징의 혼란을 해결해 줄 수 있는 것이 바벨 ECMAScript2015+로 작성한 코드를 모든 브라우져에서 동작하도록 호환성을 지켜줌 타입스크립트, J

2022년 7월 30일

7.[Babel] 바벨 사용법과 웹팩 통합

프리셋 사용하기 바벨은 목적에 따라 몇 가지 프리셋을 제공한다 preset-env preset-flow preset-react preset-typescript preset-env는 ECMAScript2015+를 변환할 때 사용한다 preset-flow preset-

2022년 8월 3일

8.[Lint] ESLint

ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중의 하나다.ESLint의 목적은 코드 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것.ESLint가 하는 역할은 크게 두가지로 나눌 수 있다

2022년 8월 14일