하수도키의 성장일기

개발일기/VSCode

[VSCode] 확장 프로그램 추천 - Toggle JS & TS inlayHints (타입 체크 가능 마우스 움직이는 시간 단축 가능)

VSCode에서 JetBrains IDE의 InlayHints 기능을 사용할 수 있습니다. 이 기능을 알기 전에는 그 용어도 몰랐고, 웹스톰과 인텔리제이에서 이 기능을 보면서 “와, 타입이 나오네, 부럽다…“라고 생각만 했습니다. 정확히 어떻게 알게 되었는지는 기억나지 않지만, 유튜브 영상을 보다가 알게 되었을지도 모릅니다. 어쨌든 이 기능을 알게 되어 기쁩니다. 생각해 보니 현재는 사용하고 있지 않지만, 코드량이 많아지면서 익숙하지 않아 빨리 껐던 것 같습니다. 이번에 다시 사용해보려고 합니다.  Toggle JS & TS inlayHints 설치 방법Toggle JS & TS inlayHints 확장 프로그램을 설치합니다.InlayHints로 검색하면 여러 확장 프로그램이 나오는데, Javascrip..

개발일기/VSCode

[VSCode] 기초 살펴보기 #1 - 기본 단축키(필수 단축키)

VSCode(Visual Studio Code) 단축키 살펴보기 #1 (기본 단축키) VSCode란?VSCode는 마이크로소프트에서 개발한 소스 코드 편집기이다. 오픈소스이며, 무료로 사용할 수 있다. VSCode는 Windows, macOS, 리눅스 용으로 제공된다. 또한, 다양한 언어를 지원하며, 확장 기능을 통해 다양한 기능을 추가할 수 있다.VSCode 설치하기VSCode 다운로드VSCode 실행 후 나오는 화면에 단축키 살펴보기VSCode를 설치하고 실행하면 다음과 같은 화면이 나타난다.여기서 보이는 단축키를 살펴보자. 첫 화면에서 보이는 단축키이므로 가장 중요하고 많이 사용하는 단축키들이니 꼭 숙지하자.VSCode를 설치하고 실행하면 다음과 같은 화면이 나타난다.여기서 보이는 단축키를 살펴보자..

개발일기/Vue.js

[Vue.js] Vue CLI 설치 및 세팅

Vue CLI 설치 및 세팅 Vue CLI 설치 하기 - 글로벌(전역)으로 설치하여 어느 곳에서든지 Vue CLI사용할 수 있게 한다. - 터미널 또는 CMD에서 아래와 같이 명령어를 입력한다. npm i -g @vue/cli Vue project 생성하기 - vue create project명으로 Vue CLI를 이용해 프로젝트를 생성한다. vue create playground - 터미널에서 여러가지 옵션을 선택해야 되는데 아래 스크린샷과 같이 설정한다. - 대략적으로 수동으로 옵션 선택, ESLint, Linter, Router, Babel, Prettier, NPM 사용한다는 내용이다. Vue Project 실행하기 - 설치된 폴더로 이동 후 프로젝트를 실행한다. cd playground npm ..