개발노트

Nuxt 빌드 npm run build 웹팩으로 어플리케이션을 빌드후 js, css를 production용으로 축소 npm run generator 어플리케이션을 빌드하고 모든 경로를 HTML파일(정적 호스팅에 사용)으로 생성 1. 웹팩설정 analyze build:{ analyze: true, } analyze 옵션 배포전에 build 시에 true로 해서 각 용량 확인 각라이브러리 별로 트리쉐이킹 하는 방법이 다르므로 패키지네임 트리쉐이킹으로 검색해서 트리쉐이킹 진행하도록한다 extend 기존에 있는 웹팩 설정 확인하기 nuxt안에 webpack, babel 이 있는데, 설정한걸 바꾸고 싶을경우 바꾸는게 가능하고 extend(){} 라는 메서드를 사용해서 웹팩 설정확인하기 build: { extend..

1. 테스트코드 작성 목적과 의의 vue로 구현한 어플리케이션은 웹 브라우저에서 동작하며 UI가 있고 DOM을 조작한다. 단위테스트 역시 DOM상태변경 및 확인과정이 한데 섞인 코드가 될수밖에 없다. 예를들면 어떤 컴포넌트가 전역 DOM에 마운팅 상태에서 렌더링 됬다면, 이 DOM을 초기화 하기 위해 DOM 조작을 통해 전처리 및 후처리가 필요하다. 또 마운트 된 컴포넌트에 대해서도 DOM을 조작해서 DOM상태를 확인하는 코드를 작성해야 한다. (ex 로그인 폼 컴포넌트가 처음 마운팅될때 userId, password와 같은 상태값이 잘 초기화가 되어있는지 확인 등) 로그인 화면이아닌 테스트코드작성해서 유효성 검증 및 기능 검증을 예제코드로 진행할 예정이다. 1.Jest nuxt에 사용하기 1-1.의존성..

vue transition wrapper component -형태 - 감싸고 있는 컴포넌트의 애니메이션 처리를 맡는 컴포넌트 - vue에 미리 정의돈 클래스를 적용, 해제 하는 역할 - transition 컴포넌트는 (감싸고있는 컴포넌트)요소가 노출되거나 enter, 사라질때 leave 트랜지션을 추가해준다. 노출, 사라짐의 조건 v-if 평가값 변함 v-show 평가값 변함 동적 컴포넌트의 is 속성값이 변한 경우 (? 트랜지션 클래스 트랜지션 클래스는 transition 컴포넌트가 (감싸고 있는 컴포넌트)요소가 노출되거나 사라질때 여러가지 타이밍에 적용된다. v-enter -애니메이션 초기상태 요소가 생성되기 전에 부여 / 애니메이션 시작될때 제거되는 클래스 v-enter -애니메이션 종료상태 애니메..

보호되어 있는 글입니다.