#0 개발환경 설정하기 - 텍스트에디터, Git, Node.js, NPM

 

React는 무엇인가요?

React는 페이스북이 만든 자바스크립트 라이브러리로 짧은 시간 내에 유명세를 톡톡히 얻은 프레임워크입니다. 지난 3년간의 조사에 따르면 Angular와 Vue.js보다 더 높은 만족도를 가지고 있다고 합니다. 2019년 말에는 자바스크립트 프레임워크 중에서 가장 사용자가 많은 프레임워크가 될 것이라 예상된다고 합니다. 

 

HTML5, CSS, Javascript가 익숙하다면, 요즘 많은 수요가 있는 React를 통해 웹개발을 배워보는 것이 어떨까요? 물론 저도 배우면서 이 글을 쓰고 있습니다. 

 

 

개발환경 설정하기  소프트웨어 

 

개발을 시작하기에 앞서, 개발환경을 설정해봅시다. 필요한 소프트웨어는 아래와 같습니다. 

 

1) 텍스트 에디터 설치하기

이미 사용하고 있는 친숙한 프로그램을 사용하시면 되지만, 저는 Visual Studio Code를 선호합니다. 텍스트 에디터는 그 외에 Braket이나 Sublime Text도 있으니 원하시는 프로그램을 사용하시면 됩니다.

 

2) 커맨드 라인 쉘 Command Line Shell 

윈도우에서는 cmd 창, Power Shell을, 맥과 리눅스에서는 터미널 Terminal 창을 사용하면 됩니다. Git을 설치할 때 같이 Git Bash를 설치하여 사용할 수 있습니다. 혹은 텍스트에디터로 Visual Studio Code를 사용한다면 확장프로그램에 Terminal이 있기 때문에, 번거롭게 따로 창을 열 필요 없이, 텍스트 에디터 내에서 사용할 수 있습니다. 최신 버전에서는 Terminal을 자체적으로 사용할 수 있게 되었습니다. (new!) 

 

3) 브라우저 선택

모든 브라우저와 버전이 HTML5를 지원하지 않기 때문에 최신 버전의 크롬을 사용하는 것을 권장합니다. 저는 현재 크롬 v.76을 쓰고 있습니다. 

 

 

개발환경 설정하기  Git 설정하기 

Git을 설치합니다. Git의 GUI 툴을 사용하고 싶다면 여기에서 확인할 수 있습니다. 개인적으로 추천을 많이 받은 프로그램은 SourceTree와 Fork로, 둘의 차이점을 알고 싶다면 여기를 참조하세요.

 

Git의 설치가 끝났다면 최초로 계정설정을 해야합니다.

 

1) 커맨드 창을 열고 Git이 제대로 설치되었는지 확인합니다.

 

$ git --version

 

2) Git에서 쓰일 이름과 메일주소를 설정합니다. 

 

$ git config --global user.name "사용자이름"
$ git config --global user.email 사용자메일주소

 

3) 아래에서 제대로 설정이 되었는지 확인할 수 있습니다. 

 

$ git config --list

 

--list 대신 user.email, user.name등 키값을 입력해도 볼 수 있습니다. 

 

개발환경 설정하기  Node.js와 NPM 설치하기 

 

Node.js와 npm을 설치합니다. Node.js는 자바스크립트 기반 서버 프레임워크이며, NPM은 Node Package Manager입니다. 여기에서 설치파일을 다운받습니다. 

 

커맨드 창에서 Node.js와 NPM이 제대로 설치되었는지 확인해봅니다. 

 

$ node -v
$ npm -v

 

버전이 제대로 뜨면 설치된 것입니다. 

 

 

 

개발을 시작하기   

이제 개발을 시작하려는 폴더를 만듭니다. 가급적 영문으로 된 폴더 이름을 사용하기를 권장합니다.

 

1) 커맨드 창이나, 혹은 Visual Studio Code 프로그램 내 터미널창에서 해당 프로젝트 폴더로 이동하거나 엽니다. 

 

2) git을 설정합니다. 

 

$ git init 

 

커맨드창에 입력하면 빈 Git Repository를 해당 경로에 초기화되었다고 뜹니다. 

 

3) npm을 설정합니다. 

 

$ npm init

 

계속 엔터를 눌러주다보면 Is this OK? (yes) 가 나옵니다. 엔터를 눌러주면 됩니다.

프로젝트 폴더 내에 "package.json" 파일이 추가된 것을 확인할 수 있습니다. 이 파일은 프로젝트의 의존성을 관리하는 매우 중요한 파일입니다. 

 

4) .gitignore 파일 설정하기

 

텍스트 에디터 내에서 새 파일을 추가하여  .gitignore 파일을 만들어줍니다. 중요한 것은 파일 이름이 온점(.)으로 시작한다는 것입니다. ".gitignore" 파일 내에 node_modules를 적고 저장해줍니다. 

 

node_modules

 

.gitignore 파일 내에 적힌 폴더와 파일은 커밋에 추가되지 않고, 저장소에 올라가지 않습니다. 

 

 

5) React 사용하기

 

$ npm install --save react react-dom

 

6) Babel 사용하기

Babel은 코드를 변환해주는 개발도구로, ES6+ 문법으로 작성된 코드를 모든 웹브라우저에서 호환이 가능하도록 한다. 

때문에 지금부터 자바스크립트를 공부한다면 ES5 이하 문법을 공부하는 데 열을 올릴 필요는 없다. ES6+ 문법을 공부하자. 

 

 

$ npm install --save-dev babel-preset-env babel-preset-react

 

프로젝트 폴더에서  .babelrc  파일을 만들고 파일 내에 아래와 같이 적어 저장합니다.

 

{ 
    "presets": [ "env" , "react" ] 
}

 

7) Parcel 시작하기

 

$ npm install -g parcel-bundler

 

Parcel의 설치가 완료되면  package.json  파일의 NPM 스크립트를 추가하면 편리하게 사용이 가능합니다.

 

"scripts": {
    "start": "parcel index.html" 
}

 

개발서버를 열어주는 파셀 명령어입니다. 위와 같이 등록한 후 

 

$ npm start

 

이렇게 사용하면 됩니다. 

 

 

 

---

 

여기까지 환경설정이 끝났습니다. 

다음 글에서는 React를 활용해 실제로 개발을 시작해보도록 합시다.

 

감사합니다.

 

 

 

 

---

 

(완료!) + 코드를 주석으로 삽입해왔는데, 티스토리 에디터에서 코드로 삽입할 수 있는 부분이 있어서 다음 글이 올라오기 전까지 수정하겠습니다. 

+ 웹팩과 파셀에 대한 내용을 해당 글에 추가하거나, 다음 글에 따로 다루도록 하겠습니다. 

+ 설명의 예시가 되는 이미지 파일을 추후 추가하도록 하겠습니다.