YOON의 개발일지

Reduce() 함수

2021-02-21T05:00:00+00:00

Reduce

Reduce 함수는 배열을 순회하며 반환된 결과값을 누적시켜 하나의 결과 값을 반환해주는 함수이다.

const result = 배열.reduce(콜백함수(누적된 값, 요소, 인덱스, 배열객체), 누적된 값의 결과값);

예제를 보며 알아보자
아래는 숫자 배열 arr안의 요소들을 전부 더한 값을 출력하는 코드를 for문과 reduce로 작성한 것이다.

const arr = [1,2,3,4,5];

// For
let totFor = 0;
for(let i=0; i<arr.length; i++){
	totFor += arr[i];
}
console.log('totFor: ', totFor); // 15

// Reduce
let totRdc = arr.reduce((tot, val)=>{
    return tot + val;
}, 0);
console.log('totRdc: ', totRdc); // 15

for문을 사용하여 작성하려면 값을 중첩시킬 변수를 선언하고 length로 arr의 인덱스의 길이를 가져와야한다. 그리고 for문을 돌면서 arr[i]형태로 가져온 값을 선언한 변수에 중첩시킨다.
reduce를 사용하면 선언한 변수 안에 reduce를 넣고 누적 값을 가져오는 매개변수 tot에 요소 val를 더하는 코드를 반환하는 것으로 for문과 똑값은 결과 값을 가질수 있다.

또 다른 예제를 살펴보면 요소에 공통된 작업을 할때도 이용할 수 있다.

const arr = ['김**', '홍@@', '이oo'];

let totRdc = arr.reduce((tot, val, idx)=>{
    tot[idx] = '기호'+(idx+1)+'번 '+val+'입니다.';
    return tot;
}, []);
console.log('totRdc: ', totRdc[1]); // 기호2번 홍@@입니다.

이중 배열에서도 사용할 수 있다. 아래 arr에서 checked에 true한 사람의 이름만을 배열로 묶어보자.

const arr = [
    { name: '김**', checked: true },
    { name: '홍@@', checked: false },
    { name: '이oo', checked: true },
];

let totRdc = arr.reduce((tot, val)=>{
    if(val.checked === true){
        tot.push(val.name);
    }
    return tot;
}, []);
console.log('totRdc: ', totRdc[1]); // ["김**", "이oo"]

비슷한 함수 함께보기

ForEach() 함수

2021-01-13T08:00:00+00:00

ForEach

foreach 함수는 for문처럼 끝을 지정해 주지않아도 배열을 끝까지 순회해주는 함수입니다.

배열.forEach(콜백함수(요소, 인덱스, 배열객체));

사용법은 위의 filter 함수와 같이 콜백함수를 넣고 매캐변수로 요소, 인덱스, 배열객체를 넣을 수 있다.
예제를 보며 알아보자

const arr = ['Mon', 'Tue', 'Wed', 'thu', 'Fri', 'Sat', 'Sun'];

요일이 담겨있는 배열이 있다. 요일을 하나씩 출력하려 할 때 어떻게 코드를 짜야 할까?
간단한 방법으로는 For문을 사용하여 만드는 것이다.

for (let i = 0 ; i < arr.length ; i++) {
    console.log(arr[i]);
}

위처럼 배열의 length로 마지막 인덱스 값을 구하고 i를 인덱스 값으로 하면 배열을 순서대로 출력할 수 있다.
위의 코드를 ForEach를 적용해 바꿔보겠다.

arr.forEach((val)=>{
    console.log(val);
});

ForEach를 사용하면 배열의 마지막 인덱스 값을 구하거나 인덱스 값으로 배열을 순회하지 않아도 된다. ForEach 특성상 알아서 배열을 순회하고 매개변수에 요소가 있기 때문이다.

Mon
Tue
Wed
thu
Fri
Sat
Sun

Cypress로 테스트 코드 작성하기

2019-12-26T01:00:00+00:00

Cypress는 mocha/chai를 기반으로 하는 프론트엔드 테스트 도구이다. 연동된 모든 모듈이나 서비스를 import 해야하는 jasmine/karma와는 달리 import 할 필요없이 사용가능하고 설치하거나 테스트 하는 방법도 간단하다.

설치하기

Cypress는 npm 명령어로 간단하게 설치 할 수 있다.

npm i cypress

설정하기

설치가 끝났다면 바로 npx cypress open 으로 시작 할 수 있지만 직접 시작 명령어를 설정하는 것을 추천한다. cypress open은 새로운 크롬 창을 띄워서 화면 테스트를 실행하고 cypress run은 터미널에서 간의 테스트를 실행한다.

package.json

"scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run"
}

시작하기

Cypress는 외부에서 가상으로 검증 하는 것이 아니라 로컬 서버에서 직접 테스트하는 테스트 도구이기 때문에 서버를 먼저 시작한 후 Cypress를 실행해야한다.

npm run start

로컬 서버를 실행 시켰다면 Cypress를 시작 해보자

npm run cy:open

처음 Cypress를 실행하면 “cypress”라는 최상위 폴더와 그 안의 하위 폴더들이 생성된다. 또 “cypress/integration”안의 “examples” 폴더가 생성되는데 초보자를 위한 테스트 코드 예제파일들이다.

테스트 러너

테스트 러너를 자세히 살펴보자. 오른쪽 상단의 “Run all specs” 버튼이 있다. 이 버튼으로 모든 테스트코드 파일을 검증 할 수도 있고 하나의 파일을 클릭하면 단일 파일의 테스트 코드만 검증 할 수도 있다. 테스트 러너에서 보이는 파일은 “cypress/integration”안의 저장된 파일들이다. “cypress/integration” 폴더 안에 signIn.spec.ts라는 테스트 코드 파일을 생성해보면 테스트 러너에 방금 생성한 signIn.spec.ts 파일이 보일 것이다.

@testing-library/cypress 설정하기

최초로 Cypress를 실행하여 폴더를 생성 했다면 Cypress 라이브러리를 하나 설치한 뒤 설정도 해준다.

npm i @testing-library/cypress

tsconfig.json

{
  "compilerOptions": {
    "types": ["cypress", "@types/testing-library__cypress"]
  }
}

cypress/support/commands.js

import '@testing-library/cypress/add-commands'

테스트 코드 작성

예제 프로젝트 https://github.com/yoonovo/my-test-code

테스트 러너에서 signIn.spec.ts 파일을 클릭하여 실행시켜보면 아래 이미지와 같은 화면이 나올 것이다.

테스트 코드를 살펴보자.

describe('비정상적으로 로그인 했을 경우', () => {
  beforeEach(() => {
    cy.visit('http://localhost:4200')
  })

  it('아이디와 비밀번호 둘 다 미입력 상태에서 로그인 버튼을 눌렀을 때 "아이디 또는 비밀번호를 확인해 주세요."라는 알럿창이 떠야한다.', () => {
    cy.get('.id-input').should('be.empty').should('have.css', 'border', '1px solid rgb(255, 0, 0)')
    cy.get('.pw-input').should('be.empty').should('have.css', 'border', '1px solid rgb(255, 0, 0)')

    cy.contains('로그인').click()

    const stub = cy.stub()
    cy.on('window:alert', stub)
    cy.contains('로그인').click().should(() => {
      expect(stub.getCall(0)).to.be.calledWith('아이디 또는 비밀번호를 확인해 주세요.')      
    })
  })

  it('비밀번호만 미입력 상태에서 로그인 버튼을 눌렀을 때 "아이디 또는 비밀번호를 확인해 주세요."라는 알럿창이 떠야한다.', () => {
    cy.get('.id-input').type('yoonovo').should('have.css', 'border', '1px solid rgb(0, 0, 0)')
    cy.get('.pw-input').should('be.empty').should('have.css', 'border', '1px solid rgb(255, 0, 0)')

    cy.contains('로그인').click()
    const stub = cy.stub()
    cy.on('window:alert', stub)
    cy.contains('로그인').click().should(() => {
      expect(stub.getCall(0)).to.be.calledWith('아이디 또는 비밀번호를 확인해 주세요.')      
    })
  })
})

describe('정상적으로 로그인 했을 경우', () => {
  beforeEach(() => {
    cy.visit('http://localhost:4200')
  })
  it('아이디와 비밀번호를 입력한 뒤 로그인 버튼을 눌렀을때 "로그인 되었습니다."라는 알럿창이 떠야한다.', () => {
    cy.get('.id-input').type('yoonovo').should('have.css', 'border', '1px solid rgb(0, 0, 0)')
    cy.get('.pw-input').type('yoonovo').should('have.css', 'border', '1px solid rgb(0, 0, 0)')

    cy.contains('로그인').click()
    const stub = cy.stub()
    cy.on('window:alert', stub)
    cy.contains('로그인').click().should(() => {
      expect(stub.getCall(0)).to.be.calledWith('로그인 되었습니다.')      
    })
  })
})

mocha/chai 문법이기에 테스트 코드를 접해본 적이 있다면 익숙하게 느껴질 것이다.

위에서 사용된 Cypress 문법을 간단하게 알아보자.

cy.visit(‘url’): url로 이동
cy.get(): 테스트 할 DOM 객체를 가져온다. DOM 객체의 태그, 클래스, 아이디로 가져올 수 있다. (자세한 내용은 여기)
cy.contains(‘String’): 문자열과 일치하는 DOM을 가져온다.
cy.get().should(): 가져온 DOM 객체의 속성이나 입력된 값을 비교 할 수 있다. (자세한 내용은 여기)
cy.get().click(): 가져온 DOM 객체에 클릭 이벤트를 발생시킨다.

이외에 나머지는 Cypress 공식 홈페이지에 들어가면 가이드와 설명이 잘되있으니 테스트 코드를 작성할 때 참고 바란다.

Data-TestId

위에서는 cy.get()으로 태그, 클래스, 아이디로 DOM을 가져왔다. 하지만 만약 cy.get()으로 가져온 DOM의 태그나 클래스, 아이디가 수정된다면 위의 테스트 코드는 실패 할 것이다. 클래스 하나 수정할 때마다 테스트 코드를 수정하기엔 비용이 과도하다. 이럴 때를 위해 우리는 @testing-library/cypress라는 Cypress 라이브러리를 하나 설치 했다.

이 라이브러리는 data-testId라는 테스트 전용 아이디를 제공하여 이 아이디로 DOM을 가져올 수 있게 한다.

사용법 테스트를 하기위해 가져오고 싶은 DOM 객체 태그에 아래와 같이 추가한다.

<p data-testId="hello">반갑습니다.</p>

그리고는 테스트 코드를 작성할 때 cy.findByTestId()로 DOM을 가져오면 된다.

cy.findByTestId("hello")

이런 방식으로 테스트코드를 작성하면 DOM의 클래스나 태그가 바뀌어도 테스트는 실패하지 않는다.

Cypress 공식 홈페이지

Git 명령어

2019-10-21T02:15:29+00:00

Git init : 새로운 프로젝트를 만들었을때 새로운 git 저장소를 만들어준다.
Git clone “원격 저장소 URL” : github나 gitlab에 올라가 있는 프로젝트를 복사해 가져오는 명령어이다.
Git branch “브랜치 이름” : 새로운 브랜치 추가
Git checkout “브랜치 이름” : 브랜치 이동
Git branch -D “브랜치 이름” : 브랜치 삭제
Git add “파일명” : 변경된 내용을 스테이징에 추가한다. 파일명은 경로까지 넣어야한다. 변경된 모든파일을 한번에 추가하고 싶다면 git add .로 입력하면된다.
Git commit -m “커밋메세지” : 스테이징에 올라간 내용을 커밋 메세지로 묶어 저장한다.
git commit -m “커밋 제목” -m “커밋 메세지` 처럼 제목과 내용을 커밋 할 수도 있다.
Git commit –amend -m “변경항 커밋 메세지” : 바로 전의 저장된 커밋 메세지를 수정한다.
Git push -u origin “브랜치 이름” : 원격 저장소에 변경된 내용을 갱신한다. 잘못 push 하게 되면 작업한 내용이 지워질 수 있으니 신중하게 해야된다.
Git merge “브랜치 이름” : 브랜치를 병합한다. push만큼 위험한 명령어로 이것도 잘못하면 작업내역이 바뀌거나 삭제될수 있으니 신중 해야한다.
Git log : 커밋된 내역들을 확인할 수 있다.
Git remote -v : 원격 저장소의 url을 확인 할 수 있다.
Git remote set-url origin “원격저장소 주소” : 원격 저장소의 url을 바꿀수 있다.
Git remote add “새로운 원격브랜치 명” “원격저장소 주소” : 새로운 원격 저장소를 추가한다. 기본적으론 origin이 생성되어 있다. 그러나 더 체계적으로 Git을 관리하고 싶다면 공용 원격 저장소와 개인 원격 저장소로 나누어 관리하는 방법이 있는데 그때 사용하는 명령어 이다.

Angular 영문화 - i18n

2019-09-20T01:00:00+00:00

Angular i18n

i18n의 뜻은 Internationalization(국제화)의 첫 글자 i와 마지막 글자 n 사이에 18 글자가 있어서 i18n 이다.
Angular에서 지원하는 다국화 시스템을 구현할 환경을 만들어주는 역활을 한다.
기본적으로 지원하는 i18n말고도 i18next 같은 여러 라이브러리가 있다.

개발환경

Visual Studio Code
Angular CLI: 8.3.5 (※ 버전 보다 낮으면 오류가 날 수 있다.)

설정

i18n을 쓰기 위해서는 몇 가지 설정을 해주어야한다.

package.json

먼저 package.json의 “scripts”의 부분 안에 아래의 명령어를 추가해준다.

{
"scripts": {
    "xi18n": "ng xi18n",
    "build:en": "ng build --configuration=en",
    "start:en": "ng serve --configuration=en"
  }
}

TIP) “xi18n”: “ng xi18n –outputPath src/locale”처럼 파일을 생성할 경로를 설정할수 있다.

angular.json

그 다음으로 angular.json에 아래의 부분을 추가해 주면 됩니다. “projects” > “(프로젝트이름)” > “architect” > “build” > “configurations”

"en": {
  "aot": true,
  "outputPath": "dist/i18n-en/", 
  "i18nFile": "src/locale/messages.en.xlf",
  "i18nFormat": "xlf",
  "i18nLocale": "en",
  "i18nMissingTranslation": "error"
}

outputPath: Build할 때 dist 폴더 안에 생성할 파일 이름
i18nFile: Build할 때 번역 파일의 경로
i18nFormat: Build할 때 번역 파일의 형식
i18nLocale: 로캘 ID
i18nMissingTranslation: 번역 파일이 누락되면 에러가 발생

“projects” > “(프로젝트이름)” > “architect” > “serve” > “configurations”

"en": {
  "browserTarget": "i18n-project:build:en"
}

예외

만약 angular.json대신 .angular-cli.json가 있다면 package.json파일 안에 아래와 같이만 설정해주면 된다.

{
"scripts": {
    "xi18n": "ng xi18n --outFile messages.en.xlf --outputPath src/locale --locale en",
    "start:en": "ng serve --aot --i18nFile src/locale/messages.en.xlf --locale en",
    "build:en": "npm run build -- --outputPath dist/en -bh /en"
  }
}

사용법

번역할 HTML 파일을 만든다.

<div>
  <h1>사과</h1>
  <h3>바나나</h3>
  <p>키위</p>
</div>

번역해야 할 글자가 들어 있는 HTML 태그 안에 i18n을 넣어준다.

<div>
  <h1 i18n>사과</h1>
  <h3 i18n>바나나</h3>
  <p i18n>키위</p>
</div>

(※ 비어있는 태그에 i18n을 넣는다면 오류가 발생함으로 주의)

npm run xi18n을 입력해준다. 컴포넌트 전체를 돌면서 i18n이 들어간 태그들을 번역본 파일로 생성해준다.

npm run xi18n

위의 명령어가 정삭적으로 동작 했다면 최상위 폴더에 message.xlf 파일이 생성되어 있을 것이다.

(※ 만약 수정 또는 추가 때문에 HTML 파일을 갱신해도 번역본은 자동으로 갱신이 안되므로 다시 npm run xi18n으로 갱신 해주어야한다. 이때 갱신은 기존 있던 파일에 추가되거나 수정되는게 아니라 새로 만들어져 덮어쓰기 되니 꼭 복사본을 만들어 두길 권장)

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="f2a39f6cf53109df6d0d08d2327b09637bb4fce8" datatype="html">
        <source>사과</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">2</context>
        </context-group>
      </trans-unit>
      <trans-unit id="9ef37885aa82fbf86568486c219b17ee7ea65829" datatype="html">
        <source>바나나</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">3</context>
        </context-group>
      </trans-unit>
      <trans-unit id="fcb65700b71d9e426567cf7fa3014906078ecf38" datatype="html">
        <source>키위</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">4</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>

위에서 설정할 때 파일 경로를 **src/locale/messages.en.xlf으로 적었기에 locale파일을 생성하고 message.xlf파일을 복사해 locale파일 안에 messages.en.xlf으로 이름을 변경해 넣어준다.**
messages.en.xlf의 <source>부분 아래서 번역된 내용이 들어간 <target>를 넣어준다. (※ 자동번역이 아니기에 따로 번역본이 있어야됨)

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="f2a39f6cf53109df6d0d08d2327b09637bb4fce8" datatype="html">
        <source>사과</source>
        <target>Apple</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">2</context>
        </context-group>
      </trans-unit>
      <trans-unit id="9ef37885aa82fbf86568486c219b17ee7ea65829" datatype="html">
        <source>바나나</source>
        <target>Banana</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">3</context>
        </context-group>
      </trans-unit>
      <trans-unit id="fcb65700b71d9e426567cf7fa3014906078ecf38" datatype="html">
        <source>키위</source>
        <target>kiwi fruit</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">4</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>

마지막으로 npm run start:en을 입력해준다.

npm run start:en

결과

npm run start

사과
바나나
키위

npm run start:en

Apple
Banana
kiwi fruit

SCSS 유용하게 쓰는 법

2019-07-29T02:00:00+00:00

Sass와 SCSS 차이

SCSS는 Sass 버전3에서 CSS와 완전히 호환되도록 새로운 만든 css 전처리기(css Preprocessor)로 가장 큰 차이는 {}와 ;의 유무이다.

/*Sass*/
.wrap 
    width: 100%
    height: 500px
    li
        color: red
    &:hover 
        width: 50%

/*SCSS*/
.wrap {
    width: 100%;
    height: 500px;
    li {
        color: red;
    }
    &:hover {
        width: 50%;
    }
}

SCSS 사용

참조

Filter() 함수

2019-07-08T08:00:00+00:00

Filter

filter 함수는 배열을 순회하면서 조건을 만족하는 요소만을 배열로 반환한다.

const result = 배열.filter(콜백함수(요소, 인덱스, 배열객체));

사용법은 먼저 반환된 배열을 담을 변수를 선언하고 순회할 배열에 filter함수를 붙인다. filter함수 안에는 조건을 담고 있는 콜백함수를 넣는다. 이때 매개변수에는 요소(value), 요소의 인덱스(index), 순회하는 배열(Array) 순으로 넣을 수 있다.

간단한 예제를 살펴보자

const arr = [1, 2, 3, 4, 5];

let result = arr.filter(n => { 
	return n > 2;
});

console.log(result);

3, 4, 5

위의 코드에서 콜백함수의 조건은 n > 2, 2보다 큰 수이다. 순회할 배열 [1, 2, 3, 4, 5]에서 2보다 큰 수는 3, 4, 5이므로 result는 [3, 4, 5]가 담기게 된다.

또 filter 함수는 배열을 순회 할 때 빈 요소를 건너뛰기 때문에 반환된 값을 보면 빈 요소가 없다.

const arr = [1,2,,,,3,,,4,5];

let result = arr.filter(n => { 
	return n;
});

console.log(result);

1, 2, 3, 4, 5

또 아래 예제 같은 방식으로도 사용할 수 있다.

const arr = [    
  {"name":"Jack", "job": "student"},    
  {"name":"Mery", "job": "Nurse"},    
  {"name":"Emma", "job": "student"},    
  {"name":"Danny", "job": "office worker"}
];    
let result = arr.filter(val => {    
  return val.job === "student";
});  

console.log(result);

0: {name: “Jack”, job: “student”}
1: {name: “Emma”, job: “student”}

[문제풀이]hackerrank - Time Conversion

2019-07-05T06:03:00+00:00

문제 보러가기

function timeConversion(s) {

const arr = s.split(':')

if (arr[2].substring(2, 4) == 'PM' && arr[0] < 12) {
    arr[0] = Number(arr[0]) + 12 === 24 ? '00' : Number(arr[0]) + 12;
}

if (arr[0] == 12 && arr[2].substring(2, 4) == 'AM') {
    arr[0] = '00';
} 

arr[2] = arr[2].substring(0, 2);

return arr.join(':');

}

Generator 함수

2019-07-04T02:17:29+00:00

제너레이터(Generator) 함수

Javascript에서는 동기와 비동기가 있다. 동기는 호출과 실행을 같이 하고 비동기는 호출과 실행을 같이 하지 않는다. 예를 들어 console.log(‘hello’)는 호출하자마자 스스로 ‘hello’를 출력한다. 하지만 hello()는 호출을 하지만 function hello(){ console.log(‘hello’); }에서 ‘hello’를 출력한다.

제너레이터 함수란 이런 비동기 함수를 좀 더 유용하게 사용할 수 있게 하는 함수이다.

간단한 예제와 함께 알아보자

function* call() {
  console.log('첫번째');
  yield 1; // 첫번째 호출                 
  console.log('두번째');
  yield 2; // 두번째 호출                       
  console.log('세번째'); // 세번째 호출 
}

const result = call();

result.next(); // 첫번째
result.next(); // 두번째
result.next(); // 세번째

첫번째
두번째
세번째

제너레이터 함수는 호출 됐을 때 코드를 한번에 실행하지 않고 일시정지 했다가 필요한 시점에서 이어서 나머지 코드를 동작하는 방으로 작동한다.
.next()로 함수를 호출하면 코드에서 yield을 만날 때 실행을 멈추는 방식으로 동작한다. 한 번 호출하면 첫번째 yield까지 실행되고 멈추었다가 두번째 호출되면 첫번째에서 멈춘 곳 부터 두번째 yield을 만날 때까지 실행된다.

또 .next()로 호출할 때 result처럼 변수에 담지않고 호출한다면 호출된 횟수를 저장할 수 없어 몇 번을 호출해도 ‘첫번째’만 출력된다.

function* call() {
  console.log('첫번째');
  yield 1;                 
  console.log('두번째');
  yield 2;                  
  console.log('세번째'); 
}

call().next(); // 첫번째
call().next(); // 첫번째
call().next(); // 첫번째

첫번째
첫번째
첫번째

또 제너레이터 함수는 .next()로 호출할 때 {value: 1, done: false} 객체를 반환한다.
value는 yield에 할당한 값이고, done은 남은 코드 안에 yield이 있다면 false 없다면 true가 할당된다.

function* call() {
  console.log('첫번째');
  yield 1;                 
  console.log('두번째');
  yield 2;                     
  console.log('세번째');                   
}

const result = call();

console.log(result.next()); // {value: 1, done: false} 
console.log(result.next()); // {value: 2, done: false} 
console.log(result.next()); // {value: undefined, done: true}

첫번째
{value: 1, done: false}
두번째
{value: 2, done: false}
세번째
{value: undefined, done: true}

이러한 제너레이터 함수를 쓰는 이유는 무엇일까
가장 큰 이유는 콜백지옥(Callback hell)에 빠지지 않기 위해서이다.

예를 들어 setTimeout을 이용해 3초뒤 30을 출력후 다시 1초뒤 10을 출력, 마지막으로 2초뒤 20을 출력하여 30, 10, 20 순으로 출력하는 코드를 작성해본다고 하자

setTimeout(()=>{console.log('30')}, 3000);
setTimeout(()=>{console.log('10')}, 1000);
setTimeout(()=>{console.log('20')}, 2000);

10
20
30

동기 함수라면 위의 코드로 원하는 값을 얻을 수 있을 것이다. 그러나 setTimeout은 비동기 함수이기 때문에 호출한 순서와 출력된 순서가 맞지않아 원하는 값을 얻을 수 없다.

setTimeout(()=>{
	console.log(30);
	return setTimeout(()=>{
		console.log(10);
    	        return setTimeout(()=>{console.log(20);}, 2000);
        }, 1000);
}, 3000);

30
10
20

원하는 값을 얻기 위해서는 위의 예제처럼 콜백 안에 콜백을 사용해 코드를 작성해야한다. 하지만 이런 콜백함수가 반복되면 가독성이 떨어지고 난해한 코드가 되어 콜백지옥에 빠지게된다.
이 예제에 제너레이터 함수를 적용해보자

function* setime() {
    setTimeout(()=>{console.log('30'); gen.next();}, 3000);
    yield 30;
    setTimeout(()=>{console.log('10'); gen.next();}, 1000);
    yield 10;
    setTimeout(()=>{console.log('20');}, 2000);
}

const gen = setime();

gen.next();

30
10
20

제너레이터 함수를 적용한 결과이다. 눈으로만 보기에도 제너레이터 적용 전의 함수보다 가독성이 높아졌다.

또한 제너레이터 함수에 매개변수를 넣을 수도 있다.

function* gen(n) {
  let x, y;
  x = yield n; 
  y = yield n;

  console.log(x+y); // 3
}
let generator = gen();

generator.next();  // 제너레이터 함수 시작
generator.next(1); 
generator.next(2);

제너레이터 함수 사용법

제너레이터 함수

function* genFun() {
  yield 1;
}

let generator = genFun();

제너레이터 메소드

let genObj = {
  * genMethod() {
    yield 2;
  }
};

let generator = genObj.genMethod();

제너레이터 클래스 메소드

class MyClass {
  * genClsMethod() {
    yield 3;
  }
}

let genClass = new MyClass();
let generator = genClass.genClsMethod();

Git hub 블로그에 글쓰기 - 문서내 이동

2019-07-03T03:30:29+00:00

문서내 이동

문서들을 보면 글의 목차나 목록이 있고 목록을 클릭 시 해당 글 위치로 이동해주는 문서 내 링크가 있다. 마크다운에서 이러한 이동 링크를 생성하려면 이동할 위치의 텍스트를 # 제목으로 선언해 h1태그로 치환되게 한다.
그리고 목록에는 [링크 걸 텍스트](#제목) 형식으로 작성해야한다.
(#제목)에서 제목에는 소문자만을 쓸수 있고 띄여쓰기는 -으로 바꿔 적어줘야 한다.

# 목차
- [강아지](#강아지)  
- [여수](#여수)  
- [태국](#태국)

# 강아지
![image](/assets/arong2.jpg)
![image](/assets/arong3.jpg)
# 여수
![image](/assets/img1.jpg)
![image](/assets/img2.jpg)
# 태국
![image](/assets/tai1.jpg)
![image](/assets/tai4.jpg)

강아지

처음으로

여수

처음으로

태국

처음으로