프론트엔드 데브코스 WIL #DAY45~49

에구마·2023년 11월 26일

프론트엔드 데브코스 기록

목록 보기

35/47

1️⃣0️⃣주차 23.11.20 ~ 23.11.26

✅ 이번주 목표

매일 코테 1+ 풀기 ✅

Vue 기술 정리 하기 ✅

🤨 이번주 배운 것들

Vue 문법
디렉티브
Vue 옵션
- 상태 - data, methods, computed, watch, props, emits
- 렌더링 - template, slots
- 생명주기
- 컴포지션 - mixin, provide, inject
컴포넌트 인스턴스

클래스 속성 값 객체를 computed

<div id="app">
  <button @click="toggle">Toggle</button>
  <h1 :class="classObject" class="title">{{msg}}</h1>
</div>
<script>
  const App = {
    data() {
      return {
        msg: "Hello Vue",
        active: false,
        small: true,
        classObject: {
          active: false,
          "title--small color--orange ": true,
        },
      };
    },
    methods: {
      toggle() {
        this.active = !this.active; 
      },
    },

위와 같은 코드일때, [Toggle] 버튼을 눌러도 < h1 >에 'active' 클래스가 생기진 않는다.
왜? classObject.active를 바꾸지 못했으니까!
왜? toggle()이 바꾸는건 this.active니까!

여기서 나의 풀이

computed: {
 classObject() { //
   return {
     active: this.active,
     "title--small color--orange ": this.small,
   };
 },
},

'toggle() 내에서 classObject의 active에 접근하는 방법도 되지 않을까?'

methods: {
   toggle() {
     this.classObject.active = !this.classObject.active;
   },
 },

원하는 작동인 active 클래스가 추가되는 것은 정상적으로 작동한다!
하지만, 이 코드와 강사님 코드가 다른 이유는 뭘까? 이 코드의 문제는 뭘까?
: 다른 코드에서 classObject내 멤버에 변경이 생기면 toggle()이 호출되지 않으면 변경되지 않을 것이다 -> 개발자도구로 접근하여 vm.active를 변경했을 때 반영되지 않았음!

"toggle() 메소드로 active 클래스를 지정하는 코드에서, classObject가 갱신되기 위해선 classObject는 계산된 데이터로 만들어져야 한다."

// 강사님 코드
const App = {
  data() {
    return {
      msg: "Hello Vue",
      active: false,
      small: true,
    };
  },
  computed: {
    classObject() { // classObject 객체를 계산하여 사용한다.
      return {
        active: this.active,
        "title--small color--orange ": this.small,
      };
    },
  },
  methods: {
    toggle() {
      this.active = !this.active; // 
    },
  },
};

객체안의 멤버 값을 바꾸는 로직보다는, 반응형 데이터인 active를 바꾸고, 바꾼 것을 인식하여 계산할 수 있는 computed 옵션을 사용하는 로직으로 구현하자!

(( 제 질문에 같이 고민해주신 프롱이분들 감사합니다앙 ))

✍️ 회고

WIL 시도 중

다시 이론강의가 되었고 내용이 소위말해 몰아쳤다. 하나하나 다 코드쳐보고 정리해보고 그걸 기록해보자니 시간이 몇배로 들었다. 이론을 달달 외우는게 중요한게 아니라 실제 개발을 할 때 꺼내올 지식으로 쌓아두어야 하는데 주객전도된 느낌이 들어서 과감히 포기해보았다. ~~매일 올리던 거 안올리는면 꽤나 마음에 걸리 J의 엄청난 도전..~~
WIL을 쓰고 있는 지금 돌아보니 좋은 시도였다 :) 부담이 줄었고 오히려 배운 기술을 잘게 나누어 정리해둘 수 있었다! 계속 진행시켜!

주절주절

TIL에 매일 적던 회고는 조금 방송용(?)이었다. 일기처럼 쓸 수 없으니 정제하고 글도 다듬었는데, 그러기엔 하고 싶은 말이 너무 많아서..
첫날부터 간헐적으로 하고 있던 매일 일기 쓰기를 다시 시작했다. 적다보니 꼭 쓸데 없는 말들은 아닌 것 같다란 생각이 들었다.
TMI.. 손으로 쓰고 싶어서 결국 다이어리 주문해버려따~

질문도 킵고잉

위에 적은 computed 관련해서 의문이 생겼고, 혼자 고민을 해보다가 다른 사람의 의견도 궁금했다. 아직 어색한 새로운 팀이지만 일단 보냈다! 역시 같이 고민하고 이거잖아요?저거잖아요? 이야기 하는 건 재밌어.. 부끄러워지더라도 의미있어ㅇㅇ.. 꼬리에 꼬리를 물다 또 궁금해져서 야근러들에게 2차질문.. 가설검증+검증반례 까지 마무리 ... 굿...

커피챗

새로운 멘토님과 커피챗을 진행했다. 그동안의 이런 멘토링/커피챗 중 제일 새로웠다. 현실이라면 현실, 전략이라면 전략이기도 한 말씀들에 많은 생각이 들었다. “다양한 파트를 많이 알려면 사람을 만나야 한다”는 말이 기억에 남는다. 조금 더 확장해서 생각해보자면, 데브코스에서 만날 수 있는 동료들이 많은데, 각자의 흥미, 잘하는 것만 들어봐도 백개는 넘겠지. 내가 혼자 백개를 파보는거보다 그들에게 이야기 하나씩 듣는게 훨씬 넓은 식견을 주지않을까!
궁극적으로 목표인 취업에 대해서도 어떤 자세로 어떤 전략으로 준비해봐야할지 날카로운 충고를 들을 수 있어서 좋았다!

나의.. 상태 관리

이슈다 이슈 비상비상
이번주의 제일 큰 이슈였다 싶은,,, ~~죽어버린~~ 소화능력.. 아침에 일어나자마자 더부룩하고 하루종일 안먹어도 불편하다... 원래도 나약한 위였지만 역대급을 갱신하면서 하루 패턴과 여러가지를 망친다. 진짜 너무 괴롭다 ㅠ ㅅ ㅠ 🏳️🏳️

그리구 조금의 방황ㅎ.. 매니저님도 딱 이쯤이 그럴때라고 하셨었는데,, 어째 피해가질 않는지^^.. 에너지 10을 쓰면서 할 수 있는 일에 20, 30을 쓰고 있는 것 같다. 그만큼 열정을 다한다는게 아니고 내 연료를 더 갈아 넣어야 정상 작동하는 느낌 … 그치만 정신 차려야지~