윈도우에 만드는 리눅스 개발 환경; 4. VSCode 설치 후 리눅스 연결

윈도우에 만드는 리눅스 개발 환경 목차

1. 우분투 리눅스 설치 (윈도우 10)

2. 윈도우에 Docker 설치

3. 설치속도 개선 후 node.js 설치

4. VSCode 설치 후 리눅스 연결

5. Docker로 MySQL시작하기

6. Docker로 MongoDB 시작하기

7. 윈도우 11에 우분투 설치

8. Docker로 PostgreSQL 시작하기

VSCode는 최근 node.js개발자들이 가장 선호하는 에디터일 것이다. 프로그램을 작성하는 기본 에디터 기능에 여러 가지 extension을 추가하면 마이크로소프트나 Jetbrains에서 판매하는 IDE 못지않은 기능을 제공한다. VSCode의 많은 extension들이 마이크로소프트 직원에 의해 개발되고 제공되고 있는데, 이 때문에 안정된 품질을 만들 수 있었고, VSCode가 빠르게 사용자를 넓이고 있는 듯하다.

1.  VSCode 설치하기

• 먼저 VSCode download사이트에서 설치파일을 다운로드한다.

Download Visual Studio Code - Mac, Linux, Windows

설치파일을 실행하고 라이센스에 동의하고 다음으로 넘어가면, 추가 작업 선택 화면이 나타나는데 탐색기의 폴더나 파일에서 오른쪽 마우스를 눌렀을 때 VSCode로 쉽게 열 수 있도록 해주는 옵션들이 있다. 개인적으로는 탐색기에서 바로 여는 방법도 유용하게 쓰고 있기 때문에 이 옵션들을 모두 선택했다. 맨 아래 "PATH에 추가"를 선택하면 cmd에서도 현재 위위치에서 VSCode를 "code ."명령으로 실행하여 개발을 시작할 수 있다.

 

2. VSCode 사용하기 

• Command Palette

VSCode를 설치하고 나면 가장 많이 사용하는 단축키가 Command Palette인데 Ctrl + Shift + P 키를 누르면 나타난다. 알기 쉽게 문장으로 되어 있는 명령이 많고, 검색이 가능하며, 최근에 사용한 기능 순으로 먼저 보여 주는 등 편리한 기능이 많아 많은 개발자들은 메뉴에서 찾기보다는 이 기능을  사용한다. VSCode가 나오기 전 Sublime에서 사용하던 방식인데 너무 편리해서 VSCode가 개발되면서 그대로 가져온 것 같다. 이 곳을 통해 VSCode 메뉴의 모든 기능을 사용할 수 도 있고, Extension을 설치하고 설치된 Extension의 모든 기능을 사용할 수 도 있다. 

 

Command Palette 창: Ctrl + Shift + P

• GitHub 연결

VSCode에서 작성한 프로그램은 안전하게 저장하고 팀원들과 공유하기 위해서 가장 많이 사용하는 방법은 Git이다. Git저장소를 무료로 제공하는 가장 많이 사용하는 서비스가 GitHub인데, VSCode와 GitHub을 연결하는 방법은 다음 글에서 자세히 설명하려고 한다.

개발 소스코드 관리; 4. Github 사용하기 - 2) VScode 연결, 해제

• 단축키

에디터와 관련된 기본적인 단축키들은 이미 표준화된 윈도운 마이크소프트의 단축키들과 동일하기 때문에 별 어려움 없이 바로 사용할 수 있고, Command Palette (Ctrl + Shift + P) 나 메뉴 옆에도 단축키가 표시되어 있기 때문에 반복적으로 기능을 사용해야 할 경우 단축키를 사용하면 좋다. VSCode의 단축키를 한눈에 보고 싶으면 아래 링크를 참고하면 된다.

단축키 - Visual Studio Code tutorial

3. Extension설치하기

VSCode자체로도 좋은 도구이지만, 몇몇 Extension을 추가하면 개발할 때 많은 도움이 된다.

 

• WSL

WSL환경에서 개발한다면 꼭 필요한 extension이다. WSL을 설치하고 Ctrl-Shift + P를 누른 다음 WSL : New WSL Windows 또는 WSL: New WSL Windows Using Distro를 선택하면 우분투를 개발 환경으로 사용할 수 있다.

 

만일 WSL : New WSL WIndows를 선택했을 때 새로운 VSCode를 여는 것에 문제가 있다면, 왼쪽 아이콘 목록에서 모니터처럼 생긴 Remote Explorer를 선택하고 default distro를 확인해 보면 우분투가 아닌 다른 distro (주로 docker)로 설정되어 있을 것이다. default distro를 우분투로 하면 정상적으로 동작한다.

 

WSL을 사용해서 VSCode를 열게 되면 Terminal을 실행시켰을 때도 우분투 쉘이 실행되기 때문에 더욱 편리하다.

 

 

• ES7+ React/Redux/React-Native snippets

VSCode에서 이것을 쓰고부터 정말 많은 타이핑 시간을 줄였다. 예를 들어, 에디터에 rafc입력하고 (조금 기다려야 메뉴가 나오긴 한다.) 엔터를 치면 한 번에 React Arrow Function Component를 한 번에 만들 수 있으니 얼마나 시간이 절약되겠는가. 대부분의 snippet은 영문 첫 자로 구성이 되어 있어 외우기 어렵지 않으나, 그래도 외우는 것은 불필요하니 필요할 때마다 Ctrl + Alt + R을 누르고 필요한 것을 찾아보면 된다. 타이핑을 줄여주는 몇 가지만 살펴보면,

 

• nfn (Named FuNction)

const first = (second) => { third }

 

• rafce (React Arrow Function Component with Export)

import React from 'react'

const Comp = () => {
  return (
    <div>Comp</div>
  )
}

export default Comp

 

일반 function을 선호하면

 

• rcfe (React Function Component with Export)

import React from 'react'

function Comp() {
  return (
    <div>Comp</div>
  )
}

export default Comp

 

• rfcredux (React Function Component with connected Redux)

import React from 'react'
import { connect } from 'react-redux'

export const Comp = (props) => {
  return (
    <div>Comp</div>
  )
}

const mapStateToProps = (state) => ({})

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(Comp)

 

typescript으로 만들고 싶으면 앞에 ts를 추가하면 된다.

 

• tsrafce (TypeScript React Arrow Function Component with Export)

import React from 'react'

type Props = {}

const Comp = (props: Props) => {
  return (
    <div>Comp</div>
  )
}

export default Comp

 

이외에도 많은 snippet이 있지만, 이 정도 사용만으로도 타이핑을 줄이고 개발 시간도 단축할 수 있을 것이다.

 

• Prettier

VSCode로 프로그램 짜면서 매우 귀찮은 일 중에 하나가, 예쁘게 줄 맞추기, 칸 맞추기, 명령어 사이 띄어쓰기, 마지막에 세미콜론 찍기 등 코드를 읽기 쉽게 규격에 맞춰 작성하는 것이다. 이 귀찮은 작업이 Prettier를 쓰면 많이 줄어든다. 이제,  줄은 대충 맞추고 마지막에 Ctrl + Shift + F를 눌러 한 번에 정렬하자. 이것도 귀찮으면 extension setting에서 저장할 때 자동으로 맞추도록 설정하면 된다.

 

• Auto Rename Tag

HTML이나, JSX Tag를 바꾸면 쌍으로 묶인 부분 (주로 Closing Tag)를 같이 바꿔야 하는데 이 번거로운 작업을 Auto Rename Tag가 해 준다. 불행히도 내가 만든 컴포넌트를 Auto Complete을 할 때는 잘 되지 않기 때문에 좀 불편하다. 그래도 VSCode에서 JSX를 수정할 때 scroll 하면서 Tag를 찾는 수고가 많이 줄어든다.

 

• ESLint

정적 코드 분석기 (Static Code Analyzer)인 ESLint의 결과를 VSCode의 에디터 화면에 표시하여 개발자가 문법적 오류를 사전에 발견할 수 있도록 해주는 extension이다. ESLint를 사용하는 것은 프레임워크에 따라 호불하가 갈리긴 하지만 타이핑하면서 실수하는 많은 오류를 빨리 찾아준다.

 

사용하기 위해서는 먼저 eslint를 npm으로 설치해 준다. 이 또한 프로젝트마다 다시 사용하는 모듈이다 보니 -g옵션으로 설치한다.

 

npm i -g eslint

 

이제 ESlint extension을 실행하면 create-react-app으로 만든 프로젝트의 경우, 제일 먼저 react을 import 하지 않았다고 경고를 한다. react release 17부터 필요 없어졌지만 기본으로 설치된 eslint는 에러로 간주한다. import가 있는 행으로 가서 imr을 입력하면 앞에서 설치한 snippet 덕을 볼 수 있다.

 

다음에는 개발에 필요한 몇 가지 데이터베이스를 docker를 이용해 만들어 보겠다.