Dog foot print

WEB CACHE 서론 Validation 서버에 새로운 버전의 프로덕트를 올릴 때 가끔 브라우저 캐싱때문에, 캐시된 데이터를 삭제하거나, 시크릿 모드에서 확인을 하였다. 이를 해결하기 위해서, 번들링 할때 JS파일 이름에 해싱데이터를 넣어 새로운 JS파일을 업로드 하게하고, HTML파일에 메타태그를 추가함으로써, HTML파일을 캐싱되지 않게 하였다. 캐싱에 대해서는 간단하게는 알고 있었지만, 오늘 만큼 공부해본적은 없었기에 이에 대한 기록을 남겨보도록 한다. 캐싱이란 ? Caching (캐싱)이란 어떤 데이터가 연산되어 산출 되었거나, 외부 저장소에서 로드 되었을 때 이에 대해 특정 저장소(Register, L!,L2,L3)에 저장하여, 빠르게 다시 사용 할 수 있게 하는 방법이다. 캐쉬를 사용하게 된..

use:action 액션이란 스벨트에서 사용되는 용어로써, 돔 노드의 요소가 생성, 업데이트, 삭제될 때 실행되는 함수를 의미한다.( 액션은 돔 노드가 생성될 때 최초 호출된다. ) 함수는 update와 destroy를 가진 객체를 리턴 할 수 있는데, 이 각각의 프로퍼티는 노드 요소가 업데이트 되거나, 삭제 될 때 실행되는 메서드로 디스트로이 프로퍼티는 해당 엘리먼트가 삭제될 때, 이벤트 리스너들을 삭제하는 식으로 주로 사용된다. #svelte

Hugo’s Lookup order Hugo 는 Layout을 찾을 때, 정의된 순서에 따라 탐색하여 사용합니다. Hugo Layouts Lookup rules Hugo는 현재 페이지에 사용되는 레이아웃을 선정 할 때 아래의 있는 요소들을 고려합니다. 휴고는 이것들에 우선순위를 부여하여, 레이아웃을 찾습니다. Kind Page kind는 single page혹은 list page인지를 구분 합니다. Single Page : 보통의 일반적인 페이지를 의미합니다. (Ex : _default/single.html) List Page : 섹션 분할, 분류 목록, 분류 약관 등이 해당 됩니다. (Ex : _default/list.html) Layout Page 접두에 작성된 내용입니다. Output Format ..

Learn D3 : 소개 Note : 이 시리즈는 D3의 introduction을 번역한 시리즈 입니다. 서론 시작하기 전에, 우리는 이것을 신중히 고려해볼 가치가 있습니다. 왜 d3를 귀찮게 배워야하며, 왜 Obsevable 에서 배워야 할까요 ? 첫번째 D3는 유명하며, 현재 80M의 다운로드 수와 90K 이상의 사람들이 주시합니다. 여기에는 예제, 비디오, 학습반, 그리고 책을 포함하여, 커뮤니티에서 개발한 많은 리소스가 있습니다. 그리고 d3팀은 fork가 가능한 예제와 생산성과 학습을 도와주는 예제를 백개나 보유하고 있습니다. 두번째 D3는 유연합니다. D3의 가장 큰 장점은 당신이 무엇을 원하든 만들 수 있도록 도와주는 힘입니다 ! D3는 갤러리는 treemap, hierarchical edg..

Snapshot Test Snapshot test란 UI가 바뀌지 않았다는 것을 증명하는 유용한 도구이다. snapshot 은 UI컴포넌트를 렌더링 한 후, 이를 다음 테스트와 함께 저장된 스냅샷과 비교하며 테스트가 진행된다. snapshot테스트는 두개의 스냅샷이 일치 하지 않은 경우, 실패하게 됩니다. 이 경우, 새롭게 적용한 컴포넌트의 UI가 의도치 않게 변경되었거나, 컴포넌트가 버전이 변경되었음을 시사합니다. Snapshot Testing with Jest 모든 App의 그래픽 UI를 렌더하는 대신에, 테스트 렌더러를 사용하여, React 트리를 빠르게 생성 할 수 있습니다. import React from 'react'; import renderer from 'react-test-renderer..

서론 : 나는 React를 학원에서 처음 배울 당시 클래스 형 컴포넌트를 이용하여, web app을 작성하였다.그 당시에도 Hook이 존재는 하였지만, CRA에서는 Hook을 지원하기 전이였고, 함수형 컴포넌트는 아직 보완할 점이 많아 React 사용자들에게는 뜨거운 감자 같은 것 이었다. 시간이 흘러 CRA에서 Hook을 공식지원하게 될 때, 나 또한 Hook에 발을 담가 보았지만, class형으로 만든 내 코드는 여전히 잘 동작 하였기에 나의 주목을 끌지 못하였다. 2020년 하반기 많은 것들이 변화하였다. Class형으로 작성한 내 코드는 규모가 커질 수록 관리하기 매우 어려웠으며, 빌드 속도가 증가하는 등 많은 이슈가 내 앞으로 다가왔다. 또한 Typescript 공부 할 수록, 함수형 컴포넌트와..

Express 강의 소개 Express 프레임 워크는 기존 node.js의 http모듈을 활용하여 많은 API를 지원하고 , Express를 지원하는 많은 오픈 소스 라이브러리가 존재하여, 기존 HTTP 모듈을 사용할 때 보다 훨씬 빠르게 node.js를 통한 서버를 구성할 수 있도록 도와주는 프레임 워크입니다. 이번 Express강의는 javascript의 es6문법을 어느정도 이해한 자바스크립트 중급 이상 실력을 가진 자스민 회원을 대상으로 기획하게 되었습니다. 또한 간단한 통신 예제로 회원가입과 글쓰기, 수정,삭제가 포함되어 있기에 mysql 데이터베이스의 query문 작성 요령을 미리 알고 있으면 이번 강의를 이해하는데큰 도움이 될 수 있을 것으로 생각됩니다. 오프라인 강의 순서 오프라인 강의는 ..