Development2015.05.07 17:00

빌드 2015 컨퍼런스에서 발표된 비주얼 스튜디오 코드(Visual Studio Code)는 크로스 플랫폼을 지향하는 텍스트 중심의 개발도구입니다. 마이크로소프트가 적극적으로 다른 플랫폼에 대해서 공략을 시작했다는 평을 받으며 많은 사람들이 환호하고 있는 툴이기도 합니다. 맥에서 강력한 인텔리센스(Intellisense) 기능을 이용할 수 있어서 화제입니다만 맥에서 인텔리센스를 구동시키는게 생각보다 쉽지 않더군요 (저만 그런 것일수도...)


여기저기 찾아보고 시행착오를 겪은 끝에 인텔리센스를 활용할 수 있는 방법을 찾아냈고 (사실 원래 있었지만 저만 못찾아냈던...) 같은 시행착오를 겪는 분이 계실것 같아서 간단하게 설치 순서와 필요한 패키지들을 정리해 봤습니다. 비주얼 스튜디오 코드 공식 웹사이트에 잘 설명되어 있는 부분입니다만 영어의 압박으로 꼼꼼히 읽지 않으면 놓치기 쉬운 부분들이 많더군요. 잘 안되시는 분들은 아래의 순서를 따라해 보시기 바랍니다.


  1. "비주얼 스튜디오 코드" 맥 버전을 설치합니다
    • 설치라고 되어 있긴 합니다만 공식 사이트에서 배포하는 zip 파일을 받는게 전부입니다.
      • 비주얼 스튜디오 코드 다운로드 : https://code.visualstudio.com/
    • 압축을 풀면 나오는 비주얼 스튜디오 코드 실행파일을 어플리케이션 폴더로 끌어놓아 런치패드를 통해 실행 가능하게 만들면 좋겠죠
    • 혹시나 터미널을 자주 쓴다면 .bashrc 파일이나 .bash_profile 에 아래의 스크립트를 넣으면 편리합니다
      • code () {
            if [[ $# = 0 ]]
            then
                open -a "Visual Studio Code"
            else
                [[ $1 = /* ]] && F="$1" || F="$PWD/${1#./}"
                open -a "Visual Studio Code" --args "$F"
            fi
        }

  2. 인텔리센스를 위해 TypeScript Definition Manager 를 설치합니다
    • 비주얼 스튜디오 코드는 TypeScript 가 사용하는 *.d.ts 파일을 이용하여 인텔리센스를 제공합니다
    • 이미 만들어진 *.d.ts 파일을 이용하기 위하여 TypeScript Definition Manager 를 설치해야 합니다
      • TSD 설치 안내 페이지 : http://definitelytyped.org/tsd/
      • TSD 설치를 하기 위해서는 node 가 먼저 설치되어 있어야 합니다 (npm을 이용...)
      • $ npm install tsd -g


  3. TSD를 이용하여 필요한 언어/모듈/패키지를 검색하여 설치합니다
    • TSD 의 Query 명령어를 이용하여 필요한 패키지를 조회합니다 (node.js 에 대한 조회)
      • $ tsd query node
        >> tsd 0.5.7
        VersionMatcher.filter; gt; 0.11.0; 0.10.0
         - node/node.d.ts : <head> : 2015-05-07 05:06
        
    • 조회한 패키지의 이름을 이용하여 설치 명령을 내립니다 (--action install 을 추가)
      • $ tsd query node --action install >> tsd 0.5.7 VersionMatcher.filter; gt; 0.11.0; 0.10.0 - node/node.d.ts : <head> : 2015-05-07 05:06 >> running install.. >> written 1 file: - node/node.d.ts


  4. 설치가 잘 되었는지 확인해 봅니다
    • 사용자 루트 경로에서 "typing" 이라는 폴더가 생성되었는지 확인합니다
    • 해당 폴더 안에 "node" 라는 폴더가 있는지 보고, 그 안에 "node.d.ts" 파일이 존재하는지 확인합니다
    • Node Express Generator (참고 : https://code.visualstudio.com/Docs/nodejs) 로 만든 스캐폴딩 프로젝트의 app.js 를 엽니다
    • 14 라인의 __dirname 이라는 node 시스템 변수가 인식되지 않고 있습니다만... "커맨드+점(.)"을 눌러 Reference 를 추가해 줍니다
    • 코드 상단에 Reference 태그가 추가됩니다
    • 이후 테스를 위해 http 모듈을 추가하고 인텔리센스가 동작하는지 봅니다. 잘 되는군요.

좀 돌아왔습니다만 이제 TSD 파일만 잘 설치하면 왠만한 코드는 정말 간편하게 만들 수 있을 것 같습니다. 비주얼 스튜디오 코드로 맥에서도 훌륭한 인텔리센스와 가벼운 에디터를 사용해 보시기 바랍니다!





저작자 표시 비영리
신고
Posted by 노피디
Cloud & Dev. Story2015.04.28 10:00

미국시간으로 4월 29일 부터 3일간 샌프란시스코에서 마이크로소프트의 개발자 컨퍼런스인 빌드(Build) 2015가 개최됩니다. 예년의 행사가 그러했듯 이번 행사도 다양한 주제로 마이크로소프트의 기술을 비롯하여 업계의 동향을 알아볼 수 있는 알찬 세션들이 준비된 것 같습니다. 직접 현장에서 참석하지 못하는 아쉬움은 채널9 등 여러 채널을 통해서 달래야 할 것 같습니다. 너무 많은 주제가 다루어지기 때문에 무턱대고 세션 제목만 보고 뛰어들기 보다는 마이크로소프트가 가이드하는 난이도에 따라 세션을 선택하면 좋을 것 같습니다.





워낙 다양한 주제가 다루어지기 때문에 어떤 특정한 주제가 핵심이다라고 말하긴 힘들겠습니다만 여러 사업들 중에서 가장 순항을 하고 있는 애져(Azure)와 곧 출시될 윈도10(Windows 10)이 많은 주제들의 중심에 서 있는 건 확실해 보입니다. 두가지 주제가 아무래도 개발자들이나 IT 종사자들 사이에서 가장 관심있는 주제가 될 수 밖에 없나 봅니다. 마이크로소프트 입장에서도 강한 녀석들이 더 강해질 수 있도록 지원사격 하는 것이 당연한 이치일 것이겠구요!



한편 너무 많은 세션들을 어떻게 골라서 들어야 할지 모르겠다 싶으시다면 빌드 모바일 앱을 이용해서 알람도 미리 받고 스케쥴링도 해보시면 도움이 많이 된다고 합니다. 저도 아직 써보지는 않았지만 빌드 컨퍼런스 참여하는 분들에서부터 원격으로 듣는 분들까지 스케쥴링을 위해서는 필수적으로 쓰면 좋은 앱이라고 하니 한번 이용해 보시기 바랍니다!


채널9에서 빌드 컨퍼런스 일정 등 자세히 살펴보기 [바로가기]

빌드 2015 공식 웹사이트 [바로가기]

빌드 공식 모바일 앱 다운로드 [바로가기]



저작자 표시 비영리
신고
Posted by 노피디

티스토리 툴바