Don't Panic
in React-Vue ☕ 2분 읽기

[Vue] Vue실습2

#Vue
목차

Vue CLI

Vue CLI는 Vue.js로 App을 만들 때 필요한 기능을 모두 제공해주는 개발 툴이다.

  • Vue CLI로 프로젝트를 만들면 node_modules까지 함께 주는데, 그러면 사이즈가 너무 커진다. 따라서 GitLab 등에 올릴 때는 node_modules를 빼고 주는 것이 좋다.

컴포넌트 구조

  • 컴포넌트는 화면 하나를 구성하는 단위다.
  • App.vue는 main.js를 import 하고 있다.
  • 지역 컴포넌트를 등록할 때는 components: {}를 사용한다.

App.vue 컴포넌트 구조

  • props: 부모가 자식에게 데이터를 전달.
  • package.json은 Maven을 썼을 때의 pom.xml과 같은 역할이다 (의존성 관리).

강의 중 채팅 (참고 자료)


광주_4반_김혜원 님이 모두에게:    오후 1:12
content요
광주_4반_성지현 님이 모두에게:    오후 1:12
no, content, userid, write_date, end_date, done
광주_4반_황혜영 님이 모두에게:    오후 1:12
userid
dayon33 dayon33 님이 모두에게:    오후 1:16
    insert into todolist values(null, #{content}, 'dada', curdate(),
        adddate(curdate(),interval 7 day), 'N')

부모-자식 통신 (props / emit)

  • 부모끼리 직접 통신하지 않으면 자식끼리도 통신하기 어렵다.
  • 자식은 부모에게서 받아올 것이 있으면 props로 받아오고, 부모에게 신호를 줄 것이 있으면 emit을 사용한다.

기타 메모

REST 서비스

  • 자원(resource)에 대해 무슨 작업을 할 것인지를 의미 중심으로 찾아본다.
  • before류는 먼저 실행되는 훅(hook) 성격의 요소들.
  • HTML 태그 중 여러 개의 태그(input, button 등)를 묶어주는 태그가 있으며, 어떤 것은 보이지 않게도 설정할 수 있다.

computed vs watch

  • Vue가 가진 데이터를 감시해서, 기존 데이터가 가지고 있던 정보를 자동으로 갱신해주는 속성이 있다.
  • computed: 캐시 기능이 있고, Vue가 가진 데이터를 기반으로 값을 계산한다.
  • watch: 데이터를 그대로 감시(쳐다봄)한다.
  • 둘이 헷갈리기 쉬우니 주의.

바인딩

  • :href= 는 v-bind:href 의 축약형이다.
  • template 속성이 있으면, 자기가 가진 화면 속성이더라도 그것으로 덮어쓴다.

라우터 vs 라우트 (구분 중요)

  • 라우터(router)는 모든 링크 요소를 가진 전체이고, 라우트(route)는 지금 화면에 보여지는 하나의 경로/컴포넌트를 가리킨다.
  • 라우터 링크를 눌렀을 때 보여지는 라우터 영역(router-view)도 함께 생각해야 한다.
  • 파라미터로 값을 받는 경우도 고려한다.
  • 라우터 / 라우트 / end 구분을 명확히 할 것.

가상 DOM 렌더링

  • 컴포넌트의 데이터는 함수 형식으로 만들어서 리턴해줘야 한다.
  • Vue 객체를 만들어 관리할 때 콧수염 표기({{ }})로 값을 화면에 보여준다.
  • h1, h2 같은 태그는 처음부터 DOM으로 만들어지지만, 콧수염 괄호는 DOM 단계에서는 알아듣지 못한다(아직 Vue 객체와 연결되지 않아서).
  • Vue 객체와 연결된 후에는 전체를 다시 그리는 것이 아니라 특정 부분만 다시 그려준다. → 가상 DOM 렌더링

form submit 처리

  • input type="submit"은 form 태그에 붙어 있을 수 있는데, 그대로 두면 바로 서버로 날아가 버린다.
  • 폼에서 submit 이벤트가 발생하면 바로 넘어가야 하므로, 이벤트 처리(submit 등)에 주의한다.

props, emit 관련 코드는 잘 봐두자.

관련 글