텍스트 에디터 설치하기

웹 개발자가 되기 위해서는 웹사이트는 텍스트이기 때문에, 텍스트 에디터가 필요합니다.

사실 메모장에도 텍스트니깐 코딩을 할 수 있지만, 
예를 들어, 작성하면 자동으로 색상을 바꿔준다거나, 실수를 하면 알려주는 그런, 코딩을 도와주는 에디터가 필요합니다.

그래서 이번 시간에는 코딩을 위한 에디터에 대해 알려드리도록 하겠습니다.

처음에는 atom을 사용했습니다. 

 

atom 메인페이지

 

html, css로 만들어진 것 같고, 깃헙이 만들기도 한, atom은 꽤나 괜찮은 에디터라서 많이 추천 되었습니다. 

하지만 VCS, Visual Studio Code로 갈아 탔고, 아주 만족하고 있습니다.

 

Visual Studio Code 메인페이지

 

Visual Studio Code는 서브라임, 브라켓이라는 에디터도 있고(에디터 종류가 많고),
이러한 에디터들을 VSC(Visual Studio Code)가 지금 다 통일해 버렸기 때문에, 아주 강력하게 다운로드 받기를 추천합니다.

리눅스, 윈도우, 맥에서 다운로드 가능합니다.

그럼 이제 다운로드를 해 보도록 하겠습니다.

 

 

본인이 사용하는 컴퓨터 사양에 맞게 stable 다운로드를 합니다

다운로드가 끝나면 파일을 열어 실행을 해 줍니다

 

 

실행을 누르면, 뜨는 창에서 계약에 동의함을 누르고 다음을 클릭합니다

 

 

Visual Studio code가 설치될 수 있는 폴더를 설정한 후에, 다음을 클릭합니다

 

 

시작 메뉴 폴더 설치 여부를 선택 후, 다음을 클릭합니다

 

 

본인에게 더 필요한 작업선택사항이 있으면 선택 후 다음으로 넘기면 됩니다.

 

 

Code을(를) 지원되는 파일 형식에 대한 편집기로 등록합니다. 를 체크하면, 
소스코드를 클릭할 때마다, Visual Studio Code가 실행됩니다.

마지막으로 설치버튼만 눌러 주면, 설치과정이 모두 끝나게 됩니다.

 

 

 

다운로드를 다 받았다면, Visual Studio Code에 대해 간략하게 어떻게 사용되는지에 대해 알려 드리겠습니다.

 

Visual Studio Code welcome페이지

 

Visual Studio Code가 처음 실행되면, Welcome창이 제일 먼저 뜹니다

 

 

가장 왼쪽, 사이드바에 있는 Explorer를 누르면, 왼쪽에 창이 하나 생깁니다
여기에는 파일들이 정렬될 것입니다.

그리고 위쪽, 메뉴바에 있는 File에서 New File을 클릭하면, 오른편에 코드를 입력할 창이 뜹니다

 

 

그럼 이번에는 가장 왼쪽에 사이드 바에 있는 extentions를 클릭하여, prettier를 검색해서 설치해 보도록 하겠습니다. 

 

 

extention에서 우리는 부가적으로 필요한 것들을 설치할 수 있습니다

prettier은 말 그대로 코드를 예쁘게 만들어 줍니다.
자동으로 코드를 예쁘게 만들어주기 때문에, 시간을 아껴줄 수 있습니다.

마지막으로 설치할 것은 extentions에서 material theme입니다

 

 

material theme도 코드를 예쁘게 해 주고, 색상 변경도 가능하며, 여러가지 테마 중 선택하여 설정이 가능하게 합니다.