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

ES2018(ES9) 변화

Rest, Spread

Rest

• 선택되지 않은 나머지 속성을 모아준다.
• 값이면 복사하고 객체는 참조한다.

const { a, ...rest } = { 
	a: 1, b: 2, c: 3 
}; 

console.log(rest); // { b: 2, c: 3}

- 코드 출처 : 제로초님 블로그

Spread

• Object.assign과 비슷하다.
• 값이면 복사하고 객체는 참조한다.(같은 속성명이라면 덮여씌워진다.)

const obj = { 
	a: 1, b: 2, c: 3 
}; 

const spread = { 
	a: 3, d: 4, ...obj, 
}; 

console.log(spread); // { a: 1, b: 2, c: 3, d: 4 } (a: 3이 덮어씌워짐)

- 코드 출처 : 제로초님 블로그

Promise.prototype.finally

• then, catch외에 finally 추가
• promise 실행 결과에 상관없이(성공 실패 여부 상관 없이) 마지막에 무조건 실행
• finally 뒤에 then, catch 등을 체이닝 할 수 있음
• resolve 값은 바꿀 수 없고 reject값만 바꿀 수 있다.

for-await-of (Async iteration)

• 비동기 iterable 객체를 반복하는 구문
• Async for - of문은 비동기 함수, 비동기 generator 함수 내에서만 사용 가능
• promisa.all외에도 비동기 반복 처리에 옵션이 하나 더 생김

정규표현식

• lookbehind 생김 - 특정 문자열 뒤의 문자열을 찾는 기능 - 이를 위해 ?>=, ?>! 심볼 추가
• 캡쳐링 그룹에 네이밍가능
  • 캡쳐링이란? 괄호로 묶어준 것들
  • 기존에는 순서대로 번호가 매겨졌지만 이제 사용자가 네이밍할 수 있음
  • 결과에 groups 속성으로 접근 가능
• s 플래그 추가되어 .의 기능이 강화
• u 플래그 추가(특정 유니코드를 정규표현식으로 표현 가능 해짐)
• \n도 매칭

ES2018(ES9)의 변화

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

[JS] ECMA2018 : ES9 알아보기

https://a-tothe-z.tistory.com/15

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