ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 2장. 개발 환경 설정 및 첫 번째 프로젝트
      개발 공부/Do it! Vue.js 입문 2025. 5. 19. 09:00
      반응형



       

      2장

       

       

       

      02-1 뷰 학습을 위한 개발 환경 설정하기

      • 뷰로 웹 앱을 개발하기 위한 환경을 구성해보자. 우선 다음과 같은 도구들을 설치한다.
        • 크롬(Chrome) 브라우저
        • 텍스트 에디터나 통합개발환경(IDE, Intergrated Development Environment) - Atom, vscode....
        • Node.js
        • 뷰 개발자 도구(Vue.js devtools, 크롬 확장 플러그인)

       

      <크롬 브라우저 설치하기>

      • 뷰로 화면 개발을 하려면 첫 번째로 구성해야 할 환경이 바로 브라우저이다.
      • 구글에서 개발한 크롬 브라우저는 최신 웹 트렌드와 문법을 빠르게 반영하고 있는 브라우저이며, 웹 개발 시 편리한 기능을 제공하는 크롬 개발자 도구를 지원한다.
      • 크롬 브라우저 공식 사이트
       

      Chrome 웹브라우저

      더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게.

      www.google.com

       

      <텍스트 에디터 또는 IDE 설치하기>

      • 만약 기존에 사용하던 텍스트 에디터나 IDE가 있다면 그걸 사용하여도 된다.
      • 나는 Microsoft에서 개발한 오픈 소스 기반의 Visual Studio Code(vscode)를 기존 사용하고 있어서 그대로 사용할 것이다.
       

      Visual Studio Code - Code Editing. Redefined

      Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

      code.visualstudio.com

      • 책에서는 깃허브에서 제작한 무료 텍스트 에디터인 아톰(Atom)을 사용한다.
       

      A hackable text editor for the 21st Century

      At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.

      atom.io

       

      • 각 에디터에 맞는 플러그인이나 패키지를 설치한다.
        • vscode의 경우
          • Vetur 플러그인 설치 - Linting, Syntax-highlighting, Formatting 등을 지원한다.
          • Vue Peek 플러그인 설치 - 코드상에 작성되어 있는 Vue 컴포넌트를 통해 해당 컴포넌트 파일을 열고 그 파일로 이동할 수 있는 기능을 제공한다.
          • Vue 2 Snippets 플러그인 설치 - Vue 컴포넌트 작성시 수기로 작성해줘야 할 부분에 대한 자동완성을 제공한다.
        • Atom의 경우
          • language-vue 패키지 설치

       

      <Node.js 설치하기>

      • Node.js는 서버 사이드 자바스크립트로, 서버 측에서 실행되는 자바스크립트 실행 환경을 의미한다.
      • 5장 뷰 프로젝트 구성 방법에서 뷰 CLI(Command Line Interface)를 이용하여 쉽게 뷰 프로젝트를 구성하려면 Node.js가 설치되어 있어야 한다.
        • CLI : 커맨드 라인 명령어. 윈도우의 명령 프롬프트 창과 맥의 터미널 등, 명령어로 특정 동작을 수행할 수 있는 콘솔창을 의미한다.
      • Node.js 공식 사이트
       

      Node.js

      Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

      nodejs.org

      • 설치후 윈도우의 명령 프롬프트(cmd)나 맥의 터미널(Terminal)에서 아래의 명령어를 실행한다.
      node -v
      • Node.js의 버전이 표시되면 정상적으로 표시된 것이다.

       

      <뷰 개발자 도구 설치하기>

       

      Vue.js devtools

      Browser DevTools extension for debugging Vue.js applications.

      chrome.google.com

       

       

      02-2 Hello Vue.js! 프로젝트 만들기

      <뷰 시작하기>

      • 개발 환경을 구성하였으니 뷰를 사용하여 간단한 메시지를 출력해보자.
      • 일단 첫 번째 프로젝트의 작업 순서는 아래와 같다.

      첫 번째 프로젝트 작업 순서

       

      • 먼저 편한 폴더 위치에 index.html 파일을 생성하고 아래와 같은 코드를 작성한다.
      <!-- index.html -->
<html>
    <head>
        <title>Vue Sample</title>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue.js!'
                }
            });
        </script>
    </body>
</html>
      • 위 코드는 html 기본 구조에 <div> 태그를 하나 추가하고, 뷰 라이브러리를 로딩한 후 뷰로 Hello Vue.js!라는 간단한 메시지를 출력하는 코드이다.
      • 뷰 인스턴스( new Vue ({ }); )를 만들고 인스턴스에 정의된 데이터 객체( data : { } )의 메시지(massage) 프로퍼티(property)를 화면에 출력한다. 아직은 이해가 안되어도 넘어가라.
      • index.html 파일을 더블 클릭해서 실행하면 브라우저 창에서 작성된 메시지를 확인할 수 있다.

       

      <크롬 개발자 도구로 코드 확인하기>

      • 윈도우의 경우 크롬 브라우저에서 [F12]버튼을 눌러 개발자 도구 창을 띄운다.
      • 그리고 콘솔 탭에서 아래와 같은 로그 2개를 확인한다.

      뷰 크롬 익스텐션을 다운로드하라는 로그
      현재 개발자 모드에서 뷰를 실행하고 있으니 상용화된 서비스를 하는 경우에는 상용화 모드로 전환하라는 로그

      • 위 로그를 통해 뷰 라이브러리가 정상적으로 로딩이 되었고, 현재 개발자 모드로 뷰가 실행되고 있다는 것도 파악하였다.

       

      <뷰 개발자 도구로 코드 확인하기>

      • 뷰 개발자 도구는 컴포넌트로 구성된 애플리케이션의 구조를 한눈에 확인할 수 있다. 그리고 각 컴포넌트별로 정의된 속성의 변화를 실시간으로 확인할 수 있어 뷰로 제작한 웹 앱을 분석하거나 디버깅할 때 유용하게 사용할 수 있다.
      • 첫 번째 로그 해결 방법
        • 앞에 나온 로그 중 첫 번째 로그는 이미 앞에서 뷰 개발자 도구를 설치한 사용자에게도 표시된다.
        • 왜냐하면 예제를 서버에 띄운 것이 아니라 파일 시스템에서 접근하여 브라우저로 실행했기 때문이다.
        • 이 문제를 해결하기 위해서는 크롬 확장 플러그인 설정을 변경해야 한다.
          • 오른쪽 상단 점 3개 버튼 -> 도구 더보기 -> 확장프로그램 -> Vue.js devtools의 세부정보 -> 파일 URL에 대한 엑세스 허용으로 전환
        • 그 후 페이지를 새로고침하면 첫 번째 로그가 사라진다.

       

      <뷰 개발자 도구 사용 방법>

      • 크롬 개발자 도구를 열고 'Vue'탭을 열면, 페이지 가운데에 보이는 <Root>가 보인다. <Root>를 클릭하면 왼쪽에 루트 컴포넌트에 대한 상세 내용이 표시된다.
      • 여기서 루트 컴포넌트란 뷰 애플리케이션을 실행할 때 가장 근간이 되는 컴포넌트이자 최상위 컴포넌트를 의미한다
      • 즉, 화면상의 'Hello Vue.js!' 텍스트는 최상위 컴포넌트의 data 속성인 message의 값이다.

       

       

       

      해당 글은 [Do it! Vue.js 입문] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

       

       

       

       

      반응형

      '개발 공부 > Do it! Vue.js 입문' 카테고리의 다른 글

      3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 2  (1) 2025.05.21
      3장. 화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트 - 1  (0) 2025.05.20
      1장. Vue.js 소개  (2) 2025.05.18

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바