근처여행자

일반 html 

<img src="/img/..." onerror="imgError(this)"/>


// javascript
function imgError(imgTag){
imgTag.onerror="";
    imgTag.src="/img/noname.jpg";
    return true;
}

Vue 

1. <img> Tag

  <img
    v-if="item.imgSrc != null"
    :src="item.imgSrc"
    :alt="item.imgAlt"
    @error="$event.target.src=require('@/assets/img/no-Img.jpg')"
  />
  <img
    v-else
    :src="require('@/assets/img/no-Img.jpg')"
    :alt="item.imgAlt"
  />

 @error="$event.target.src=require('@/assets/img/no-Img.jpg')"

2. CSS background-image

<div 
   :style="{
          'background-image': 'url(' + item.imgSrc + '),url('+require(`@/assets/img/no-Img.jpg`) +')',
        }"
>
</div>

background-image:url(이미지),url(에러이미지) 로 설정할 수있다. 

style을 적용할때 image url이 css파일쪽에 위치하는지 인라인 방식인가에 따라 asset의 경로가 달라집니다.

1. img 태그 사용. src로 호출

<div class="item"><img src="../assets/img/help/01.jpg" alt="화면 1"></div>
<div class="item"><img src="../assets/img/help/02.jpg" alt="화면 2"></div>
<div class="item"><img src="../assets/img/help/03.jpg" alt="화면 3"></div>

RequestURL : http://localhost:8081/dist/assets/images/01.jpg?

자동으로 dist 하위로 수정되어 요청됩니다

2. div의 인라인(Inline style) 방식으로 backgroundImage 호출하기

- 인라인 방식 : 태그에 직접 사용하는 방식이며 style 속성을 함께 사용합니다

<div
   class="item"
   v-bind:style="{
     backgroundImage:
        'url(' + require('../assets/img/help/01.jpg') + ')',
         backgroundRepeat: 'no-repeat',
         backgroundPosition: 'center center',
         backgroundSize: 'contain',
     }"
>
  <span class="bg_clip">이미지</span>
</div>


//background:url("../assets/img/help/01.jpg") no-repeat center center;background-size:contain;

RequestURL : http://localhost:8081/dist/assets/images/01.jpg?

* vue에서 인라인 방식을 사용하기 위해서는 v-bind 로 style 을 적용해야하며 사용하고자하는 css의 style 명칭 확인하고 적용해야합니다

* url 호출을 위해 require 적용해야합니다

3. CSS 파일에서 적용할때 

.img1 {background:url(../img/help/01.jpg) no-repeat center center;background-size:contain; }
.img2 {background:url(../img/help/02.jpg) no-repeat center center;background-size:contain; }
.img3 {background:url(../img/help/03.jpg) no-repeat center center;background-size:contain; }

RequestURL : http://localhost:8081/dist/assets/images/01.jpg?

css폴더와 img 폴더의 경로가 /assets 하위일 경우

4. Vue파일의 <style> 로 적용할때

<style scoped>
.img1 {background:url("../assets/img/help/01.jpg") no-repeat center center;background-size:contain; }
.img2 {background:url("../assets/img/help/02.jpg") no-repeat center center;background-size:contain; }
.img3 {background:url("../assets/img/help/03.jpg") no-repeat center center;background-size:contain; }
</style>

RequestURL : http://localhost:8081/dist/assets/images/01.jpg?

기타

stackoverflow.com/questions/35242272/vue-js-data-bind-style-backgroundimage-not-working#

*  [인프런] 견고한 js 소프트웨어 만들기 강의 정리입니다.

단위테스트

개별적인 코드 단위가 특정 조건에서 어떻게 작동해야 하는지 정의. (함수)

-단계

1. 준비(arrange) : 인풋을 준비하는 단계

2. 실행(act) : 인풋을 전달해서 함수를 실행하는 단계

3. 단언(assert) : 결과를 검증하는 단계.

테스트 주도개발의 패턴

적색(Red)-녹색(Green)-리팩터(Refactor) 사이클

1. Red : 실패하는 테스트 코드를 만드는 단계

2. Green : 기능코드를 작성. 테스트 통과 목적

3. Refactor : 추상화, 확장가능, 중복제거의 리펙터 과정을 거침.

 * 함수당 하나의 기능이 테스트하기 쉬움

구축방식

1. standalone 방식 : 모든 자스민 코드를 브라우저에 올려서 실행하는 방법. 실행결과를 간단하게 확인 가능하지만, 실무에서 거의 사용하지 않음

2. 카르마 Karma+ 자스민 (자동화) : 실무에서 주로 사용함.(카르마 서버가 테스팅 환경을 제공하면 자스민 테스팅 프레임워크가 동작)

자스민 프레임웍
* 자스민은 피보탈 랩스에서 만든 BDD(Behavior Driven Development) 프레임웍크로서 자동화된 단위 테스트 도구
* 단위 테스트(unit test)란?  코드의 기능 단위(funtionality unit)를 테스트 하는 것을 말한다
     - 무엇이 기능인가? 결정하기 쉽지 않음
     - TDD를 다른 관점에서 바라본 BDD라는 해결책을 제시

* BDD
    - 유저 스토리 개념을 끌어들인 테스트 작성법
    - 예를 들어 어떤 버튼을 클릭하면 경고 창을 띄우는 유저 스토리를 생각해 보자
Given: 초기 상황
When: 어떤 이벤트가 발생
Then: 후속 결과를 기대

 - 테스트 단위를 스팩(spec)이라고 함 

 - 자스민에서는 it 함수로 만든다 

테스트 꾸러미 (Test Suite) 
describe('테스트 설명', 테스트 구현 함수) 

테스트 스펙 (Test Spec) 
it('테스트 설명', 기대식을 가진 테스트 구현 함수) 

기대식과 매쳐 
expect(결과 값).toBe(기대하는 값) 

스파이 
spyOn(감시할 객체, 감시할 메소드) 

테스트 할수 있는 코드

1. 코드를 UI에서 완전히 분리

- HTML에서 js 코드를 떼어내면 비즈니스 로직만 테스트 할 수 있다.

2. 자바스크립트를 별도 파일로 분리

-다른 곳에서도 재사용 할 수 있고 테스트성도 좋아짐

모듈 패턴 

패턴 : 자주 쓰는 방식

모듈패턴이란 

함수로 데이터를 감추고, 모듈 API를 담고 있는 객체를 반환하는 형태

(자바스크립트에서 가장 많이 사용되는 패턴)

1. 임의 함수를 호출하여 생성하는 모듈

2. 즉시 실행 함수(IIFE) 기반의 모듈

모듈 생성 원칙

1. 단일 책임 원칙에 따라 모듈은 한 가지 역할만 한다.

그 역할만 집중함으로서 모듈은 더욱 튼튼하게 만든다. 테스트 하기도 쉽다

2. 모듈 자신이 사용할 객체가 있다면 의존성 주입 형태로 제공한다

또는 팩토리 주입형태로 제공한다. 테스트 하기도 쉽다.

* DRY 원칙 지키기 ( 중복코드를 제거한 코드- Don't Repeat Yourself)

* 리팩토링

** SOLID 하고 DRY한 코드를 만들자

자주 사용되는 테스팅 용어

• describe()

  - 단위 테스트 명세 집합

• it()

  - 단위 테스트를 위한 함수

   

• 매처함수

  - expect(variable).toBe(true);

  - expect(variable).not.toBe(true);

  - expect(variable).toEqual(b);

  - expect(stringA).toMatch(/stringB/);

  - expect(stringA).not.toMatch(/stringB/);

  - expect(object.foo).toBeDefined();

  - expect(variable).toBeNull();

  - expect(a).toContain("b"); // 배열변수 a에 "b"라는 요소가 포함돼 있는지

  - expect(a).toBeGreaterThan(b); // a 변수 값이 b 변수보다 큰지

   

• beforeEach()

  - 각각 it()함수가 시작되기 전에 실행

   

• afterEach()

  - 각각 it()함수가 시작된 후에 실행

   

• beforeAll()

  - it()함수가 시작되기 전에 한번만 실행

   

• afterAll()

  - it()함수가 시작된 후에 한번만 실행