Vue.js로 todolist만들기-(1) vue cli 설치, node.js설치, bootstrap연결하고 기본 구조 만들기

 

vue를 통해 기능하는 앱을 만들고 싶어 todolist 만들기를 시작하게 되었다. 바로 코드를 적으면 될줄 알았는데, 필요한 도구들이 있어서 설치하고, 인풋 입력창을 만드는것 까지 2시간 정도 걸린것 같다. 부트스트랩을 알아서 비교적 레이아웃은 빠르게 이해가 되었지만, 객체지향이라던가, 참조변수와 같은 내용들은 하나하나 내용을 찾아보면서 하니 시간이 걸렸다. 단순한 todolist가 아니라 디자인도 잘되어있는 기능으로 만들고 싶다. 기본을 만들어서 디벨롭해보자!

 

---

Vue.js로 todolist만들기-(1) vue cli 설치, node.js설치, bootstrap연결하고 기본 구조 만들기

2021/05/15

 

1.설치하기

-Vue cli 홈페이지 https://cli.vuejs.org/guide/installation.html

-상단 메뉴에서 GUIDE > 좌측 메뉴애서 Installtaion을 보면 터미널을 통해 npm으로 설치가 가능하다.

 

 

npm install -g @vue/cli

 

-만약 os permission 문제가 있다 알림이 뜨면 아래의 코드를 입력해준다.

-os의 패스워드를 입력 후, 다시 npm 설치 코드를 입력하면 설치 한다.

-cli 4.5.13버전을 설치하였다.

 

sudo chown -R $USER /usr/local/lib/node_modules

 

1-1. Vue npm을 깔기 위해서는 node.js가 우선적으로 깔려 있어야 한다.

 

-node js 홈페이지 https://nodejs.org/en/

-최신버전의 pkg를 다운받아서 설치하면 된다.

 

 

1-2. 비쥬얼 코드에서 Vetur 확장 프로그램 설치

-vetur이라는 확장 프로그램을 설치해주어야 비쥬얼코드에서 깔끔하게 볼 수 있다.

 

2.파일 생성

-vue로 새로운 프로젝트를 생성 해준다.

-터미널에 아래와 같이 1)디렉토리 선택 2)vue파일 만들기를 입력해준다.

-설정 확인 후 enter를 눌러주면 자동으로 파일들이 생성 된다.

첫번째 입력 : cd Work/
두번째 입력 : vue create to do

 

 

-비쥬얼코드로 해당 파일을 열어서 항목들이 잘 설치되었는지 확인한다.

-파비콘을 넣을수 있는 폴더, 기본 inex 파일, scr안에 main.js파일, components에 예제코드와 hello world 기본 파일이 있다.

-package.js파일: 서버 - 로컬 웹서버를 돌림, 빌드 - 개발 완료후 서버에 올릴 스크립트, 린트 - 스크립트 문법 체크 해준다.

 

[TIP]로컬에서 홈페이지 확인하는 방법

-프로그램 내의 터미널을 오픈하여 아래 코드를 작성해준다.

-local에 나오는 서버를 크롬에 복사 붙여넣으면 된다.

-자동으로 코드 변환을 감지해서 리프레쉬 해준다.

npm run serve

 

 

 

 

3.부트스트랩 스타일 적용하기

 

-부트스트랩 홈페이지 https://getbootstrap.com/

-스타일 시트 적용을 위해 부트스트랩을 설치해준다.

-css 링크를 복사하여 index.html의 head태그 안에 넣어준다. (편의를 위해 head 태그 맨 아랫부분에 넣는다.)

 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

 

 

4.App.vue 파일 세팅하기

-기본 세팅 파일에서 사용할 코드를 제외하고 내부 내용은 삭제한다.

-App.vue에서 div 안의 내용 삭제 / script 삭제

-HelloWorld.vue 파일은 전체 삭제

 

 

5. App.vue에서 기본 코드 작성

-'container'이라는 div를 하나 만들고,

-안에 프로젝트의 제목을 적으면 화면에 출력 된다.

    <div class="container">
      <h1 class="text-container">Monthly todo</h1>
    </div>

 

5-1. 유저가 입력을 할 수 있는 인풋 창을 만들고, 입력한 데이터 보여주기

-유저가 인풋에서 데이터를 입력하고, 입력한 데이터를 앱내 노출 시켜주기 위해서

-스크립트에 새롭게 데이터=>보여주기=>유저가 입력한 인풋 내용을 넣는다.

  data(){
    return{
      userInput: ''
    };
  }

 

-유저가 값을 입력한 인풋창도 만들고, script 와 연결한다.

-인풋의 타입은 텍스트를 입력하는 인풋, 클래스는 부트스트랩에서 사용하고 있는 form-control, 뷰 중 userInput이랑 연결 시켜준다는 내용.

 <input type="text" class="form-control" v-model="userInput">

 

-취향에 따라 인풋의 크기도 조정할 수 있는데 해당 인풋의 크기를 div로 한번 감싸서, 부트스트립의 클래스를 활용한다.

-offset은 디바이스의 크기나, 인터넷 창의 크기에 따라 레이아웃이 자동으로 변경되는 반응형에 사용한다.

 

 <div class="col-md-6 offset-md-3"> </div>

 

-userInput안에 사용자가 입력한 todoList라는 인풋의 배열을 하나 만든다. 

  data(){
    return{
      userInput: '',
      todoList: []
    };
  }

 

-사용자가 인풋에 텍스트 입력 > 엔터 > 인풋 내용 초기화를 하는 methods를 하나 추가한다.

***메소드란? 메소드는 객체가 가지고 있는 동작이며, 해당 동작을 일으키고 있다면 동작을 가지고 있는 객체에게 명령을 내려야한다. 자바스크립트 객체 기반의 스크립트 언어이고, 1)데이터와 2)데이터가 동작하는 방식을 포함하고 있는 개념이다. 

-해당 매소드는 새롭게 투두를 추가하기위한 동작이니 addnewTodo로 지어주면 된다.

 

  methods: {
    addNewTodo(){

    }
  },

 

-인풋에 엔터를 치는 동작을 인식할 수 있도록 @keyup.enter를 추가해준다. (*vue에서 쓰고, @keyup.enter은 엔터 키보드 치면, 지정된 함수를 부를 수 있게 해준다.)

 

<input type="text" class="form-control" v-model="userInput" @keyup.enter="addNewTodo">

 

-리셋 시키기 위해서는 this.를 사용해서 todoList에 입력이 되었다면, 배열에 추가 (push) 하고, 다시 userInput을 비워준다는 코드를 넣으면 된다.

-완성된 코드를 풀어보자면, addNewTodo라는 메소드가 하나 생겼고, 위의 인풋에서 키 엔터값을 누르면 addNewTodo에 추가가되며, 다시 인풋은 공란으로 돌아간다.

**this란 인스턴스 자신을 가리키는 참조 변수이다.

  methods: {
    addNewTodo(){
      this.todoList.push(this.userInput);
      this.userInput = '';

    }

 

5-2.입력한 데이터를 반복해서 보여주기

-list group으로 묶어줄 div를 하나 생성한다.

-입력되는 list를 보여줄 button으로 정의한다.

-v-for문을 이용해서 입력할때마다 반복적으로 리스트가 생기도록한다.

-v-bind:key으로 todo를 한번 정의해주고, 출력된 값을 {{todo}}로 정의해준다. (뷰 2버전 이상에선 v-for을 사용하기 위해선 바인드 키값이 필요하도록 업데이트 되었다.)

          <div class="list-group">
              <button class="list-group-item align-left" v-for="todo in todoList" v-bind:key="todo">
                {{todo}}
                
              </button>

          </div>