05.09.2022 TIL

😸 Vue TIL

😽 Done it

😼 컴포넌트 기초

1. props 전달
   html -> component

app.component에서 upper-name component를 만들고 html에서 <upper-name>을 이용해서 사용합니다.
html에서 upper-name component의 props로 :props이름=""를 이용하여 data를 보내주고 upper-name component에서 이를 사용합니다.

2. $emit 전달

component -> html

$emit을 사용하여 $emit에서 커스텀 한 이름(to-upper)로
html의 해당 컴포넌트의 @to-upper=""을 이용해서 값을 보내줍니다.

3. App의 methods 사용

html의 to-upper="methods"와 같이하여 methods를 사용합니다.

<upper-name :name="fruit" @to-upper="toUpperApp(fruit, $event)"> </upper-name>

const App = {
  methods: {
    toUpper(fruit, upperName) {
      fruit.name = upperName;
    },
  },
};

app.component('upper-name', {
  template: `<div @click="capital">{{name}}</div>`,
  props: ['name'],
  methods: {
    capital() {
      this.$emit('to-upper', this.name.toUpperCase());
      //2번째 인자(this.name.toUpperCase())는 $event로 사용가능 합니다.
    },
  },
});

😼 Node.js & npm

서버 관리를 위해
node.js 설치 되어 있으면 n
node.js 설치 되어 없으면 nvm

n use 버전으로 원하는 버전 선택하여 사용
^버전 => 해당 버전의 이상 호환가능 버전

dependencies : 일반의존성 패키지
devDependencies: 개발의존성 패키지(개발에서만 사용) => package 설치할 때 --save-dev or -D을 이용

프로젝트 관리

package.json: 설치한 package를 관리한다.
package-lock.json: package를 설치한 상황에 맞게 snapshot을 찍어 저장
=> 다른 곳에서도 같은 버전을 사용할 수 있게 해줍니다.

해당 두개의 파일이 있는 곳에서 npm install or npm i를 하면 적절한 버전을 가진 node-modules를 만들어서 실행할 수 있게 해줍니다.

😼 parcel

https://gwpaeng.tistory.com/410

😼 webpack

https://gwpaeng.tistory.com/411?category=1024147

https://gwpaeng.tistory.com/412?category=1024147

😺 Feeling

오늘 것을 마무리를 못하는 불상사가 생겼습니다. 근데 왜 왜 이렇게 한글쓰는데 끊기는 것인가...
어째든 조금 더 듣고 잠을 자야겠습니다. :) 화이팅! 어제에 이어 오늘 마무리를 하게 되었습니다 익숙해지도록 노력하겠습니다. !!!

📖 REF

프로그래머스 데브코스
https://v3.ko.vuejs.org/guide/introduction.html