기초부터 완성까지 프론트엔드 - day6

Day 6

오늘 읽은 범위

• 11장 프론트엔드 개발 도구
• 12장 디버깅

책에서 기억하고 싶은 내용을 써보세요.

npm :

• Node.js의 패키지를 관리하는 도구, npm CLI를 사용하여 간편하게 설치할 수 있음
• npm install <package>: 패키지 설치
• npm install <package>@1.0.0: 특정 버전으로 패키지 설치
• npm install: 의존성 패키지 설치(node_modules)
• npm install -g: 전역 설치
• npm uninstall <package>,npm uninstall -g <package>: 패키지 삭제
• npm install --save-dev <package>,npm install -D <package>: 개발 환경에서만 사용할 패키지 설치
• npm update <package>: 특정 패키지 업데이트

package.json

• name: 프로젝트 이름
• version: 프로젝트 버전
• dependencies: 배포에서도 필요한 패키지
• devDependencies: 개발에만 필요한 패키지 (배포에서 필요 X)
• repository: 소스 코드가 저장된 레포지토리
• author: 개방자 정보 (회사이름, 팀이름, 이름)
• licenses: 라이선스
• main: 패키지를 설치하는 곳에서 진입점으로 사용할 파일
• files: npm 레포지토리에 배포할 때 포함해야 할 폴더나 파일을 정의
• types: 타입스크립트를 사용할 때 types 속성에 타입 정의 파일을 명시
• scripts: npm run 명령어로 정의된 명령어를 실행할 수 있음

yarn

• 페이스북에서 만든 Node.js 패키지 매니저
• 설치된 모든 패키지를 캐시하여, 병렬로 설치를 수행 (npm보다 성능이 좋음)
• yarn.lock 파일을 통해 일관성 있는 의존성 관리
• 보안이 npm 보다 우수함

webpack

• 가장 많이 사용되는 번들러
• CommonJS, AMD, ES2015 모듈 포맷을 모두 지원
• 기본적으로 자바스크립트 파일이나 JSON 파일만 이해함 → Loader를 통해 관리

  module.exports = {
    module: {
      rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] }]
    }
  };
  

• plugin: 번들 파일이 생성되는 방식을 수정, 환경 변수 주입, 난독화 및 압축과 같은 작업 수행

  const HtmlWebpackPlugin = require("html-webpack-plugin");
  
  module.exports = {
    plugins: [new HtmlWebpackPlugin()]
  };
  

• devServer: 개발 서버 설정
  • static: 정적 파일 제공 폴더 경로 (기본: public)
  • port: 포트 번호 변경 (기본: 8080)
  • https: 개발 환경에서 https 프로토콜을 사용해야하는 경우, https 옵션을 true로 변경
  • host: 쿠키를 사용하거나 인증이 필요한 경우 동일한 도메인으로 맞추기 위해 사용
• mode: 개발 환경, 배포 환경에 맞춰 최적화를 위한 설정이나 plugin 옵션들이 자동으로 적용됨

babel

최신 문법을 구형 브라우저에서도 동작하는 코드로 트랜스파일해주는 개발 도구

• npm i -D @babel/cli @babel/core @babel/preset-env
  • @babel/cli: 트랜스파일을 위한 babel 명령어
  • @babel/core: 기존의 코드를 분석하고 변환하는 파싱 코드들이 포함
  • @babel/preset-env: 바벨의 공식 프리셋, 프로젝트 환경 설정에 맞게 트랜스파일에 필요한 플러그인 결정
• 바벨 설정 파일
  • babel.config.json: 프로젝트 전체에 적용되는 파일
  • .babelrc: 현재 폴더에만 적용 (하위 프로젝트에서 독립적인 개별 설정을 위해 사용)

※ 번들러: 모듈 지원이 불가한 브라우저에서의 의존성 관리 문제를 해결해줌

Linter

소스 코드를 분석해 오류나 오타, 잠재적인 버그를 찾아주는 도구

• ESLint: 가장 많이 사용되는 자바스크립트 린터
  • npm i -D eslint
  • .eslintrc,eslintrs.js,eslintrc.yml,eslintrc.json 파일 형태로 작성
  • extends 설정 옵션을 사용해 이미 만들어진 규칙을 사용

• Prettier: 코드 포맷터

• stylelink: css 린터
  • .stylelintrc.js 파일 형태로 작성
  • rules 옵션에 객체 형태로 작성

디버깅

개발 단계에서 발생하는 버그의 원인을 찾아내고 수정하는 작업

잘못된 자바스크립트 로직을 찾거나 특정 CSS로 인한 레이아웃 틀어짐 현상 수정, 성능 저하 개선 등

요소에 등록한 이벤트 리스너가 제대로 동작하지 않을 땐?

개발자 도구 - event Listeners

요소에서 발생할 수 있는 모든 이벤트 종류와 정보를 보여줌

에러가 발생한 시점의 정보를 알아내려면?

개발자 도구 - sources

문제가 발생하는 시점의 콜 스택과 소스 정보를 라인별로 알려줌

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

번들러를 사용하는 이유를 알지 못했는데 책을 읽으며 번들러를 통해 커스텀할 수 있는 부분들에 대해 알게 되어 좋은 시간이었던 것 같다.