S급 프론트엔드 개발자로 회귀하다 002화. 웹프론트엔드, 시작은 개발 환경 설정부터

구글 신이 말했다.

`VSCode를 까시오`

 

vscode를 검색하여 공식 홈페이지에서 Stable 버전 Installer를 다운로드 받았다.

 

설치를 한 후, vscode를 실행하니 빈 윈도우가 하나 열렸다.. 이제 무엇을 해야하나 보니

 

다시 구글 신께서 말하시길

`확장 프로그램들을 깔아라,

그 목록은 아래와 같다.

- ESLint

- Error Lens

- Live Server

- Prettier

돈이 많다면, GitHub Copilot을 깔아라`

 

구글신이 알려준 확장 프로그램들을 하나씩 검색해보니, 다음과 같은 정보들을 담고 있었다.

- ESLint : JS코드의 문법 검사와 코딩 스타일을 검사하여 잘못된 정보를 표시해준다.

- Prettier : ESLint가 검사를 해준다면, Prettier는 잘못된 코드나 포멧을 자동으로 고쳐준다.

- Live Server : 로컬 PC에 내 주소로 포트를 하나 뚫어서 개발중인 html 파일을 쉽게 열어볼 수 있도록 해준다.

- Error Lens : 코드가 왜 잘못 되었는지 자세히 설명해준다.(코드 옆에 하이라이트로)

 

이 모든것을 다 설치한 후, D:JavaScriptProjects\Practice 라는 폴더를 하나 만든 후, VSCode에서 열어주었다.

간단하게 index.html, index.js 파일 두개를 만들어 주고, index.html 파일에서 Ctrl + Shift + P  >>  Live Server (Open) 을 선택해주니, 웹브라우저가 하나 뜨고 그 위에 index.html이 열려서 동작하기 시작하였다.

 

으음... JS 코드는 브라우저 위에서만 동작을 하는건가..?

 

`아니다`

구글신이 말했다.

`Node.js 를 사용하면 이것저것 다 만들 수 있다`

 

- 3화 보러 가기 -

https://ngost.tistory.com/125