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

티스토리 뷰

프론트엔드/강의정리

프론트엔드 개발환경의 이해와 실습 - #1-2

lee_jing 2021. 6. 17. 12:32

프론트엔드 공부하면서 node, npm, 웹펙 등을 꼭 접하게 되지만 뭔지 모르고 하라고 하니까... 따라하는 경우가 많았다. 그런데 마침 회사에서 인프런 강의를 지원해줘서 좋은 강의를 수강할 수 있게 되었다.

배딜의 민족 프론트엔드 개발자이신 김정환님의 강의를 수강하며 정리해보았다.

1. 강의 소개

강의 제목 : 프론트엔드 개발환경의 이해와 실습

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..) - 인프런 | 강의

이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요., 웹팩, 바벨, 린트 같은 프론트엔드 기술을 이해하고 실무에 적용해 보세요! [사진] “웹팩은 팀에

www.inflearn.com

강의 내용 :

2. 프로젝트 생성

1. node가 필요한 이유

최신 스펙 사용 - 바벨, 웹펙 등 최신 스펙으로 작업할 수 있다. 바벨, 웹펙은 노드에서 돌아가는 도구들이다.
빌드 자동화 - 코딩한 걸 바로 브라우져에서 확인하는 경우가 줄어들고 있다. 노드는 일련의 빌드 과정을 이해하는데 적지 않은 역할은 한다.
개발 환경 커스터마이징 - 제공해주는 도구를 통해 개발을 시작할 수 있다. 프로젝트마다 각자의 형편이라는 것이 있기 때문에 그대로 사용할 수 없는 경우가 빈번하기 때문에 커스터마이징 할 수 밖에 없다. 자동화 도구를 사용할 수 없는 경우가 있으면 커스터마이징 할 줄 알아야 한다.

2. node.js 설치

node 사이트(바로가기)에 들어가 운영체제에 맞는 설치 파일을 다운로드하고 설치한다.

왼쪽(홀수) - LTS는 장기간 지원해주는 안정적인 버전이며 서버를 구성할 경우 사용한다.
오른쪽(짝수) - 불안정 할 수 있지만 LTS보다 최신 기술을 포함 해주는 버전이며 개발 환경 구축에 사용하면 된다.

설치가 끝났으면 터미널로 이동한다.

터미널에 node라고 입력하면 노드 터미널도구가 실행된다. 이것을 REPL(read-eval-print loop)이라 하는데 자바스크립트 입력하고 결과를 바로 확인할 수 있다. REPL을 종료하려면 .exit 입력하면 된다.

npm 입력하면 사용법을 알려주고 프로그램을 종료한다.

node --version 명령을 입력하면 node 버전을 확인할 수 있다.