[Vue3.js] Vue3+nodejs+mariadb로 게시판 만들기(4) - VSCode 확장 프로그램 설치 및 기타 설정

원래 이번 포스팅부터 서버 환경 구성을 진행하려고 했으나, 먼저 진행해야 할 것이 생각나서 하나 더 포스팅을 한다.

 

이번 포스팅에서 진행할 것은 아래 내용이므로, 필요 없는 사람은 다음 포스팅으로 넘어가도 된다.

 

1. prettier 설치 및 적용

2. typescript 적용

3. VSCode 확장 vuetify 설치

 

 

prettier 설치 및 적용

먼저, VSCode 마켓플레이스에 prettier를 검색 후 설치한다.

 

 

프로젝트에도 prettier를 설치하기 위해 터미널에 아래 명령어를 입력한다.

 

npm i -D prettier

 

그리고 아래 단계를 수행한다.

 

1. 프로젝트 Root 폴더에 .prettierrc.js 파일을 생성한 후 아래 코드를 입력한다.

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
}

 

2. VSCode 파일 > 기본 설정 > 설정(또는 Ctrl + ,)을 열어서 우측 상단에 있는 아이콘을 클릭한다.

 

 

3. 2번의 아이콘을 눌러서 settings.json 파일이 열리면 아래 코드를 입력한다.

 

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true
}

 

저장했을 때 prettierrc.js에서 설정한 대로 자동 적용이 된다면 설정이 된 것이다.

 

 

 

typescript 적용

이미 typescript는 설치 및 세팅이 완료되었지만, 실제 내가 코딩을 할 때 전혀 사용하지 않았기 때문에 적용을 하려고 한다.

 

BoardList.vue 소스 파일을 열어서 아래와 같이 코드를 수정한다.

 

[변경 전]
const list = [
    { id: 1, title: '첫 번째 게시글', writer: 'artistjay' },
    { id: 2, title: '두 번째 게시글', writer: 'artistjay' },
    { id: 3, title: '세 번째 게시글', writer: 'artistjay' },
    { id: 4, title: '네 번째 게시글', writer: 'artistjay' },
    { id: 5, title: '다섯 번째 게시글', writer: 'artistjay' },
    { id: 6, title: '여섯 번째 게시글', writer: 'artistjay' },
]

[변경 후]
interface BoardList {
    id: string,
    title: string,
    writer: 'artistjay' | 'artist'
}

const list: BoardList[] = [
    { id: 1, title: '첫 번째 게시글', writer: 'dartistjay' },
    { id: 2, title: '두 번째 게시글', writer: 'artistjay' },
    { id: 3, title: '세 번째 게시글', writer: 'artistjay' },
    { id: 4, title: '네 번째 게시글', writer: 'artistjay' },
    { id: 5, title: '다섯 번째 게시글', writer: 'artistjay' },
    { id: 6, title: '여섯 번째 게시글', writer: 'artistjay' },
]

 

그런데 뭔가 이상하다?

 

분명 위 소스코드는 에러가 나야 하는데 에러가 나지 않는다.

혹시 typescript가 제대로 적용이 안되었는지 BoardList.ts 파일을 따로 생성해서 위 코드를 복붙 해보면 분명 에러가 발생하고 있다. id는 string type인데 number가 들어가 있으니..

 

혹시 짐작 가는 원인을 아시는 분은 댓글로 가르침을 부탁드리겠습니다..

단순히 아래 코드도 컴파일 에러가 안 나고 console.log가 정상적으로 찍힙니다.

 

let x: string
x = 1
console.log(x)

 

 

vuetify 확장 기능 설치

이건 Vuetify를 쉽게 사용하기 위해 도움을 주는 기능이다.

아래처럼 v만 입력해도 관련 컴포넌트들이 나온다. 이클립스에서 Ctrl + Space 같은 기능

 

 

 

그럼, 다음 포스팅부터는 서버 환경 구성을 해보도록 하겠다.