161 프론트엔드 정리 1

source: categories/study/vue-experiance/vue-experiance_9-99_62.md

161 프론트엔드 정리 1

웹팩 (Webpack) 모듈 번들링 툴

(정리중..)

컴포넌트간 통신 기법

  1. 컴포넌트간 통신 기법을 지켜야하는 이유
    • 지키지 않아도 기능엔 문제가 없다.
    • 하지만 프로젝트 규모가 커질수록, 복잡도가 증가할 수록 데이터의 흐름을 파악하기 어려워 디버깅이 어려워진다.
    • 유지보수, 디버깅 용이성을 위해 통신 기법은 반드시 지키는 것이 좋다.
    1. 컴포넌트간 통신 기법
      • props & event emit
        • 상위 컴포넌트 -> 하위 컴포넌트 : props
        • 하위 컴포넌트 -> 상위 컴포넌트 : event emit
        • 단점 : 컴포넌트 계층이 깊어질수록 여러 단계를 거쳐서 통신해야되기 때문에 복잡해진다.
         <!-- 상위 컴포넌트 -->
 <template>
   <custom-component :props-data="'프롭스'"></custom-component>
 </template>
    
 <script>
     import CustomComponent from './CustomComponent';
     export default {
         components: {
             CustomComponent,
         }
     }
 </script>

                 
 <!-- 하위 컴포넌트 -->
 <template>
     <div>{{ propsData }}</div>
 </template>
    
 <script>
     export default {
         props: {
             propsData: {
                 type: String,
             }
         }
     }
 </script>
      • provide & inject
        • 상위 컴포넌트에서 provide로 하위 컴포넌트에 제공할 데이터를 명시한다.
        • 하위 컴포넌트에서 inject로 상위 컴포넌트에서 provide한 데이터를 받아올 수 있다.
        • 장점 : 계층이 깊던 안깊던 상관없이 상위 컴포넌트 데이터를 받아서 사용할 수 있다.

        • 단점 : 어느 상위 컴포넌트에서 provide한 데이터인지 파악하기 어려울 수도 있다.

           <!-- 상위 컴포넌트 -->
 <template>
     <div></div>
 </template>
    
 <script>
     export default {
         data() {
             return {
                 send: '전달',
             }
         },
         provide() {
             // computed 처럼 반응성(reactivity) 주입
             const obj = {};
             Object.defineProperty(obj, 'send', {
                 enumerable: true,
                 get: () => this.send,
             })
             return {
                 obj,
             }
         }
     }
 </script>

           <!-- 하위 컴포넌트 -->
 <template>
     <div></div>
 </template>
    
 <script>
     export default {
         inject: ['obj'],
     }
 </script>
      • store (vuex)
        • 데이터를 따로 보관해주는 라이브러리이다.
        • 상위 컴포넌트를 통해 데이터를 받아오는 것이 아니기 때문에 계층에 상관없이 바로 데이터를 store에서 받아서 사용할 수 있다.
        • 참고 URL : 링크

컴포넌트 라이프사이클

  1. new Vue(); 인스턴스 생성
  2. 이벤트 및 라이프사이클 초기화
  3. beforeCreate
  4. 화면에 반응성(reactivity) 주입
  5. created
  6. el, template 속성 확인
  7. template 속성 내용을 render 함수로 변환
  8. beforeMount
  9. vm.$el 생성 후 el 속성 값을 대입
  10. mounted
  11. 인스턴스를 화면에 부착
  12. 인스턴스의 데이터 변경
  13. beforeUpdate
  14. 화면 재랜더링 및 데이터 갱신
  15. updated
  16. 인스턴스 내용 갱신
  17. 인스턴스 접근 가능
  18. beforeDestroy
  19. 컴포넌트, 인스턴스, 디렉티브 등 모두 해제
  20. destroyed
  21. 인스턴스 소멸

http 통신 라이브러리

유효성 검사 방법

  • vee-validate 라이브러리 사용 링크
  • vue2 사용시 vee-validate 3점대 버전 사용
  • vue3 사용시 vee-validate 최신(4점대) 버전 사용

스토어 라이브러리

  • Vuex 링크
  • vue2 사용시 vuex 3점대 버전 사용
  • vue3 사용시 vuex 최신(4점대) 버전 사용

날짜 제어 라이브러리

유용한 데이터 가공 함수 및 함수형 프로그래밍 지원 라이브러리

  • lodash 링크 - CommonJS require 메소드로 작성된 라이브러리 - 트리쉐이킹 불가능
  • lodash-es (ES6 module 기법으로 작성된 lodash 라이브러리) - 트리쉐이킹 가능
  • lodash-es 라이브러리 사용 권장

프론트엔드 개발 절차

  1. 각자 담당한 부분 개발
  2. 커밋 후 Pull Request
  3. storybook UI 단위테스트 진행 (with ngrok)
  4. Jest (or Mocha) 테스트 코드 작성
  5. 개발자간 서로 리뷰 (댓글)
  6. 리뷰 후 수정사항 없으면 메인(master) 브랜치로 merge
  7. 수정사항 있으면 수정 후 메인(master) 브랜치로 merge

깃 풀리퀘스트

(정리예정)

스토리북(storybook) UI 단위 테스트 도구 (with ngrok)

(정리예정)

Jest 단위 테스트 도구

(정리예정)

카카오 로그인 처리

  1. 카카오톡 인앱 채널이라면, 카카오 로그인 처리 하기 전에 -> 해당 채널에 대한 전용 카카오 앱 키를 발행받아야 된다.
  2. 해당 채널이 등록되어있는 계정이 아마 있을 것이다.
    • 없으면 요청해야될 것이다.
  3. 자바스크립트 SDK 초기화 링크
    • 자바스크립트 앱 키 초기화 방법에 대해 설명되어있다.
    • 해당 채널이 등록되어있는 계정으로 로그인 후, 해당 채널에 대한 자바스크립트 앱 키를 발급받는다.

    위와 같이 발급받은 자바스크립트 키를 .env 파일에 명시한다.

.env 파일이란?

  • .env.developmentlocal

  • 보안상 외부 노출이 되면 안되는 것들을 명시하는 파일이다. (ex. key 값)

      VUE_APP_KEY_KAKAO=cfe0882ca22f7d42a35b759ca10c2639

  • 그리고 아래처럼 JavaScript에서 해당 Key를 불러와서 사용한다.

      const apiKey = process.env.VUE_APP_KEY_KAKAO;
  window.Kakao.init(apiKey);
  • 카카오 앱 키 초기화 링크
  • 카카오 채널 추가 항목 동의 받기 링크
  • 카카오 로그인 참고 코드 링크
  • 카카오 로그인 참고 코드2 링크

(정리중..)

고민해봐야될 문제

  1. 현재 API 호출 코드 정리 방식, (vuex, axios) 이대로 괜찮은지?
    1. vuex store 처리가 불필요한 API 호출들도 있지 않을까?
    2. 만약 그럴때 코드 공통화 방식은?
  2. 현재 로딩 컴포넌트 제어 방식, 이대로 괜찮은지?
    1. axios interceptor로 제어하는데, 사용성에 좋은 방법일까?
    2. axios interceptor로 제어 안한다면, 어떤식으로 제어하는게 좋을까? 코드 공통화 방법이 있을까?
  3. 현재 뒤로가기 제어 방식, 이대로 괜찮은지?
    1. axios interceptor로 제어하는데, 이대로 괜찮을지?
    2. 뒤로가기시 로딩 컴포넌트가 안떴으면 좋겠는데.. 안뜨게 하는게 맞는지 혹은 또다른 좋은 방법이 있는지
  4. 현재 코드 작성 방식 이대로 괜찮을까?
    1. 함수형 프로그래밍 도입 적극적으로 생각해봐야함
    2. 현재와 같은 명령, 선언형 프로그래밍은 프로젝트 규모가 커지고 복잡해짐에따라 디버깅이 너무 어려움
    3. 제너레이터, 이터레이터 적극 도입

앞으로 꾸준하게 추구해야될 프론트엔드 개발 스택

  1. 타입스크립트
    • 이번 어깨동무M 프로젝트 때 도입했지만 VUE2 한계도 있고 러닝 커브 문제도 있어 완벽하게 사용하진 못함
  2. Jest (or Mocha) 테스트 라이브러리 사용
  3. Vue 3
  4. 함수형 프로그래밍
  5. 제너레이터, 이터레이터
  6. Vite (모듈 번들링 툴 - 웹팩에 비해 속도가 많이 빠름)
  7. …

(정리중..)