[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;
    },
  },
});