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

scss 재활용

선언 @mixin 값{

@content // 추가적인값 

} 

사용 @include 값

scss for문 활용

scss 색상내장함수

rgba(색상,투명도)

mix(색상1,색상2) //색상1,색상2 섞기

lighten(색상,밝기)

darken(색상,어둡기)

saturate(색상,채도)

desaturate(색상,채도감소도)

grayscale(색상) //회색화

invert(색상) //반전

정규표현식

// 생성자방식

new RegExp('표현','옵션')

new RegExp('[a-z]','gi')

// 리터럴방식

/표현/옵션

/[a-z]/gi

옵션 g = 조건에 맞는 모든것들을 배열로 집어넣어준다.

옵션 i - 대소문자 구분을 하지 않고 모두 검색한다.

옵션 m - 문단이 끝나는 부분마다 검사할 수 있게 해준다.

외부함수가져오기

[이름이 없는 함수 - 외부로 한개만 보낼수있음]

내부 : import 함수이름 from './외부함수위치' //함수이름 변경가능

외부: export default function 함수이름 ( ) { ~ } //함수이름 생략가능

[이름이 있는 함수 - 외부로 여러개를 보낼수 있음]

내부 : import {함수이름} from './외부함수위치' 

내부한번에 가져오기 : import * as 받을 아무 함수명 from './외부함수위치'

외부 : export function 함수이름 ( ) { ~ }

lodash 메소드

_.uniqu

요소의 중복된 값을 제거한다.

_.uniqBy(적용할요소, '중복제거할값')

_.uniqBy(user,'name')

_.uniqBy(합칠요소1,합칠요소2,'중복제거할값')

_.unionBy(user,user2,'name')

(user, {name:'park')

user배열안에 name이 'park'인 배열요소를~ ▼

._find(찾을배열, {요소}) //찾을 요소 전체

._findIndex(찾을배열, {요소}) //찾을요소 번호

_.remove(적용배열, {제거할 요소})

JSON

json은 문자데이터이나 자바스크립트로 import하면 객체데이터 처럼 사용된다.

json의 문자데이터로 바꿀시 JSON.stringify(객체요소) 를 하면 json형식의 문자데이터로 바뀐다.

json의 문자데이터 형식인것을 자바스크립트의 객체 형식으로 바꾸기위해 JSON.parse(json문자데이터요소) 를 한다.

Storage

storage에는 key의 값인 value는 jason형태로 저장된다.

setItem 스토리지에 키,값 저장

getItem 스토리지에 저장된 값 가져오기

axios

json문자열로 된 웹페이지문서를 console로 가져와 정리하기

axios 선언 : import axios from 'axios'

배열 메소드는 [ ] . 메소드 를 바로 쓸수있으나

객체 메소드는 Const 새 객체 = Object . 메소드 (기존 객체들) 로 Object를 써야한다.

Object.assign() 값을 합칠때 // 합치고나면 합침을 당한 앞 객체는 값이 덮어쓰여짐

Object.keys() 값의 key값만 배열로만듬

user['email'] // 객체['key이름']

객체데이터도 인덱싱을 할수 있다

구조분해

전개연산자는 배열이름을 표현할때 ... 을 같이 .을 3개찍는다

function에서 (매개변수)를 받을때 매개변수에 ...을 붙일시 나머지 매개변수를 모두받는 rest parameter가 된다.

데이터불변성

원시데이터(string,number 등)는 바라보는 메모리위치가 값이 같으면 한곳에 위치하고 복사해버려도 두값이 같은곳에 위치한다.

참조형데이터(object,array 등)은 값이 같아도 바라보는 위치가 다르며 값을 복사하면 위치가 같아지고 같은공간에 있는 값중 하나만 바꿔도 안에 모든값이 같이 바뀐다.

객체데이터의 서로간 영향없이 새 메모리에 복사하는법

1. Object.assign({ }, 복사할객체) 사용

2. { ...복사할객체} 전개방식으로 { } 사용

배열이나 객체안에 다른 참조데이터가 없을시

복사시에는 위 방식대로 Object.assign 이나 ... 으로 { }를 사용해서 얉은복사를 할수있으나

배열이나 객체안에 또 다른 참조데이터가 있을시. 아래처럼 깊은 복사를 하여야한다.

깊은복사 :  loadsh의 _.clonedeep(객체) : 모든추가되는 요소들도 다 서로 영향없이 따로 새 메모리에 복사됨.

배열 메소드

concat 은 배열간에 합쳐서 하나의 배열로 출력한다.

numbers.concat(fruits)

forEach는 반환하는 값이 없고

map은 forEach처럼 요소별로 한번씩돌아가면서 return을 통해 특정값을 반환하므로 저장 할 수 있다. 

filter는 map처럼 return되는 값중에 true인 값의 요소들을 배열로 저장한다.

find ~ test 는 요소에서 test앞 조건에 만족하는 요소를 찾아 단어로 나타낸다.

findIndex ~ test는 요소에서 test앞 조건에 만족하는 요소의 번호(zero베이스)를 찾아 번호로 저장한다.

배열.push(값) 은 배열 가장 뒤에 요소를 추가한다.

배열.unshift(값) 은 배열에서 가장 앞에 요소를 추가한다.

배열.reverse( ) 은 배열의 순서를 반대로 뒤집는다.

배열.splice(인덱스번호, 지울갯수, 추가할값) 는 인덱스번호기준부터 지울갯수만큼 지우고 값을 추가하라.

const int = parseInt(str) // parseInt 는 number 정수 로 타입을 바꿔준다.  

constfloat = parseFloat(str) // parseFloat는 number 소수로 타입을 바꿔준다.

함수의 종류

1. 표현형

const exam = function(a){

console.log(a*2)

}

exam(1)

1.1 선언형-호이스팅가능

function exam(a){

console.log(a*2)

}

exam(1)

2. 화살표형

const exam = a => a*2

console.log(exam(1))

// => 으로 리턴할시 {return ~}은 그냥 생략가능하나 return하는 값이 { } 인 객체형일시 ({ ~ }) 을 써야한다.

3. 즉시실행

const a=1;

(function ( ) {

console.log(a)

})( )