[아티클 프로젝트 034] [SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄)
[SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄) 쏘카 컴포넌트 정의 사이트 기존방식의 문제점때문에 컴포넌트 개발에 대한 논의 시작 디자이너끼리는 UI스타일 가이드 문서로 최소한의 규칙 공유 하지만 개발자는 기존 코드 확인이 가능할 경우 재사용, 그렇지 않을 경우 다시 개발 디자인 시스템 구축 네이밍 통일 컴포넌트 용어, 네이밍 통일 네이밍 룰 정립 무슨_무슨_Button 실제 형태(Size, Line)를 기준 약어 사용 금지, 풀네임으로 명시 테마 구성된 컬러가 다를 경우 고정속성, 가변속성 개념 사이즈, 텍스트 스타일 가변속성 테마에 따라 달라지는 속성 색상 각자의 영역에서 가변속성을 컨트롤 하기 쉽게 세팅해두고 사용 컬러별 컴포넌트 생성 아쉬운 점이 됨 컴포넌트 수..
SEO 그것을 알려드림 SEO(Search Engine Optimization) 검색광고 역이 아닌 검색엔진최적화(Organic Search) 영역중 최상단에 나오게 하는 작업 첫페이지가 왜 중요한가? 상위 5개에서 67% 클릭 발생 최적화 Technical SEO 검색엔진이 데이터를 잘 수집 할수 있도록 하는 작업 Content SEO 검색자 질문에 답을 줄수 있는 컨텐츠 제작 최근 원티드에 적용한 Technical SEO Robots.txt 세부적으로 허용, 비허용 경로 작성 URL 표준화 (canonical) 같은 URL 뒤에 파라미터를 붙여 검색엔진에게 알려주자 https://www.example.co.kr?type=a https://www.example.co.kr?type=b 구조화된 데이터 (..
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이 덮어씌워짐) - 코드 출처 : 제로초님 블로그 ..
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.value..