git stash 사용법

현재 수정하고 있는 내용을 commit하지 않고 임시로 저장하는 방법입니다.

주요 명령어

다음의 두 명령어를 주로 사용합니다.

• git stash : 변경 사항을 임시로 저장
• git stash pop : 저장된 병경 사항을 꺼내서 현재 코드에 merge 함
• git stash list : stash에 보관된 변경 사항 리스트를 출력

기본적으로 Stack으로 동작하며, pop 명령어로 변경 사항을 꺼내오면 그 내용은 stash에서 삭제합니다.

그 외에도 다음과 같은 명령이 있습니다.

git stash apply

stash에서 변경 사항을 꺼내오지만, 그 내용을 stash에서 삭제하지 않습니다.

git stash pop –index

기본적으로 git stash pop은 staged 상태는 복원이 되지 않습니다. 하지만, --index 옵션까지 붙이면 staged 상태까지 복원됩니다.

git stash branch

저장된 변경 사항으로 브랜치 새로 만다는 명령어입니다. stash에 저장된 내용을 pop 하기 때문에 저장된 내용은 stash에서 삭제 됩니다,

다음과 같이 실행합니다.

$ git stash branch new-branch-name

git checkout -f

stash 내용을 포함해서 HEAD의 모든 변경을 복원하는 경우 git checkout -f 명령어를 사용합니다.

git stash -u

git stash는 기본적으로 Git에서 관리하는 파일에 대해서만 임시 저장을 해주는데, git stash -u 명령어는 Git 저장소에 추가되지 않은 파일들에 대해서도 임시 저장을 해줍니다.

json-server 패키지

json-server는 json 파일을 이용해서 간단한 REST 서버를 만들어주는 npm 패키지입니다.

여기에서 설명을 볼 수 있습니다.

설치 방법

npm install -g json-server

Database 파일 작성

db.json 파일을 다음과 같이 작성합니다.

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

실행 방법

json-server --watch db.json

\{^_^}/ hi!

  Loading db.json
  Done

  Resources
  http://localhost:3000/posts
  http://localhost:3000/comments
  http://localhost:3000/profile

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

json 파일에 따라 REST API가 자동으로 만들어지며, json 파일을 수동으로 변경하더라도 자동으로 서버에 적용됩니다.

ref vs reactive

ref와 reactive의 사용법 예제입니다.

Vue에서 변수들의 값이 변경되었을 때 화면이 자동으로 갱신되지 않습니다. 데이터 변경에 반응형으로 자동 갱신을 하기 위해서는 ref 또는 reactive를 사용해야 합니다.

ref 값을 변경할 때는 변수명.value 값을 변경하면 되며, reactive는 일반 구조체처럼 값을 변경하면 됩니다.

<template>
  <h1>ref vs reactive</h1>
  <div>
    <h2>ref: </h2>
    <h2>reactive: , </h2>
  </div>
  <button @click="update">Update</button>
</template>

<script>
import { reactive, ref } from "@vue/reactivity";
export default {
  setup() {
    const refData = ref("snowdeer");
    const reactiveData = reactive({
      name: "snowdeer",
      address: "Seoul",
    });

    const update = () => {
      refData.value = "snowdeer-ref";
      reactiveData.name = "snowdeer-reactive";
    };

    return {
      refData,
      reactiveData,
      update,
    };
  },
};
</script>

<style>
</style>

ref, reactive 차이

• ref는 변수명.value로 값을 변경하며, reactive는 데이터 구조체처럼 값을 변경하면 됩니다.
• reactive는 primitive 값에 대해서는 반응형을 갖지 않습니다. 다만 구조체 형태로 선언하면 반응형으로 동작합니다.

Hello World

Vue.js 3에서 도입된 Composition API를 이용해서 Hello World를 출력하는 예제입니다.

<template>
  <h1>, </h1>
</template>

<script>
export default {
  setup() {
    const name = "snowdeer";

    const greeting = () => {
      return "Hello";
    };

    return {
      name,
      greeting,
    };
  },
};
</script>

<style>
</style>

위의 예제에서는 name이라는 변수, greeting 이라는 메소드를 작성한 예제입니다. export default 내에 setup 함수 안에 변수, 메소드 등을 선언할 수 있으며, setup의 리턴 값으로 html에서 사용할 변수 또는 메소드를 반환해주면 됩니다.

Vue.js 프로젝트 디렉토리 구성

프로젝트 만들기

터미널에서 vue create 명령어를 통해 Vue.js 프로젝트를 하나 생성합니다.

$ vue create snowdeer-vue-sample

Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.4
✨  Creating project in /Users/snowdeer/Workspace/vue/snowdeer-vue-sample.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.17
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 8.84s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 23.39s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project snowdeer-vue-sample.
👉  Get started with the following commands:

 $ cd snowdeer-vue-sample
 $ yarn serve

프로젝트 구조

package.json

프로젝트에 필요한 패키지들은 package.json에 설치됩니다. 대략적인 내용은 다음과 같습니다.

{
  "name": "snowdeer-vue-sample",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },

  ...

위 프로젝트에서 필요한 패키지들은 dependencies와 devDependencies를 보면 되며 yarn add 또는 npm install 등의 명령어로 필요 패키지들이 하나씩 추가됩니다.

public/index.html

해당 프로젝트를 실행하면 public/index.html이 실행되며, 특별히 건드릴 부분은 거의 없습니다.

<body> 태그 내의 <div id="app">에 Vue.js가 렌더링해서 보여줍니다.

<body>
    ...
    <div id="app"></div>
    <!-- built files will be auto injected -->
    ...
</body>

src/main.js

가장 먼저 실행되는 파일이라고 볼 수 있습니다. createApp 함수를 통해 프로젝트 전체 인스턴스에 대한 설정이 들어갑니다.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

src/App.vue

본격적인 Vue 파일입니다. Vue 파일은 크게 다음의 3부분으로 이루어져 있습니다.

• <template> : html 코드가 작성됨
• <script> : vue.js 코드가 작성됨
• <style> : css 스타일 코드가 작성됨

이와 같이 하나의 파일에 html, script, css가 모두 작성되기 때문에 Vue.js는 SFC(Single-File Components)라고 합니다.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>