주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

[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 구조화된 데이터 (..

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 공백 제거 가능 하위호환을 위해 같은 역할을 하는 메서드를 두개 만들었다고 한다..

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..