폼 입력 바인딩 ~ Node.js와 NPM

폼 입력 바인딩

<div id="app">
  <h1>{{msg}}</h1>
	<input type="text" v-model="msg" />
  <!--<input type="text" :value="msg" @input="msg = $event.target.value" />-->
</div>

<script>
  const App = {
    data() {
      return {
        msg: "Vue",
      };
    },
  };
  const vm = Vue.createApp(App).mount("#app");
</script>

• msg라는 데이터를 갱신하여 이중 중괄호 부분도 실시간으로 내용을 반영함 → 양방향 바인딩.

• v-model 디렉티브를 사용하여 input, textarea, select 요소들에 양방향 데이터 바인딩을 생성함.

• 세부 내용을 신경쓰지 않아도 요소에 대해 서로 다른 이벤트를 최적화하여 전송함.

• 다만 한글은 완벽하게 실시간을 구현할 수 없음. 이땐 :value와 @input으로 작성해야 함.

• 기본 속성보다 v-model에 연결된 데이터를 더 우선시 함.

• data에 checked를 배열로 만들면 input 태그의 value 값을 배열 형태로, 누른 순서대로 삽입함.

<div id="app">
  <select v-model="selected">
    <option value="">선택하세요</option>
    <option v-for="fruit in fruits" :key="fruit.value" :value="fruit.value">
      {{fruit.text}}
    </option>
  </select>
</div>

<script>
  const App = {
    data() {
      return {
        selected: "",
        fruits: [
          { text: "사과", value: "apple" },
          { text: "바나나", value: "banana" },
          { text: "체리", value: "cherry" },
        ],
      };
    },
    watch: {
      selected(newValue) {
        console.log(newValue);
      },
    },
  };
  const vm = Vue.createApp(App).mount("#app");
</script>

• select 태그에 option 태그의 value로 넣은 값을 v-model과 watch로 추적할 수 있음. value 값을 적지 않으면 실제 값이 출력됨.

• 선택이 됐을 때 갱신할 데이터를 양방향으로 지정. 이때 화면에 출력할 text와 값으로 전달되는 value가 다를 수 있음.

수식어

• v-model.lazy - input 이벤트 후 입력과 데이터를 동기화 함.

• v-model.number - 숫자로 형변환 함.

• v-model.trim - 자동으로 앞뒤 공백 제거.

컴포넌트 기초

• 컴포넌트는 생성된 애플리케이션 객체에서만 사용할 수 있기 때문에 createApp을 통해 반환된 인스턴스와 mount로 반환한 인스턴스를 분리시켜야 함.

<div id="app">
  <upper-name
    v-for="fruit in fruits"
    :key="fruit.id"
    :name="fruit.name"
    @to-upper="toUpper(fruit, $event)"
  ></upper-name>
</div>

<script>
  const App = {
    data() {
      return {
        fruits: [
          { id: "1", name: "apple" },
          { id: "2", name: "banana" },
          { id: "3", name: "cherry" },
        ],
      };
    },
    methods: {
      toUpper(fruit, upperName) {
        fruit.name = upperName;
      },
    },
  };
  const app = Vue.createApp(App);
  app.component("upper-name", {
    template: `<div @click="capitalize">{{name}}</div>`,
    props: ["name"],
    methods: {
      capitalize() {
        //this.name = this.name.toUpperCase();
        this.$emit("to-upper", this.name.toUpperCase());
      },
    },
  });
  const vm = app.mount("#app");
</script>

• 컴포넌트 외부에서 내부로 데이터를 넣을 때 props를 사용함.

• this.props로 접근 가능함.

• props는 읽기 전용이기 때문에 외부에서 값을 변경할 수 없음. 따라서 수정 권한을 app에 부여해야 함. 추후 의도하지 않은 장소에서 데이터가 수정되는 것을 방지함.

• 반대로 컴포넌트 내부에서 외부로 데이터를 올려줄 땐, $emit을 사용함. $emit메소드는 커스텀한 이벤트를 만들어 실행하는 용도로 사용함.

• props 처럼 emits: []로 생성된 이벤트를 나열할 수 있음(어떤 이벤트가 있는지 한 눈에 보기 위함).

• $event를 사용하여 emit한 이벤트의 값에 접근할 수 있음. 혹은 첫번째 파라미터로 전달됨.

Node.js와 NPM

• nvm(node version manger)으로 node.js 버전을 관리할 수 있음.

• npm(nodejs package manager)은 node js에서 사용할 수 있는 패키지를 관리할 수 있음.

• npm i -g 대신 npx라는 명령어로 설치와 함께 실행할 수 있음.

• npm i serve는 개발용 서버임. 개발할 때만 사용한다는 의미에서 npm i serve --save-dev 또는 npm i serve -D로 터미널에서 실행함.

• Devdependencies는 개발할 때만 필요한 패키지 목록(개발 의존성 패키지), dependencies는 실제 브라우저에서 동작하는 패키지 목록(일반 의존성 패키지)임.

vue 시작하기

1. npm init - npm 환경에서 개발하겠단 의미.
1. package name은 충분히 고유해야 함. 만약 폴더명과 일치시키고 싶다면 enter.
2. version은 1.0.0을 권장함.
3. description은 프로젝트에 대한 설명, entry point, test command는 웹개발에서 자주 사용하지 않음.
4. 이렇게 추가 정보 입력이 필요한 부분을 추가하면 됨.
5. Yes를 누르면 package.json파일이 만들어짐.

1. npm i vue 노드 패키지 매니저로 외부에 만들어진 패키지 vue를 설치함. (install 대신 i로 사용)
1. package.json에 dependencies로 vue 버전과 함께 설치를 확인할 수 있음.
2. vue 3 설치 : npm i vue@next or (버전명)
3. vue 삭제 : npm uninstall vue 또는 npm un vue
4. node_modules 폴더에 vue를 제외한 다른 파일은 vue js가 의존하고 있는 다른 패키지임. node_modules/vue/package.json에서 의존하는 패키지 확인 가능.

nodeJs란

• JS 런타임을 의미. 여기서 런타임이란 무엇인가 동작하는 환경을 의미. 즉, JS가 동작할 수 있는 환경을 의미함.

• JS는 웹브라우저와 로컬 컴퓨터를 제어함. 이를 위한 JS 환경이 제공돼야 하고, 이때 로컬에 환경을 제공하는 것이 node js라는 JS 런타임.

• node js는 단순히 FE 개발을 위해서 뿐만 아니라 JS 통해 컴퓨터를 제어하는 것이 주 용도임.

package.json 커스텀하기

• "main"은 삭제해도 됨.

• scripts 옵션은 터미널에서 npm i serve 등의 스크립트를 명시함.
단, 서브 명령이 사용되는 터미널은 현재 프로젝트가 있는 경로여야 함.



이후 npm run dev로 명시한 스크립트를 실행할 수 있음.

package-lock.json

• ^은 메이저 버전 내의 이상을 의미함. ex) ^12.0.0은 12.x.x 버전을 아우를 수 있음

• package-lock.json 파일이 버전 정보를 정확히 가지고 있음.

• 작업 환경이 다른 곳에서 작업할 때 버전 충돌이 나지 않게 도와줌.

매번 node_modules를 commit 해야 할까?

1. node_modules 폴더 삭제

2. 터미널에 npm i를 입력하면 package 파일들을 기준으로 설치를 진행함.

3. .gitignore라는 파일을 생성하여 버전 관리에서 무시할 파일을 관리할 수 있음.

#노드 모듈
node_modules/

#vscode 관리 파일
.vscode/

#기타 프로그램 시 생성되는 파일.
.idea/
.DS_store/

• git init → git status : gitignore에 명시한 파일은 버전 관리에서 빠진 걸 볼 수 있음.

터미널에서 commit하기

1. git init

2. git status
1. 브랜치가 master라면 git branch -M main으로 변경.

3. git add .

4. git commit -m '커밋 메시지'

5. git log - 확인 용도.

6. git push