프론트엔드 시작 코드

프론트엔드 개발자는 여러 가지 코드를 만든다. 대부분은 브라우저에서 해석되는 특징이 있다. 프로젝트 시작을 위한 코드를 만들기 위해 여러 툴과 다른 코드를 사용하는데 한 줄의 코드도 만들지 않고 기본 코드를 가져다 프로젝트를 시작할 수 있다. 대분분의 프로젝트를 이런 방식으로 시작했다. Index.html 파일로 개발을 시작하는 것은 C 프로그램을 main.c 파일 하나로 시작하는 것과 비슷하게 어렵다. 혼자 일하든 여럿이 일 하든 시작 코드는 꼭 필요하다. 인기 있는 시작 코드는 검증되었다고 봐도 된다. 이런 코드를 가져오기 전에 브라우저만큼 중요한 Node.js(노드)를 설치해야 한다. 노드 모듈을 관리하는 npm과 노드의 여러 버전을 선택해서 사용하기 위해 nvm도 필요하다.

node –version
v8.0.0
npm –version
5.0.0
nvm –version
0.33.11

노드를 설치한 후 yeoman을 사용하여 기본 코드를 만든다. Front End Scaffolding Tools이라고도 부른다. 실행 파일 이름인 yo는 npm으로 설치할 수 있는 모듈이고 node를 사용하여 수행할 수 있다. yo는 여러 종류의 generator를 가지고 있는데 내가 만들고 싶은 시작 코드 종류에 따라서 골라 사용할 수 있다. yo를 수행할 때 generator 이름을 지정하면 시작 코드를 자동으로 만들어준다. generator도 node 모듈임으로 npm을 사용하여 설치한다. 어떤 generator를 선택해야 할까? react 프레임워크를 사용하는 react-webpack를 선택했다.

yo –version
2.0.5
npm install -g generator-react-webpack
yo react-webpack

몇 가지 질문에 대답하면 현재 디레토리에 여러 파일들을 만들어준다.

$ tree
.
├── cfg
│ ├── base.js
│ ├── defaults.js
│ ├── dev.js
│ ├── dist.js
│ └── test.js
├── dist
│ ├── README.md
│ └── static
……

아래 명령으로 서비스를 수행하고 브라우저로 localhost:8000 주소에 접속하면 기본 화면을 볼 수 있다.

$ npm start

자동으로 만들어진 파일 중에 점으로 (dot) 시작하여 감추어진 파일과 package.json 파일을 좀 더 자세히 살펴보길 바란다. 입맛에 맞는 시작 코드를 찾는 것도 일이다. generator-gulp-angular를 사용하다가 업데이트가 중단돼서 FountainJS로 갈아탔다가 지금은 다른 generator를 찾고 있다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.