0222 - 0228

0222

깃 설정 명령어

git config --global core.editor "code --wait"
-> 깃의 설정을 VSCode로 편집할 수 있게 해준다.
git config --global -e
-> 깃 설정을 VSCode로 열어준다.
git config --global user.name "유저이름"
git config --global user.email "유저이메일"
git config --global core.autocrlf input
-> 운영체제마다 새로운 줄바꿈을 할 때 들어가는 문자열이 다르기 때문에 그것을 맞춰준다.
git init
-> 깃을 초기화해준다. 기본적으로 master브랜치 생성
rm -rf .git
-> 깃을 삭제한다.
git status
-> 깃의 상태를 확인해준다.
git config --global alias.별명 원래명령어
-> 원래 명령어를 별명으로 사용할 수 있도록 해준다.

0223

Git Workflow

working directory

작업하고 있는 디렉토리
untracked과 tracked로 나뉘어 진다.
깃이 이미 알고 있는 tracking하고 있는 파일이라면 tracked 카테고리로 가게 된다.
새로 만들어진 파일이거나 기존에 존재하던 프로젝트에서 깃을 초기화하게 되면 깃이 파일에 대한 정보가 없으므로 아기 tracking되지 않은 파일들을 untracked 카테고리로 가게 된다.
tracked 카테고리에서 이전 버전과 비교해서 수정되었으면 modified, 수정되지 않았으면 unmodified로 나뉘는데 modified파일만 staging area로 이동할 수 있다.

staging area

어느정도 작업하다가 버전 히스토리에 저장할 준비가 되어있는 파일들을 옮겨놓는 장소
commit 명령어를 이용하여 히스토리에 저장할 수 있다.

.git directory

버전의 히스토리를 가지고 있는 깃 리포지토리
checkout 명령어를 통해 원하는 버전으로 돌아갈 수 있다.

remote

나의 로컬이 아닌 깃허브 같은 서버에 push, pull을 통해 저장하고 업로드 받을 수 있는 장소

0224

Git 기본 명령어

git add

git add 파일명
-> 파일을 트래킹하여 staging area로 옮겨준다.
트래킹중인 파일을 수정하면 working directory에서 modified상태로 변경된다.
git add *
-> working directory에 있는 모든 파일을 staging area로 옮겨준다.

git rm

git rm --cached 파일명
-> staging area에 있는 파일을 다시 working directory로 옮겨준다.

gitignore

트래킹하고싶지 않은 파일들을 .gitignore파일에 추가하여 트래킹하지 못하도록 설정할 수 있다.

git status 옵션

git status -s
-> 깃의 상태를 간단하게 보여준다.

git diff

git diff
-> working directory에서 이전 버전과의 변경 사항을 보여준다.
git diff --staged
-> staging area에서 이전 버전과의 변경 사항을 보여준다.
git difftool, git difftool --staged
-> 변경 사항을 vscode에서 사용할 수 있도록 설정해두었다

git commit

staging area에 있는 변경사항을 깃 리포지토리로 옮겨주는 역할을 한다.
git commit -m "작성할 메시지"
-> 메시지와 함께 커밋
git commit -am "작성할 메시지"
-> staging area뿐만 아니라 working directory에 있는 모든 변경 사항을 메시지와 함께 커밋
git log
-> 깃 커밋 내용 확인

하나의 기능을 단위로 하여 의미있는 이름으로 커밋을 하자

0225

뷰 인스턴스

뷰 인스턴스의 정의와 속성

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위

new Vue ({
	...
});

new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다.
생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서다.

뷰 인스턴스 옵션 속성

인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다.
el 속성은 뷰로 만든 화면이 그려지는 시작점을 의미한다.
template 속성은 화면에 표시할 마크업 요소를 정의하는 속성이다.
methods 속성은 화면 로직 제어와 관계된 메서드를 정의하는 속성이다.

뷰 인스턴스 유효 범위

뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타나는데, 이를 인스턴스의 유효 범위라고 한다.

뷰 인스턴스 옵션 속성으로 el을 인스턴스에 정의하고 생성한 뒤, 브라우저에서 실행하면 el속성에 지정한 화면 요소에 인스턴스가 부착된다.
el속성에 인스턴스가 부착되고 나면 인스턴스에 정의한 옵션 객체의 내용이 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환된다.
그러나 el 속성으로 지정한 범위를 벗어나게 되면 뷰에서 인식하지 못한다.

뷰 인스턴스 라이프 사이클

일반적으로 애플리케이션이 가지는 생명 주기

라이프 사이클 속성: 인스턴스의 상태에 따라 호출할 수 있는 속성들
라이프 사이클 훅: 라이프 사이클 속성에서 실행되는 커스텀 로직
라이프 사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 이루어 진다.
부착 -> 갱신 구간은 데이터가 변경되는 경우에만 거치게 된다.
각 단계 사이에 라이프 사이클 속성 created, mounted, updated 등이 실행된다.

beforeCreate

인스턴스가 생성되고 나서 가장 처음 실행되는 라이프 사이클 단계
data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에도 접근할 수 없다.

created

data 속성과 methods 속성이 정의되었기 때문에 접근하여 로직을 실행할 수 있다.
다만, 아직 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없다.
data 속성과 methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다.

beforeMount

template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 전에 호출되는 단계
render() 함수가 호출되기 직전의 로직을 추가하기 좋다.

mounted

el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계
template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계
다만, 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과는 다를 수 있다.

beforeUpdate

관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이며, 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다.
값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않는다.

updated

데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계
데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계
이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 한다.
데이터 값을 갱신하는 로직은 가급적이면 beforeUpdate에 추가하고, updated에서는 변경 데이터의 화면 요소와 관련된 로직을 추가하는 것이 좋다.

beforeDestroy

뷰 인스턴스가 파괴되기 직전에 호출되는 단계
뷰 인스턴스의 데이터를 삭제하기 좋은 단계

destroyed

뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴

0226

뷰 컴포넌트

컴포넌트란?

조합하여 화면을 구성할 수 있는 블록

빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다.
화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기가 편리하다.
컴포넌트를 증록하는 방법은 전역과 지역 두가지가 있다.

전역 컴포넌트 등록

여러 인스턴스에서 공통으로 사용할 수 있다.
뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다.

Vue.component("컴포넌트 이름", {
  // 컴포넌트 내용
});

전역 컴포넌트 등록 형식에는 컴포넌트 이름과 컴포넌트 내용이 있다.
컴포넌트 이름은 template 속성에서 사용할 HTML 사용자 정의 태그 이름을 의미한다.
컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 컴포넌트 내용에 작성한다.

전역 컴포넌트가 화면에 나타나기까지의 처리 과정

뷰 라이브러리 파일 로딩
뷰 생성자로 컴포넌트 등록
인스턴스 객체 생성
특정 화면 요소에 인스턴스 부착
인스턴스 내용 변환 (등록된 컴포넌트 내용도 변환)
변환된 화면 요소를 사용자가 최종 확인

지역 컴포넌트 등록

특정 인스턴스에서만 유효한 범위를 갖는 컴포넌트
전역 컴포넌트와는 다르게 인스턴스에 components 속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의하면 된다.

new Vue({
	components: {
		'컴포넌트 이름': 컴포넌트 내용
	}
});

지역 컴포넌트와 전역 컴포넌트의 차이

전역 컴포넌트는 인스턴스를 새로 생성할 때마다 인스턴스에 components 속성으로 등록할 필요없이 한 번 등록하면 어느 인스턴스에서도 사용할 수 있다.
반대로 지역 컴포넌트는 새 인스턴스를 등록할 때마다 등록해 줘야 한다.
제한되는 유효범위가 다르다.

0227

뷰 컴포넌트 통신

컴포넌트 간 통신과 유효 범위

뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위를 갖기 때문이다.

상위 하위 컴포넌트 관계

뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법중 가장 기본적인 방법은 상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법이다.
상위에서 하위로는 props라는 특별한 속성을 전달한다.
하위에서 상위로는 기본적으로 이벤트만 전달할 수 있다.

상위에서 하위 컴포넌트로 데이터 전달하기

props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성이다.
props 속성을 사용하려면 먼저 하위 컴포넌트의 속성에 정의해야한다.

props: ["props 속성 이름"];

그런 다음 상위 컴포넌트의 HTML 코드에 등록된 child-component 컴포넌트 태그에 v-bind 속성을 추가한다.

<child-component
  v-bind:props
  속성
  이름="상위 컴포넌트의 data 속성"
></child-component>

v-bind 속성의 왼쪽 값으로 하위 컴포넌트에서 정의한 props 속성을 넣고, 오른쪽 값으로 하위 컴포넌트에 전달할 상위 컴포넌트의 data 속성을 지정한다.
인스턴스에 새로운 컴포넌트를 등록하면 기존에 있던 컴포넌트는 상위 컴포넌트가 되고, 새로 등록된 컴포넌트는 하위 컴포넌트가 된다.

하위에서 상위 컴포넌트로 이벤트 전달하기

이벤트를 발생시켜 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출할 수 있다.
이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용하여 구현한다.

이벤트 발생과 수신 형식

// 이벤트 발생
this.$emit("이벤트명");
// 이벤트 수신
<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>;

$emit()을 호출하면 괄호 안에 정의된 이벤트가 발생한다.
호출한 이벤트는 하위 컴포넌트를 등록하는 태그에서 v-on:으로 받는다.
하위 컴포넌트에서 발생한 이벤트명을 v-on: 속성에 지정하고, 속성의 값에 이벤트가 발생했을 때 호출될 상위 컴포넌트의 메서드를 지정한다.
이와 같은 방식으로 하위 컴포넌트에서 상위 컴포넌트로 신호를 올려보내면 상위 컴포넌트의 메서드를 실행할 수도 있고, 하위 컴포넌트로 내려보내는 props의 값을 조정할 수도 있다.

같은 레벨의 컴포넌트 간 통신

컴포넌트 고유의 유효 범위 때문에 상위 컴포넌트로 이벤트를 전달한 후, 공통 상위 컴포넌트에서 하위 컴포넌트에 props를 내려 보내야 한다.
상위 컴포넌트가 필요 없음에도 불구하고 같은 레벨 간에 통신하기 위해 강제로 상위 컴포넌트를 두어야 한다. -> 이를 해결할 수 있는 방법이 바로 이벤트 버스

관계 없는 컴포넌트 간 통신 - 이벤트 버스

개발자가 지정한 2개의 컴포넌트 간에 데이터를 주고받을 수 있는 방법

이벤트 버스를 구현하려면 애플리케이션 로직을 담는 인스턴스와는 별개로 새로운 인스턴스를 1개 더 생성하고, 새 인스턴스를 이용하여 이벤트를 보내고 받는다.
보내는 컴포넌트에서는 .$emit()을, 받는 컴포넌트에서는 .$on()을 구현한다.

// 이벤트 버스를 위한 추가 인스턴스 1개 생성
let eventBus = new Vue();

// 메서드를 보내는 컴포넌트
methods: {
 	메서드명: function() {
		eventBus.$emit('이벤트명', 데이터);
	}
}

// 이벤트를 받는 컴포넌트
methods: {
	created: function() {
		eventBus.$on('이벤트명', function(데이터) {
			...
		});
	}
}

이벤트 버스를 활용하면 원하는 컴포넌트 간에 직접적으로 데이터를 전달할 수 있어 편리하지만 컴포넌트가 많아지면 어디서 어디로 보냈는지 관리가 되지 않는 문제가 발생한다.
-> 문제를 해결하려면 뷰엑스라는 상태 관리 도구가 필요

0228

뷰 라우터

라우팅이란?

웹 페이지 간의 이동 방법. 싱글 페이지 애플리케이션에서 주로 사용

라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있을 뿐만 아니라 더 빠르게 화면을 조작할 수 있어 사용자 경험이 향상된다.

뷰 라우터

뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리
<router-link to="URL">
-> 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동
<router-view>
-> 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역

// 컴포넌트 정의
let Main = { template: "<div>main</div>" };
let Login = { template: "<div>login</div>" };

// URL에 맞춰 표시할 컴포넌트 지정
let routes = [
  { path: "/main", component: Main },
  { path: "/login", component: Login },
];

// 뷰 라우터 정의
var router = new VueRouter({
  routes,
});

// 뷰 인스턴스에 라우터 추가
var app = new Vue({
  router,
}).$mount("#app");

$mount() API는 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할을 한다.

네스티드 라우터

라우터로 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.

URL에 따라서 컴포넌트의 하위 컴포넌트가 다르게 표시된다.

let User = {
  template: `
          <div>
               User Component
               <router-view></router-view>
          </div>
     `,
};

var routes = [
  {
    path: "/user",
    component: User,
    children: [
      {
        path: "posts",
        component: UserPost,
      },
      {
        path: "profile",
        component: UserProfile,
      },
    ],
  },
];

네스티드 라우터와 기본 라우터의 차이점은 최상위 컴포넌트에도 가 있고, 최상위 컴포넌트의 하위 컴포넌트에도 가 있다는 것이다.
그렇기 때문에 URL에 따라 하위 컴포넌트의 내용이 바뀌게 된다.
네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 한 번에 더 많은 컴포넌트를 표시하는 데는 한계가 있다.

네임드 뷰

특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식

네스티드 라우터는 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이지만, 네임드 뷰는 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시

<div id="app">
  <router-view name="header"></router-view>
  <router-view></router-view>
  <router-view name="footer"></router-view>
</div>;

var router = new VueRouter({
  routes: [
    {
      path: "/",
      components: {
        header: Header,
        footer: Footer,
        default: Body,
      },
    },
  ],
});

name 속성은 아래 components 속성에 정의하는 컴포넌트와 매칭하기 위한 속성
path는 네임드 뷰가 실행될 URL을 정의하는 속성
이렇게 네임드 뷰를 활용하면 특정 페이지로 이동했을 때 해당 URL에 맞추어 여러 개의 컴포넌트를 한 번에 표시할 수 있다.

뷰 HTTP 통신

웹 앱의 HTTP 통신 방법

웹 앱 HTTP 통신의 대표적인 사례로는 제이쿼리의 ajax가 있다. ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법이다.

뷰에서도 마찬가지로 ajax를 지원하기 위한 라이브러리를 제공하는데, 뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 요즘 가장 많이 사용하는 액시오스이다.

뷰 리소스

초기에 코어 팀에서 공식적으로 권하는 라이브러리였으나 필수적인 기능이 아니라고 판단했기 때문에 공식 지원이 중단
this.$http.get()을 사용하여 해당 URL에서 제공하는 데이터를 받아올 수 있다.

액시오스

현재 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리
Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직을 구현할 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있다.
액시오스는 HTTP 통신에 대해 간단하고 직관적인 API를 제공한다. 그리고 API 형식이 다양하여 여러 설정 값을 추가하여 함께 호출할 수 있다.

// HTTP GET 요청
axios.get('URL 주소').then().catch();

// HTTP POST 요청
axios.post('URL 주소').then().catch();

// HTTP 요청에 대한 옵션 속성 정의
axios({
	method: 'get',
	url: 'URL 주소',
	...
})

서버에서 보낸 데이터를 정상적으로 받아오면 then() 안에 정의한 로직이 실행되고, 데이터를 받아올 때 오류가 발생하면 catch()에 정의한 로직이 수행된다.
response 객체를 확인해 보면 data 속성이 일반 문자열 형식이 아니라 객체 형태이기 때문에 별도로 JSON.parse()를 사용하여 객체로 변환할 필요가 없다.
-> 뷰 액시오스가 뷰 리소스보다 사용성이 좋다는 것을 증명

Twitter Facebook LinkedIn

이정훈

0222

깃 설정 명령어

0223

Git Workflow

working directory

staging area

.git directory

remote

0224

Git 기본 명령어

git add

git rm

gitignore

git status 옵션

git diff

git commit

0225

뷰 인스턴스

뷰 인스턴스의 정의와 속성

뷰 인스턴스 옵션 속성

뷰 인스턴스 유효 범위

뷰 인스턴스 라이프 사이클

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

0226

뷰 컴포넌트

컴포넌트란?

전역 컴포넌트 등록

전역 컴포넌트가 화면에 나타나기까지의 처리 과정

지역 컴포넌트 등록

지역 컴포넌트와 전역 컴포넌트의 차이

0227

뷰 컴포넌트 통신

컴포넌트 간 통신과 유효 범위

상위 하위 컴포넌트 관계

상위에서 하위 컴포넌트로 데이터 전달하기

하위에서 상위 컴포넌트로 이벤트 전달하기

같은 레벨의 컴포넌트 간 통신

관계 없는 컴포넌트 간 통신 - 이벤트 버스

0228

뷰 라우터

라우팅이란?

뷰 라우터

네스티드 라우터

네임드 뷰

뷰 HTTP 통신

웹 앱의 HTTP 통신 방법

뷰 리소스

액시오스

공유하기

참고

0627 - 0703

0620 - 0626

0613 - 0619

0606 - 0612