차곡차곡 개발기록

번들 분할 웹팩과 같은 웹 번들러는 코드 및 코드 사이의 종속성을 분석 단일 파일로 번들 가장 적합하게 분할 하려 함 이를 분할하는 프로세스를 번들 분할이라고 함 터서(Terser) 웹팩이 코드를 최소화하고 최적화하기 위해 사용하는 도구 변수와 함수의 이름을 미니마이즈하고 (가능한 작게 변경) 트리쉐이킹 이라는 프로세스 수행으로, 어플리케이션에서 사용되지 않는 코드 제거 이때, 코드가 앱의 동작에 영향을 조금이라도 줄 경우 제거 하지 않음 트리쉐이킹은 매우 복작한 프로세스라 기능이 손상되지 않도록 신중하게 수행되어야 함 ESModule 보다 CommonJS 의 트리쉐이킹이 더 적게 일어남 ESModule = 새로운 표준, CommonJS = 오래된 모듈 표준 번들 크기 측정 웹팩에서는 Webpack Bu..

프로젝트 웹 개발 코드품질 향상을 위해 포맷 맞추기용 ESLint 사용하자 사용하는 IDE인 Webstorm에 적용해보자 # 사전조건 1. npm i -D eslint ... 로 설치 (react 등 프로젝트에 맞게 설치) { ..., "devDependencies": { "eslint": "^8.11.0", "eslint-plugin-import": "^2.25.4", "eslint-plugin-react": "^7.29.4", "eslint-plugin-react-hooks": "^4.3.0" } } 2. .eslintrc 파일 작성 { "parserOptions": { "ecmaVersion": 2021, "sourceType": "module", "ecmaFeatures": { "jsx": tru..

inflearn - 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 김정환 님 강의를 들으며 기록한 내용이다. 기본 이론 린트의 역할 코드의 보푸라기들을 제거하는 역할을 한다 ESLint 역할 포맷팅 코드 품질 유지 : 잠재적 오류를 사전에 체크해 줌 실습 준비 및 실습 ESLint 사용 npm i eslint 실행 npx eslint app.js 실행하면 오류남 // 설정 파일이 필요하다 ESLint couldn't find a configuration file. To set up a configuration file for this project, please run: npm init @eslint/config 프로젝트 루트에 .eslintrc.js 파일을 생성 ..

inflearn - 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 김정환 님 강의를 들으며 기록한 내용이다. Babel 바벨의 배경, 바벨은? 브라우저에서도 사용하는 자바스크립트 언어가 조금씩 달라 코드가 일관적이지 못할때가 있음 예를 들어, 사파리에서 Promise.prototype.finally 메소드를 사용할 수 없었다 크로스 브라우징으로 인한 문제를 해결하기 위해 바벨리 등장함 ECMAScript2015+, TypeScript, JSX 등 언어도 브라우저에서 동작하게 만들어줌 실습 준비 바벨 설치 npm install @babel/core @babel/cli node_modules/.bin/babel src/app.js npx babel src/app.js ..

inflearn - 프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 김정환 님 강의를 들으며 기록한 내용이다. NodeJS node js 를 배워야 하는 이유? 브라우저에 맞게 개발 타입스크립트 같은 고사양 언어 빌드 자동화 프로젝트 사용 라이브러리 다운 및 테스트 자동화 개발환경 커스터마이징 제공 node js 버전관리 nodejs는 시맨틱 버전관리 메이저.마이너.패치 ~ 틸트, ^캐럿 버전 표기 Webpack 웹팩이란? 웹팩은 모듈로 연결된 여러개의 파일을 합쳐주는 역할을 함 그 결과 하나로 합쳐진 파일을 번들이라고 함 웹팩이 번들을 만드는 번들러 역할을 함 따라서 웹팩을 번들러라고도 함 실습준비 기본 프로젝트 생성 mkdir basic_frontend cd ba..

react 설치 중 오류 발생 ❯ npx create-react-app react-assets dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.67.dylib Referenced from: /usr/local/bin/node Reason: image not found [1] 1317 abort npx create-react-app react-assets 맥을 바꾸면서 저장공간을 그대로 복사해서 버전/환경이 달라 생긴 이슈 해결방법은 icu4c 가 링크된 버전을 바꿔주거나, brew upgrade npm 로 해결가능 brew list icu4c 로 버전 확인 하니 아래의 결과가 나옴 /usr/local/Cellar/icu4c/69.1/ 새로운 ..

1. 엔진 - 구분 : 레이아웃 엔진 또는 렌더링 엔진 / 자바스크립트 엔진 - 렌더링 엔진 . 기능 : HTML, XML 서식정보인 CSS 등을 읽어드려 사람이 눈으로 읽고 볼수 있는 문서로 표시하는 웹 브라우저의 핵심기능을 담당 한다. '코드'를 호출시에만 읽고서 해석을 한다는 점에서 인터프리터라고도 볼 수 있다. . 종류 : 게코(Gecko), 웹키트(WebKit), 블링크(Blink), 트라이던드(Trident) 등 . 엔진별 설명 . 블링크 : 웹키트의 웹코어 컴포넌트의 포크 엔진으로 2013년 4월에 처음 발표되었으며 구글 크롬 버전28+, 오페라 브라우저 15+, 비발디 브라우저, 웨일 브라우저, 안드로이드 4.4+의 웹뷰 및 Qt 웹엔진에서 사용 중입니다. - 자바스크립트 엔진 . 기능 :..