FRONT-END

mount vs shallowMount

Header.vue 테스트

*beforeEach메소드를 통해 테스트1이 종료된 후 오염된 기본값을 다시 초기화 해주도록 설정 할 수 있다.

비동기로 미리 res를 만들어 promise가 처리될시 resolve가 반환되는데 내부 값을 res로 주어 미리 선언한 res가 나오게 된다.

promise~resolve를 쓰지 않고 mock처럼 가짜함수를 만들어 처리하면 로직이 쉬워진다.

vue를 위한 jest위주 테스트 설치

npm i -D jest @vue/test-utils@next vue-jest@next babel-jest

jest.config.js 구성

jest의 test()를 사용하기 이해 eslint에서 설정을 해준다.

테스트할 함수 작성

package.json에서 스크립트 선언

"test:unit":"jest --watchAll" // watchAll은 jest가  테스트 변경사항에도 지속적으로 감지하도록 설정

describe('그룹1',()=>{ test() 모음 }) //여러 test()들을 그룹화 시킴

* 객체데이터나 배열같은 참조형 데이터를 비교할때는 toBe가 아닌 toEqual를 쓴다.

* 테스트 대기시간 기본값은 5000ms이다.

비동기 테스트

비동기 모의함수

vue/test-utils (VTU)

https://next.vue-test-utils.vuejs.org/api/#html

html - 자바스크립트 환경에서는 import / exports 를 사용

node.js - 자바스크립트 환경에서는 require / exports 사용

*서버리스함수에서 데이터가 객체로 전달 될 시 JSON.stringify를 사용한다.

*서버리스는 가져올때 body부분의 데이터를 문자로 가지고 있지만 사용할때 JSON.parse를 통해 객체로 만들어야한다.

환경변수 설정으로 중요한 키는 .env에서 관리하기

1. npm i -D dotenv-webpack 설치

2. webpack.config.js에서 import 및 plugin 선언

3. .env 파일 생성

API_KEY=7035c60c

4. API_KEY가 선언되있는곳에 .env의 API_KEY를 불러오기

5. .gitignore에 .env 선언 (*선언할시 netlify에서는 업로드가 없는걸로 되니 별도로 netlify웹에서 환경변수선언해야함)

RouterView 라우터로 연결된 실제 동작할 부분을 보여준다

RouterLink a태그처럼 누르면 라우터로 연결된 ./route로 이동시킨다.

Route는 fullPath나 param같은 요소들이 있다

Router는 push같은 메소드들이 들어있다.

netlify-CLI 서버리스함수로 API관리구조

[설정]

1. netlify.toml 생성

[build]
  functions = 'functions' //function 디렉토리를 서버리스 함수 폴더로 지정

2. functions 폴더 생성

3. functions 폴더 내부 서버리스 함수 hello.js 생성

exports.handler = async function(event,context){

  return{

    statusCode:200,

    body: JSON.stringify({

      name:'HEROPY',

      age:25,

      email:'sadad@naver.com'

    })

  }

}

netlify.toml 설정

netlify-cli 설정 및 작동

1. npm i -D netlify-cli 설치

2. package.json 내부 

"dev:netlify" : "netlify dev" 선언

3. npm run dev:netlify 작동

*작동시 개발서버에서 8080포트로 개발되어 netlify에서는 8888포트로 연결된다.

http://localhost:8888/.netlify/functions/hello 해당 주소에 접속하면 hello.js에서 json수정한 객체가 보이게 된다.

main.scss 전역에서 가져와서 사용하기

vuex의 mapState로 this.$store.state.모듈.값 을 한번에 처리하기

about.js export default {   namespaced:true,   state:()=>({     name: '****',     email:'wnsdud****@naver.com',     blog:'https://naver.com',     phone:'+82-10-****-****',     image:'https://heropy.blog/css/images/logo.png'   }) }

페이지 이동간 스크롤 복귀

메인 페이지로 이동시 검색 정보를 초기화

page404 route 연결 및 omponents에 NotFound.vue만들기

RouterLink to="./about" 대신 @click="메소드"로 연결

뷰포트 크기 대비 크고 작을시 내부 요소 변경

정규표현식 /movie로 시작하는 경로를 일치시킨다.

path:/^\/movie/

정규표현식 true와 false로 test( ) 하기

이미지 로드 아이콘 생성

고해상도 이미지변경 methods

클래스 바인딩을 통해 특정 값에 의해 class가 추가되는것을 설정할 수 있다.

삼항 연산자

movie/tt123123 등 영화상세정보페이지 만들기

props 연결 구조

white-space:nowrap; //내부 콘텐츠(글자)에 따라 아래로 height가 늘어나지않고 옆으로 콘텐츠가 나열됨

overflow: hidden; //부모요소에서 튀어나가는 콘텐츠들을 잘라냄

text-overflow: ellipsis; //잘려나간 콘텐츠를 ...으로 이어진다는 표현으로 나타냄

backdrop-filter: blur(10px); // 뒷 영역의 모자이크처리를 한다.

backdrop-filter: grayscale(); // 뒷 영역을 흑백처리함