💫 FN 개발자의 개발환경 이해와 실습 - 01 build

👩🏻 프로젝트나 클론코딩 할 때마다 개발환경에 대한 지식이 미흡했는데 인프런 김정환님의 강의를 보면서 그동안 알고 싶었던 웹팩, 바벨, esLint, 프리티어에 대해 공부 시작해보자. 이렇게 개발환경에 대해 잘 알아두면 협업 할 때나 개발환경을 커스터마이징 할 수 있어서 나에게 편한 개발환경을 구축해 나갈 수 있다는 것이 정말 필요할 것 같고 웹팩과 eslint는 요즘 채용공고에 뜨는 기업들의 우대사항에 있어 빼놓을 수 없는 부분인 듯 하다.

 

FN개발에 node.js가 필요한 이유

1. 최신 스펙으로 개발할 수 있다

타입스크립트나 scss같은 고수준 프로그래밍 언어를 사용하려면 전용 트랜스파일러가 필요하다. 이런 것도 노드.js 환경이 뒷받침 돼야 프론트앤드 개발 환경을 만들 수 있다.

2. 빌드 자동화

파일을 압축하고, 코드를 낙독화하고, 폴리필을 추가하는 등 개발 이외의 작업을 거친후 배포한다. node.js는 이러한 일련의 빌드 과정을 이해하는데 적지 않은 역할을 한다.  뿐만 아니라 라이브러리 의존성을 해결하고, 각종 테스트를 자동화 하는데도 사용된다.

3. 개발 환경 커스터마이징

리액트 CRA를 사용하면 손쉽게 개발환경을 갖출 수 있다. 하지만 개발 프로젝트는 각자의 형편이라는 것에 있어서 툴을 그대로 사용할 수 없는 경우도 빈번하다. 커스터마이징을 하려면 Node.JS 지식이 필요하다. 어쩌면 자동화된 도구를 사용할 수 없는 환경이라면 직접 환경을 구축해야 할 상황에 놓일 수도 있다. 이러한 배경하에 Ndoe.js는 프론트엔드 개발에서 필수 기술로 자리매김하고 있다. 

node 설치 (https://nodejs.org)

페이지에 들어가서 본인 운영체제에 맞는 파일을 다운로드 하면 된다. 후에 터미널 창을 켜서 node를 검색하면 node가 실행된다. 이런 터미널창을 REPL 이라고 부른다. 자바스크립트 코드를 입력하고 즉시 결과를 확인할 수 있다.

{
  "name": "fn_dev_env",
  "version": "1.0.0",
  "description": "<br>",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "leehyunju",
  "license": "ISC"
}

• name : 프로젝트 이름
• version : 버전 정보
• description : 내용
• main : node.js에서 쓰이는 거라 무시해도 된다.
• scripts : 프로젝트를 자동화 할 수 있는 스크립트를 입력하는 부분
• author : 프로젝트 작성자
• license : 라이센스 정보

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

여기서 test는 터미널창에 `프로젝트 이름 test` 입력하면 밑에처럼 나온다.

 

echo 명령어로 `no test specified`라는 문구가 출력됐고, 1번 에러코드를 반환했기 때문에 에러메시지가 나오는 것을 확인할 수 있다. && exit 1 이 에러코드를 반환하겠다는 뜻.

 

터미널창에 npm command를 입력하면 우리가 자주 사용하는 command 명령어가 나온다. 특히 이중에서 start, install, test 를 가장 많이 사용. 기본으로 제공되는 command외에 다른 command를 추가하고 싶다면,

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"echo \"여기에 빌드 스크립트를 추가합니다\""
  },

스크립트 부분에 "build"를 입력하면 된다.

 

npm run build를 입력하면 스크립트 부분에 build로 등록했던 문장이 출력된다.