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

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

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

react-testing-library 를 사용한 리액트 컴포넌트 테스트 react-testing-library Enzyme과 달리 모든 테스트를 DOM 위주로 진행 필요한 기능만 지원해서 가볍다 일관성있고 좋은 관습을 따르는 테스트 코드를 작성할 수 있게 유도해준다. props, state 조회하는 작업을 하지 않음 리팩터링 시 구조, 네이밍 변경 시 기능이 똑같이 작동한다면 테스트가 실패하지 않음 CRA 프로젝트 생성 react-testing-library, jest-dom 설치 jest-dom은 jest 확장, dom관련 matcher를 추가해준다. vscode 사용 시 @types/jest 도 같이 설치 테스트 코드 작성 테스팅 스냅샷 테스팅 ㄴ 렌더링결과와 이전 렌더링 결과의 일치여부(u 키로 ..