20 04 회고 - ChoDragon9/posts GitHub Wiki

input[type=file] 공통 컴포넌트화 필요

input[type=file] 기능의 공통적인 동작이 있다. 파일 업로드 후 동일한 파일도 다시 업로그 가능해야 한다. 그런데 value를 리셋해주지 않아 중복적으로 수정하는 케이스가 발생했다. input[type=file]도 컴포넌트화를 통해 중복을 해결 할 필요가 있다고 느꼈다.

마크업 개발자의 비활성화 버튼 처리

Kakao for Business 서비스에서 마크업 개발자가 비활성화 버튼을 <span>으로 만들었다. 굉장히 좋은 아이디어다.

좋다고 생각하는 점

<button disabled> 형태라면 개발자 툴에서 제거 후 버튼을 클릭 할 수 있다. 하지만 <span> 이기 때문에 이 동작 또한 방어가 된다.

IE 대응 시, Cache-Control 설정

IE는 GET Method의 REST API를 캐싱한다. 그래서 Response Header에 Cache-Control: no-cache가 필요하다.

초기 백엔드 담당자분들과 협의가 부족하다.

백엔드 담당자가 필요로 하는 프런트 기능을 우선적으로 식별하고 대응하는 데 있어서 후반에 알게 되는 듯하다. 초반에 논의가 된다면 원활할 거라고 생각한다.

컴포넌트의 탬플릿에 작성된 함수명 Refactor 기능 안됨

<script>에 작성된 함수명을 IDE의 Refactor 기능으로 변경시, <template>에서 변경안됨

Vue 컴포넌트 이름

Vue 컴포넌트는 이름이 없기 때문에 IDE의 자동완성을 지원하지 않는 다.

첫번째 해결 방법. index.ts를 만든다.

index.ts를 만들어서 컴포넌트들의 이름을 지어주면 IDE의 자동완성을 지원할 수 있다.

import MyComponent from './my-component.vue'
export {MyComponent}

두번째 해결 방법. Dynamic Import 기능을 사용한다.

첫번째 방법을 사용하면, 경우에 따라 you register the component correctly? For recursive components, make sure to provide the "name" option. 에러가 발생한다. 그렇기 때문에 import 순서를 신경써줘야 한다.

하지만 Dynamic Import 기능을 사용하면 순서상에 이슈가 발생하지 않는다.

https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components

const MyComponent = () => import('./my-component.vue');
export {MyComponent}

컴포넌트 Input/Output 정의

용어정의

  • Input: 컴포넌트 사용측에서 대상 컴포넌트에 주입할 값
  • Output: 대상 컴포넌트에서 컴포넌트 사용측에 전달할 값

Vue 컴포넌트는 Input 역할을 하는 Props는 설정 레벨로 정의한다. 하지만 Emit는 설정 레벨로 정의되지 않고, 필요할 때 함수를 호출하는 형태로 구성된다. 컴포넌트의 스팩을 쉽게 파악하기 위해서는 해당 기능이 필요하다고 생각한다.

Composition API의 경우 최상단에 추가되면 쉽게 파악 가능할거라 생각한다.

setup (props: Props, context) {
  const emit = {
    change: state => context.emit('change', {...state.surveyForm}),
    changeImage: file => context.emit('change-image', file),
  };

컴포넌트 함수별 역할 분리

컴포넌트에 정의되는 함수의 역할은 상태변경, 이벤트 리스너, 헬퍼 함수가 있다. 각 함수는 같은 레벨로 정의하기 때문에 시각적 구분이 잘안된다고 생각한다. Vuex의 네이밍을 따라서 상태변경은 mutation, 이벤트 리스너는 action으로 정의되면 어떨가 생각해봤다.

setup(Composition API) 함수에서 함수 추가 시 번거로움

setup 함수 내부에 함수 추가 후 <template>에 사용하려면 할당 반환값에 추가가 필요하다. 객체에 담아 전달하면 번거로움과 반환값을 간소화 가능하다고 생각한다.

// AS IS
setup() {
  const state = {}
  const onChange = () => {}
  const onClick = () => {}
  return {state, onChange, onClick}
}

// TO BE
setup() {
  const state = {}
  const actions = {
    onChange: () => {},
    onClick: () => {}
  }
  return {state, actions}
}

Mock On/Off

2014년도에 진행한 프로젝트인 PnP 2.0 하이브리드 앱 개발을 했다. 앱을 시연하거나 전시할 때 사용하기 위해서 목업 데이터로만 동작될 수 있는 기능이 있었다. 단순히 목업 플래그를 true/false로 on/off 할 수 있었다.

프런트와 백엔드는 계약된 인터페이스로 동작을 한다. 여기서 프런트 동작을 꼭 네트워크 통신을 통해서만 확인할 필요가 없다고 생각한다. 단순히 on/off로 프런트 동작을 확인 가능하다면 좀 더 많은 시나리오를 재현 가능하다고 생각한다.

⚠️ **GitHub.com Fallback** ⚠️