프론트엔드 개발 도구와 설치 방법

프론트엔드 개발을 하려면 코드를 작성할 수 있는 코드 에디터와 Git, NodeJS가 필요합니다.
따로 쓰고 싶은 코드 에디터가 있지 않다면 Visual Studio Code로 시작하시면 됩니다.

1. Visual Studio Code

여기로 들어가서 Download for Windows를 클릭해 설치합니다.
Mac 사용자는 Mac 버전을 선택하세요.

 

 

2. Git

Git은 버전 관리 툴입니다.
코드의 어떤 부분이 수정됐는지를 기록하기 때문에
개발을 진행하다 문제가 발생하더라도 이전 상태로 쉽게 되돌릴 수 있게 해줍니다.

당장에는 Github 서비스를 이용하기 위해서 Git이 필요합니다.
Windows에서 Git을 설치하려면 여기로 들어가서 Download for Windows를 클릭하세요.
Mac에서는 이미 설치된 경우도 있으므로 터미널에서 git --version 명령어를 입력해 Git이 설치 됐는지 확인합니다.
설치되지 않았다면 Windows와 마찬가지로 위 링크로 들어가 Download for Mac을 클릭하고 안내에 따라 설치 합니다.

 

Windows의 경우 파일을 다운 받아 열면 설치 프로그램이 실행됩니다.
2.31.1 버전 기준 다음 두 가지 설정만 바꾸시고 나머지는 Next를 클릭해 설치를 완료하세요.

 

Visual Studio Code를 기본 에디터로 설정

 

기본 브랜치를 main으로 설정

 

3. NodeJS

자바스크립트는 태생이 웹을 위한 언어였기 때문에 기본적으로는 브라우저에서만 작동했습니다.
그러나 NodeJS가 등장하고 나서 브라우저가 아닌 환경에서도 쓸 수 있게 됐습니다.
NodeJS를 설치하면 node 명령어를 이용해서 자바스크립트 파일(.js)을 브라우저에 의존하지 않고 개별적으로 실행할 수 있습니다.

뿐만 아니라 NodeJS의 NPM(Node Package Manager)을 이용해서 기존의 개발자들이 개발한 기술들을 손쉽게 가져다 쓸 수 있습니다.

NodeJS와 NPM을 설치하려면 여기로 들어가서 Recommended For Most Users 버전을 다운 받아 설치하세요.

 

설치를 확인하려면 Windows에서는 위에서 Git과 함께 설치된 Git Bash를 실행하고
node -v 명령어와 npm -v 명령어를 입력합니다.
버전이 잘 나타난다면 설치에 성공한 겁니다.

 

git bash 실행

 

명령어 입력

 

4. Chrome

웹 페이지를 열려면 브라우저라는 프로그램이 필요합니다.

브라우저에는 Chrome, Safari, FireFox, Edge 등 다양한 종류가 있지만

현재까지 가장 많은 사람들이 쓰는 브라우저는 Chrome이기 때문에

웹 개발을 위한 브라우저로 Chrome을 쓰는 게 보통입니다.

여기로 들어가서 크롬을 설치하세요.

 

맺는말

기초 준비는 끝났습니다.

이제 직접 만들어 봅시다.

 

다음 글 보기