Peep

[SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄)

쏘카 컴포넌트 정의 사이트

기존방식의 문제점때문에 컴포넌트 개발에 대한 논의 시작

디자이너끼리는 UI스타일 가이드 문서로 최소한의 규칙 공유

하지만 개발자는 기존 코드 확인이 가능할 경우 재사용, 그렇지 않을 경우 다시 개발

디자인 시스템 구축

• 네이밍 통일

• 컴포넌트 용어, 네이밍 통일

• 네이밍 룰 정립

  • 무슨_무슨_Button

  • 실제 형태(Size, Line)를 기준

  • 약어 사용 금지, 풀네임으로 명시

테마

• 구성된 컬러가 다를 경우

고정속성, 가변속성 개념

• 사이즈, 텍스트 스타일

가변속성

• 테마에 따라 달라지는 속성

• 색상

각자의 영역에서 가변속성을 컨트롤 하기 쉽게 세팅해두고 사용

컬러별 컴포넌트 생성

• 아쉬운 점이 됨
• 컴포넌트 수가 컬러 수만큼 증가

2탄이 나오면 또 읽어야지..

[SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄)

https://tech.socarcorp.kr/design/2020/07/31/component-01.html

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

ES2016(ES7) 변화, ES2017(ES8)의 변화

ES7

ES6에 비해 변경된 것이 별로 없다.

제곱연산자와 includes 메소드가 가장 큰 변화

제곱연산자

** 를 통해 제곱연산을 할 수 있다.

Math.pow(5, 3); // 125
5 ** 3; // 125

var i = 5; 
i **= 3; // 125

includes(찾을요소, 시작 순서)

배열에 해당 요소가 있는지 확인

indexOf와 같은 결과가 나오지만 NaN에 대한 처리가 다르다.

[NaN].includes(NaN); // true 
[NaN].indexOf(NaN) > -1; // false

ES8

메소드

Object

• Object.values(객체)

• Object.entries(객체)

  • Object.keys와 Object.values를 합쳐 놓은 메소드

• Object.getOwnPropertyDescriptors(객체)

  • 속성 설명, OwnProperty이기에 상속받지 않은 속성들만 설명

  • https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor

String

• 문자열.padStart(최종길이, 보충문자열)

  • 문자열 앞부분에 공백이나 문자열 추가하여 최종 길이로 만듬, 최종길이가 안채워지면 보충 문자열이 반복해서 들어감 원래 길이보다 최종길이의 값이 작으면 기존 문자열 반환

• 문자열.padEnd(최종길이, 보충문자열)

  • padStart와 같지만 문자열 뒷부분에 공백이나 문자열 추가

Trailing commas in function

• 함수의 인자, 매개변수 마지막에 콤마가 있어도 에러가 나지 않는다.

• git 같은 버전관리에서 콤마하나 추가한 것으로 수정된 것으로 나타나는 관리상 비효율적인 행동을 줄이기 위해 허용한다.

A( 'a', () => { 
	console.log('hello'); 
}, () => { 
	console.log('zero'); 
}, 
// 이렇게 마지막에 콤마를 붙이면 다음 인자가 더 들어올 것을 대비할 수 있습니다. );

async/ await

• promise를 await이 받아 처리함

• async는 promise가 없으면 의미 없음

• async 함수로 선언 후 await을 사용해야함.

ES7 변화, ES8의 변화

https://www.zerocho.com/category/ECMAScript/post/57d51fd976f9ec00153633b5

https://www.zerocho.com/category/ECMAScript/post/58cea165ab6eaa00180c5234

https://www.zerocho.com/category/ECMAScript/post/58d142d8e6cda10018195f5a