Peep

SEO 그것을 알려드림

SEO(Search Engine Optimization)

검색광고 역이 아닌 검색엔진최적화(Organic Search) 영역중 최상단에 나오게 하는 작업

첫페이지가 왜 중요한가?

상위 5개에서 67% 클릭 발생

최적화

• Technical SEO

  • 검색엔진이 데이터를 잘 수집 할수 있도록 하는 작업

• Content SEO

  • 검색자 질문에 답을 줄수 있는 컨텐츠 제작

최근 원티드에 적용한 Technical SEO

1. Robots.txt

   • 세부적으로 허용, 비허용 경로 작성

2. URL 표준화 (canonical)

   • 같은 URL 뒤에 파라미터를 붙여 검색엔진에게 알려주자

     • https://www.example.co.kr?type=a

     • https://www.example.co.kr?type=b

3. 구조화된 데이터 (Structure Data) 적용

4. 검색엔진에 JSON으로 페이지 내용을 알려주는 것

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Recipe",
  "name": "백종원 돼지고기 김치찌개 만들기",
  "author": {
    "@type": "Person",
    "name": "백종원"
  },
  "datePublished": "2020-08-06",
  "description": "누구나 쉽게 할수 있는 김치찌개. 맛보장",
  "prepTime": "PT20M"
}
</script>

• 채용정보  https://developers.google.com/search/docs/data-types/job-posting

• 이벤트  https://developers.google.com/search/docs/data-types/event

• 사이트 검색  https://developers.google.com/search/docs/data-types/sitelinks-searchbox

• 로고  https://developers.google.com/search/docs/data-types/logo

데이터 테스트

데이터 테스트 사이트

https://search.google.com/test/rich-results?hl=ko

데이터 모니터링

https://search.google.com/search-console/about

SEO 그것을 알려드림

https://medium.com/wantedjobs/seo-%EA%B7%B8%EA%B2%83%EC%9D%84-%EC%95%8C%EB%A0%A4%EB%93%9C%EB%A6%BC-a77f02384615

ES10, ES2020 간단하게 알고가기

ES2019(ES10)의 변화

Object.fromEntries

• Object.entries의 반대 기능

  • Object.entries는 객체를 2차원 배열로 만들어준다.

• 2차원 배열을 객체로 만들어준다.

• 배열말고 Map같은 것도 지원

Array.prototype.flat 

Array.prototype.flatMap

• 다중 배열을 펼치는 기능

• 기본 1단계 펼침

• 숫자 인수를 넣어 몇 번 연달아 펼칠치 결정 가능

String.prototype.trimStart

String.prototype.trimEnd

String.prototype.trimLeft

String.prototype.trimRight

• 공백 제거 가능

• 하위호환을 위해 같은 역할을 하는 메서드를 두개 만들었다고 한다

Optional Catch

• catch 매개변수를 쓰지 않는 경우 error 생략해도 된다.

기타

• 유니코드

• JSON, toString 개선

• Symbol에 description 속성이 생겼다. - 어떤 심볼을 사용했는지 알아낼 수 있게 되었다.

ES2020의 변화

matchAll

• .exec와 비슷

• 문자열에서 일치하는 정규표현식을 iterator 형식으로 반환

• 캡쳐링 그룹도 결과로 반환

• /g를 사용해야 에러가 발생하지 않음

BigInt

• 큰 숫자의 표현, 처리 가능

• 숫자로 변환할 수는 없다.

• 같은 BigInt 끼리 계산해야 에러가 발생하지 않음

• 소수점은 표현하지 못함

• 숫자와의 타입체크 시 다르게 인식해서 (===) 불가, 일반 숫자 비교는 가능

Promise.allSettled

• Promise.all은 하나만 실패해도 catch로 이동했다.

• 하지만 allSettled는 여러 프로미스에서 개별적으로 성공 여부를 알려준다.

  • 실패 시 개별 처리 가능

globalThis

• 런타임에 따라서 window, global로 나뉘었는데 하나로 통일하여 사용가능

  • 브라우저에서 globalThis는 window

  • 노드에서는 globalThis는 global

  • 기존의 window, global은 존재한다.

Optional Chaining 

• ?. 로 사용한다.

• 해당 값이 존재하지 않으면 undefined가 된다.

• 해당 값이 존재하면 조건문을 실행할 수 있다.

if (a) { 
  if (a.b) { 
      console.log(a.b.c); 
  } 
}

• ?. 연산자 사용

console.log(a.b?.());

Nullish Coalescing 

• ??로 사용한다.

• null 값을 처리하는 방식으로 || 로 표시되는 or 연산자와는 다르다.

• null과 undefined인 경우 거짓으로 처리 가능 

  • 기존에는 0, NaN, '', false 등도 거짓으로 처리했었다.

Dynamic import

• 함수로 사용하면 import는 프로미스를 리턴한다.

• 콜백, async / await에서도 사용가능

ES2019(ES10)의 변화

https://www.zerocho.com/category/ECMAScript/post/5c909bfe5a8005001ffb3f14

ES2020의 변화

https://www.zerocho.com/category/ECMAScript/post/5eae7480e70c21001f3e7956

ES2020 7가지 새로운 팁

https://frontdev.tistory.com/entry/ES2020-7%EA%B0%80%EC%A7%80-%EC%83%88%EB%A1%9C%EC%9A%B4-%ED%8C%81

ES6 간단하게 알고가기

선언 

ES6에서는 블럭 스코프 선언 방식(let, const)을 사용한다.

• let

  •  

    변수

• const

  • 상수 (배열과 오브젝트의 값 변경은 가능하다.)

• immutable array

  • 기존 배열을 복제하여 사용한다. 

  • 전개연산자(Spread Operator)를 사용하여 복제할 수도 있다. (immutable.js라는 라이브러리도 있다.)

const a = [1,2,3];
const b = [...a];

메서드

• 화살표함수(Arrow function)

• 클래스 개념 도입

• setPrototypeOf

  • 프로토타입 객체 추가

• 모듈(module)

• 프록시(proxy)

• startsWith(), endWith()

  • 앞 뒤로 문자열 일치 여부 판단

• includes()

  • 문자열 포함 여부 판단

• for-of

  • for-in 에서 상위 프로토타입의 값이 포함되는 문제 발생, value 순회로 for-in 문제 방지

• 전개연산자(Spread Operator)

• 나머지 매개변수(rest parameter)

• 기본 매개변수(default parameter)

• Array.from

  • 유사배열을 배열로 만들어준다.

  • querySelectAll로 얻은 노드리스트를 배열로 변경할수도 있다.

• 필수(기본) 파라미터

• 구조 분해

• set(), weakset()

• 백틱(`), 템플릿처리 ${}

객체와 변경불가성(Immutability)

원시 타입은 변경 불가능한 값이며 그 외 값은 객체 타입. 객체 타입은 변경 가능한 값이다.

(새로운 값을 다시 만들지 않고 직접 변경 가능)

참조하는 동작으로 의도하지 않은 결과가 나올 수 있다.

따라서 불변 데이터 패턴이 필요하다.

불변 데이터 패턴

참조가 아닌 객체의 방어적 복사를 통해 새로운 객체를 생성한 후 변경한다.

(원본 데이터의 불변)

1.객체의 방어적 복사(defensive copy) - Object.assign

Object.assign은 shallow copy이며 deep copy가 아니다.

2.불변 객체화를 통한 객체 변경 방지- Object.freeze

Object.freeze는 shallow freeze이며 객체 내부의 freeze를 원한다면 deep freeze를 해야한다.

immutable.js

Object.assign, Object.freeze는 번거로우면 성능상 이슈가 있어서 큰 객체에는 사용을 지양한다. (??)

다른 대안 : Facebook이 제공하는 라이브러리 immutable.js를 대안으로 사용할 수 있다.(영구 불변 데이터 구조를 제공)

ES6 정리 

https://velog.io/@godori/ES6-%EC%A0%95%EB%A6%AC-vpjmrh6hhe

ES6 특징 핵심요약

https://avengersrhydon1121.tistory.com/104

객체와 변경불가성(Immutability)

https://poiemaweb.com/js-immutability

ref https://dassur.ma/things/deep-copy/

ES6-꿀팁

원문 :  https://www.sitepoint.com/shorthand-javascript-techniques/

ref https://chanspark.github.io/2017/11/28/ES6-%EA%BF%80%ED%8C%81.html

react-testing-library 를 사용한 리액트 컴포넌트 테스트

react-testing-library

• Enzyme과 달리 모든 테스트를 DOM 위주로 진행
• 필요한 기능만 지원해서 가볍다
• 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있게 유도해준다.
• props, state 조회하는 작업을 하지 않음
• 리팩터링 시 구조, 네이밍 변경 시 기능이 똑같이 작동한다면 테스트가 실패하지 않음

1. CRA 프로젝트 생성
2. react-testing-library, jest-dom 설치
   1. jest-dom은 jest 확장, dom관련 matcher를 추가해준다.
   2. vscode 사용 시 @types/jest 도 같이 설치
3. 테스트 코드 작성
4. 테스팅

스냅샷 테스팅

ㄴ 렌더링결과와 이전 렌더링 결과의 일치여부(u 키로 업데이트)

쿼리함수

ㄴ react-testing-library 기반 dom-testing-library에서 지원하느 함수들

ㄴ Variant, Queries의 조합으로 네이밍이 이루어짐

react-testing-library 를 사용한 리액트 컴포넌트 테스트

https://velog.io/@velopert/react-testing-library