항해 플러스 프론트 1기 3주차 회고

기간 (2024 / 03.25 ~ 03.30)
작성 (2024 / 03.31)

1. 주요 이슈들

1) Proxy와 Object.defineProperty

• 문제 : Proxy / Object.defineProperty 의 차이점

• 시도 : 각각을 사용하여 과제 E 풀어봤으나 가독성 외에 큰 차이를 못느끼겠어서 질문해봄

• 해결 :

  • Proxy
    • 객체에 대해서 다룸
    • 원본을 건드리지 않음
    • 최신 브라우저 지원
      
      
  • Object.defineProperty
    • 객체의 프로퍼티에 대해서 다룸
    • 원본을 건드림
    • EI 브라우저 지원

• 알게된 것 : 각각에 대한 사용성은 그 상황에 따라 적절히 사용하길 권장한다.

2) commit을 통해서만 값을 변경해야 값의 변화를 전파

• 문제 : 과제F에서 store 클래스 내부 작성 시 state가 직접 수정됨
  과제 해설 확인 후 직접수정을 못하도록 해야되는 점 캐치함

• 시도 : 다른점 파악

  1. #state, #mutations, #actions를 클래스 내부 private로 변수 설정한다.
  2. constructor 안에서 state 객체 순회하며 복사한다.
  3. #mutations 안에 있는 함수를 사용하므로 별도의 inputA, inputB, calculator의 정의는 필요없다.
  4. commit 함수에서도 private 변수로 사용한다.

• 해결 : 이렇게 나와 해설이 달랐던 부분을 코드로 나타내면 다음과 같다.
  state를 직접적으로 수정하지 못하도록, commit을 통해서만 값을 변경해야 값의 변화를 전파할 수 있도록 state를 정의합니다.

export class Store {

  #state;
  #mutations;
  #actions;

  state = {};

  constructor({ state, mutations, actions }) {
    ...
    Object.keys(state).forEach(key => {
      Object.defineProperty(
        this.state,
        key,
        { get: () => this.#state[key] },
      )
    })
  }
 
  commit(action, payload) {
    this.#mutations[action](this.#state, payload);
  }
}

• 알게된 것 : 객체의 직접적인 변경에 대해 좀 더 신경을 써야겠다.

2.이번 목표 회고

잘된 것

• 과제 3개 전부 제출 (V)

안된 것

• 주말에 회고 쓰기 (X)
• 클로져, hook 관련 내용 블로그 정리해보기 (X)
  
  
  

3.다음 목표 설정

• 일요일 오전 일찍 회고 작성하기
  주말에 회고 쓰는 시간을 고정으로 만들어야겠다.
  생각보다 오후 ~ 저녁은 약속이 많이 생긴다.
• 공부한 내용 블로그 정리
  과제 함과 동시에 블로그 작성을 목표로 해보겠다.