young
is this it
young
전체 방문자
오늘
어제
  • 분류 전체보기 (143)
    • 웹_프론트엔드 (1)
      • 로드맵 챌린지 (73)
      • Svelte (2)
      • React (6)
      • JavaScript (8)
      • TypeScript (2)
      • HTML+CSS (5)
    • 웹_백엔드 (0)
      • Django (0)
    • 빅데이터 (33)
      • R (30)
      • Python (2)
    • 기타 (11)
      • git (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • owasp
  • ggmap()
  • form
  • 보안취약점
  • ssl
  • rstudio지도정보
  • css네이밍
  • bem
  • 암호화
  • 웹보안
  • ggplot
  • vcs
  • 인증
  • 구글맵api
  • css후처리기
  • 대칭키
  • 태스크러너
  • 버전관리
  • Regex
  • 공개키

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
young

is this it

웹_프론트엔드/로드맵 챌린지

빌드 도구 - 태스크 러너, npm scripts

2022. 1. 25. 08:12
반응형

Task Runner

프로그램 개발에 수반되는 반복 작업들을 스크립트로 작성하여 한 번에 실행되도록 하여 빌드 과정의 여러 부분을 자동화 해주는 도구다. npm scripts 등이 있다.

 

 

npm scripts

태스크 러너로 npm scripts를 사용했을 때의 장점은 npm 툴을 다룰 수 있고, 다른 태스크 러너의 환경 설정이나 규칙에 상관 없이 package.json을 통해 중앙화 된 패키지 관리와 번들링 수행이 가능하다는 점이다. 반복적인 특정 작업을 자동화하여, 그 작업이 필요할 때 미리 정의해둔 키워드로 작업을 실행하는 것이다.

 

 

사용 방법

package.json에서 scripts 안에 자동화 할 내용을 작성하면 된다.

{...
 "scripts": {
    "start": "node ./dist/index.js",
    "test": "jest",
    "build": "tsc",
    "lint": "eslint"
 }
...}

위 예의 경우, "npm start"를 명령했을 때 ./dist/index.js 파일이 실행되는 것이다. 기존의 "npm start" 명령어를 사용하면 서버가 실행되지만, 이렇게 scripts 안에 "npm start"가 있는 경우에는 scripts 내 명령어가 우선된다.

 

 

기타 npm 명령어

  • npm init: 새로운 패키지나 프로젝트를 생성
  • npm install 패키지명 : 루트에 node_modules 폴더가 생성되고 거기에 (package-json)을 설치
  • npm update : 설치한 패키지를 업데이트
  • npm dedupe : npm의 중복된 패키지를 정리
  • npm outdated : 오래된 패키지가 있는지 조회
  • npm start: package.json scripts의 start 명령어를 실행하며, 존재하지 않을 경우 node server.js를 실행
  • npm run 지정명령어: package.json script에서 지정한 명령어를 실행

 

 

짧은 추천 영상

https://youtu.be/hHt3oVk3XVk

 

반응형

'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글

빌드 도구 - 모듈 번들러, Rollup  (0) 2022.01.28
빌드 도구 - 모듈 번들러, webpack  (0) 2022.01.26
CSS 후처리기 - PostCSS  (0) 2022.01.24
CSS 구조 - BEM 방법론  (0) 2022.01.20
패키지 매니저 - npm vs. yarn  (0) 2022.01.18
    '웹_프론트엔드/로드맵 챌린지' 카테고리의 다른 글
    • 빌드 도구 - 모듈 번들러, Rollup
    • 빌드 도구 - 모듈 번들러, webpack
    • CSS 후처리기 - PostCSS
    • CSS 구조 - BEM 방법론
    young
    young

    티스토리툴바