2022.01.06

ginameee·2022년 1월 6일
0

[IOS12] 의도치않은 하단바가 뜨는 이슈

<input type="text" readonly />이더라도 IOS12에서는 키패드가 없는 하단바가 생성이된다.

이를 막기위해선 onfocus="this.blur();" 를 추가하여 focusing 되는 즉시 blur가 되도록 하자. (꼼수)

git Conlfict시 브랜치 생성을 통한 해결방법

master에 feature브랜치를 merge할 때 conflict이 날 수 있다.
이떄 해결할 수 있는 방법이다.

  1. feature/EXAMPLE-01 -> PR -> develop 생성
  2. 충돌 발생
  3. 1번 PR은 그대로 유지
  4. feature/EXAMPLE-01 -> conflict/EXAMPLE-01 브랜치 생성
  5. develop -> merge -> conflict/EXAMPLE-01 충돌 해결
  6. conflict/EXAMPLE-01 -> PR -> develop 생성
  7. conflict 브랜치가 Merge되고 나면 feature 브랜치도 자동으로 Merge됨
  8. conflict 브랜치는 삭제

[Vue3] 반응형은 깨진다!

반응형으로 생성된 객체를 함부로 교체하지말자.
한번 꼬이기 시작하면 어디서 반응형이 동작안하는지 디버깅하기가 어렵다.

  • computed는 Proxy객체를 return 한다.
  • hook은 Proxy객체를 return 한다.
  • pinia의 state는 최하위 프로퍼티까지 중첩된 Proxy를 return 한다.

나의 경우 state의 data 프로퍼티를 일반 api response로 교체해버리면서 반응형이 깨져버렸다.

const useCatalogState = defineStore('catalog', {
  state: (): ICatalogState => ({
    data: {
      catalog: {},
      prodList: null,
      attributeInfo: {
        generalAttributeList: [],
        groupAttributeList: [],
      },
      lowestList: [],
    },
    params: {
      freeShip: false,
    }
  }),
  getters: {},
  actions: {
    async fetchData(params: IGetCatalogProdInfoApiParams) {
      // < state.data의 반응형이 깨져버린(혹은 벗겨진) 코드 >
      
      const { data }: = await getCatalogProdInfo(params);
      
      // Proxy 였던 this.data가 일반 Object로 바뀐다.
      // data는 컴포넌트단에서 변경하더라도 반응형으로 동작하지 않게된다.
	  this.data = data; 
      

      // < state.data의 반응형이 유지되는 코드 >
      const {
        data: { catalog, prodLists, attributeInfo, lowestList },
      } = await getCatalogProdInfo(params);
      
      this.data.catalog = catalog ?? {};
      this.data.prodList = prodLists?.prodList ?? null;
      this.data.attributeInfo = attributeInfo;
      this.data.lowestList = lowestList;
    },
  },
});
profile
오늘 먹은 음식도 기억이 안납니다. 그래서 모든걸 기록합니다.

0개의 댓글