[프론트엔드 데브코스 TIL] 2023.11.20 월요일 Day45 Vue 1일차

SoJuSo·2023년 11월 20일

TIL 국비지원교육 코딩부트캠프 프로그래머스 데브코스 프론트엔드 데브코스

2023.09 ~ 2024.01 TIL

목록 보기

48/105

📚금일 학습 내용 Vue

Vue.js 기초, 새로운 팀원들, CSS는 늘 어렵다 특히 모바일...

🏫데브코스

📌VUE

뷰2 -> 뷰3로 넘어가는 과도기를 겪고 있는 뷰이다. view(레이아웃을 처리하는 용도) 레이어에 초점을 맞춘 라이브러리로 기존 프로젝트와 통합이 쉬운 장점이 있다고 한다.

이중 중괄호 구문 {{ variable }}이랑 반응형 데이터의 개념이 매우 중요했다. 그리고 v 로 시작되는 디렉티브의 개념이 신박했다.

디렉티브 이름	역할
v-if	if문과 같다 true,false값에 따라 화면에 표시한다.
v-for	지정한 뷰 데이터의 개수만큼 반복하여 출력
v-show	css의 display:none 으로 속성을 준다. if문의 경우 태그를 완전삭제함.
v-bind	vue 데이터속성과 html태그 기본속성을 연결해줌
v-on	화면요소의 이벤트를 감지하여 처리 할 때 사용함
v-once	일회성 보간을 위한 키워드. 값이 추후에 변경되지 않는다.
v-html	저장된 HTML 코드를 화면에 출력할 수 있음. XSS 공격에 취약하다.
v-model	form에서 주로 사용되는 속성. form태그에 입력한 값을 vue인스턴스의 데이터와 동기화함. 화면에 입력된 값을 서버로 보낼때 사용. `<input>, <select>, <textarea>`태그에만 사용 가능함.

v-bind: ⇒ : 으로 단축 가능! <div :id="dynamicId"></div> << 요렇게
v-on: ⇒ @ 으로 단축 가능!

참고한 사이트 주소

📌어떻게 사용하는 걸까?

이번에 실습 코드가 많으므로 사용 방법 요약은 대표적인 코드 하나에 주석으로 정리

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!--아래 코드에서 VUE를 CDN으로 불러와서 빠르고 간단히 사용할 수 있다.-->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <style>
      .active {
        color: red;
      }
    </style>
    <div id="app">
      <h1 v-bind:class="name">Hello Vue!</h1>
      <input type="text" value="Hello Vue!" v-bind:disabled="disabled" />
      <h1>{{ count + 2 }}</h1>
    </div>
    <script>
      const App = {
      // 함수로 만들지 않으면 문제가 생긴다.
      // 어디서든지 사용된다.
      // data: {
      //   count: 0,
      // },
      // 데이터는 함수 형태로 선언해야 한다.
      // 왜 함수로 만드느냐? App이 컴포넌트이다. 컴포넌트는 재사용이 가능하다!
      // 재사용이 굉장히 중요하기 때문에 데이터를 반환 가능하도록 만들어야하기에
      // 데이터는 함수 안에서 리턴 키워드 형식으로 선언해야한다!
        data() {
          return {
            name: "active",
            disabled: true, // null, {} 이런것도 적용 가능..
            count: 0,
          };
        },
      // 아래와 같이 메서드도 사용할 수 있는데 methods << s 필수!!
      // 메서드를 만들때 화살표 함수 X, 일반함수로 정의해야한다.
      // 일반함수에서의 this는 실행(호출)되는 위치에서 지정된다.
      // 화살표 함수에서는 선언되는 부분에서 지정되기에 이 경우에 일반함수를 사용하면
      // App 객체의 this가 아닌 setInterval의 this를 참조하기 때문에 제대로 동작하지 않는다.
      // 하지만 그 안에서는 화살표 함수 사용 가능~ 그리고 : function << 키워드 생략가능
        methods: {
          increase() {
            this.counter += 1;
          },
        },
      };
      // Vue.createApp(App).mount("#vue"); // 이렇게 재활용 가능!
      const vm = Vue.createApp(App).mount("#app");
    </script>
  </body>
</html>

📌라이프 사이클

Vue의 라이프사이클은 위와 같고, 이는 개발할 때 중요히 생각해야 하는 부분이다. 특히 코드를 실행하는 분기점 마다 그 특성이 있는데 우선 각 분기점을 정리하자면 아래와 같다.

애플리케이션 생성 전: beforeCreate(), 생성 후: created()
DOM과 연결 직전: beforeMount(), DOM 연결 직후: mounted()

특히 JS를 조작할 수 있는 created() 에서와 HTML 태그를 사용할 수 있는 mounted() 에서 많은 상호작용을 진행한다.

이외에도 업데이트 상태를 감지하는 부분이나 마운트 해제하는 부분에서도 코드 동작을 고려할 수 있다.

화면 업데이트 전: beforeUpdate(), 화면 업데이트 후: updated()

beforeUpdate()에서 의문이 있는데 아래 2개의 값이 다르게 나온다. 왜일까?
console.log(document.querySelector("h1"));
console.log(document.querySelector("h1").textContent);

화면 언마운트 전: beforeUnmount(), 화면 언마운트 후 : unmounted()

📌프록시

자바스크립트에서 사용해보지 않았었던 문법인데 VUE를 이해하기 위해서 필요한 문법이라고 한다.
예전에 구조체를 다룰 때 썼던 setter, getter 그런 느낌이랑 비슷한데 VUE의 다른 코드 구조랑 무엇이 다른지 잘 모르겠다. 시간나면 MDN을 읽어보도록 하자.

🖐️k-age-calculator

원래 방학때 완성해버리려고 했는데 인생은 항상 뜻대로 되지 않는다. 천천히 잔잔하게 완성하고자한다. 어차피 한동안은 파일 구조랑 폴더 구조를 지속적으로 바꿔야 할 것 같다.

일단 오늘 CSS를 일차적으로 완성시켰다. 생각보다 마음에 들어서 좋아했는데....

어림도 없지 모바일은 다시해라!! 이건 내일 고쳐야겠다.

😀새로운 팀

새로운 팀! 새로운 사람을 만나는 것은 즐거운 일이다. 식견을 넓힐 수 있는 기회이자 새로운 동료를 만들어 갈 수 있기 때문이다! 때로는 에너지 레벨의 부재로.. 소심한 행동이 나오는 데 오늘은 오전에 마신 커피로 컨디션을 강제로 올려서 나름 재미있게 이야기 할 수 있었다!

새로운 팀원분들도 좋아보이고 나와 같이 성장에 큰 관심이 있어보이셔서 기분이 좋았다. 같은 목표를 가진 사람들이라면 더 좋은 시너지를 낼 수 있으니까 말이다. 서로 어깨동무 하고 가기로 했는데 앞으로가 많이 기대된다😀😀