프론트엔드 개발 환경 기초 설정

 

이 글을 적기 위해서 컴퓨터를 포맷했다. (아님)

한 번 쯤은 정리하고 넘어가야하는 프론트엔드 개발환경 기초 설정!

 

1. VS Code 설치

 

VS Code는 마이크로소프트에서 개발한 에디터이다.

프론트엔드를 개발하려면 코드를 작성하고 편집하는 툴이 필요할텐데 VS Code가 그 대표적인 예시이다.

MS는 에디터라고 주장하지만 사실상 IDE 취급을 받고 있다.

즉, VS Code는 프론트엔드 개발에서 코드를 편집하고 작성할 수 있는 가장 대중적인 프로그램이다.

다양한 확장자와 플러그인을 지원하기 때문에 프론트엔드 개발 이외에도 많이 사용된다.

이를 쓰고 싶지 않다면 자신이 편한 IDE를 다운로드해서 사용해도 된다.

 

2. Git 설치

 

Git은 변형을 추적할 수 있는 형상 관리 도구이다.

말이 굉장히 어려운데, 쉽게 말해서 처음에 '안녕하세요'라고 작성했다가, '안녕하세요! 반갑습니다'라고 수정하면

너는 9시 21분에 처음 '안녕하세요'라고 적었는데

9시 35분에 안녕하세요 뒤에 '! 반갑습니다'를 추가했구나.... 이런 식으로 변경사항을 기억해서

9시 21분 초기 버전을 불러 올 수도, 9시 35분 수정 버전을 불러 올 수도 있게 만드는 도구라 생각하면 된다.

코드는 계속해서 바뀌기 때문에 버그가 발생했을 때 어떤 변경사항을 기점으로 문제가 발생했는지 추적할 수 있는 도구가 필요하다.

Git이 이를 도와준다고 이해하면 된다.

 

Git 설치가 완료되었다면, 아래 명령어를 입력해 정상적으로 설치되었는지 확인하자.

git -v

# 결과 예시 : git version 2.41.0.windows.3

 

3. Node.js 설치

 

Node.js는 자바스크립트를 브라우저 외부에서 돌아갈 수 있게 만들어주는 플랫폼이다.

프론트엔드는 브라우저에서 돌아가는 웹 애플리케이션을 개발하는데,

왜 브라우저 외부에서 자바스크립트를 동작하게 하는 Node.js를 설치해야할까?

 

먼저, 자바스크립트 개발을 브라우저와 독립적으로 하기 위해서이다.

Node.js 이전 과거에는 자바스크립트는 브라우저에 종속적인 언어였다.

브라우저 외부에서 자바스크립트 코드를 돌려볼 수 없었고, JS 파일을 작성하고 결과값을 브라우저를 통해 확인해야만 했다.

그러나 Node.js와 함께라면 브라우저 없이도 JS를 실행해 결과를 볼 수 있게 된다.

브라우저와 분리하여 개발이 가능해진다는 것이다.

이러한 분리는 브라우저와 개발 환경 간의 괴리를 극복하는데도 도움이 된다.

자바스크립트는 계속해서 최신 스펙이 추가되는 반면에 브라우저의 지원은 이보다 느리다.

때문에 무작정 개발하고 이를 곧바로 브라우저에 적용한다면 웹 애플리케이션이 동작하지 않을 수 있다.

이를 위해서는 최신 버전의 스펙을 구 버전의 스펙으로 변환하는 Babel과 같은 도구의 도움이 필요한데

이런 도구들 역시 Node.js로 구현되어 있기 때문이다.

 

둘째로, npm의 사용이다.

npm은 자바스크립트 언어를 위한 패키지 관리자이다. 

위에서 말했듯 웹 애플리케이션은 개발과 배포 간의 괴리를 극복하기 위해 다양한 도구(패키지)를 사용하여 이를 해결한다.

이 외에도 개발을 쉽게 만들어주거나 도와주는 라이브러리들을 사용하여 개발을 진행하는데

이런 패키지들을 모아두고 관리해주는 것이 npm이라는 패키지 관리자이다.

npm은 Node.js를 설치하면 자동으로 설치된다.

 

node.js의 설치가 끝나면 아래 명령어를 입력해 정상 설치 되었는지 확인하자.

node -v

# 결과 예시 : v18.17.0

npm -v

# 결과 예시 : 9.6.7

 

이렇게 프론트엔드 개발 환경 기초 설정이 끝났다.

이제 이 위에 React나 Next를 얹고 개발을 시작하면 된다.

원래 ESLint, Prettier, Git Graph, htmltagwrap 플러그인들까지 다루려 했으나 

node.js에서 갑자기 ESLint로 가는 게 이상해서 따로 적으려 뺐다.

그래서 나온 극 기초 설정글..........정리해서 나쁠 거 없잖아...