Dog foot print

on:eventname on:eventname={handler} on:eventname|modifiers={handler}스벨트에서는 on: 키워드를 컴포넌트에 입력하는 것으로 해당 컴포넌트에서 발생하는 DOMevent를 연결 할 수 있습니다. count: {count} 이벤트 핸들러는 성능의 영향을 주지않고 인라인으로 선언 할 수 있습니다. ' 따옴표와 함께 사용하는 경우, 스벨트 문법은 하이라이팅 되며, 정상 작동 합니다. count: {count} preventDefault 같은 모디파이어를 사용하는 경우 | 문자와 함께 사용 할 수 있습니다. 사용 할 수 있는 modifier의 종류는 다음과 같습니다. preventDefault - 이벤트 핸들러가 실행 되기전에 event.preventDe..

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

Basic Syntax[2] Pipes Go 템플릿의 가장 강력한 구성요소 중 하나는 작업을 차례대로 쌓는 기능입니다. 이것은 pipe에 의해 완료됩니다. 파이프라인의 출력은 다음 파이프라인의 입력이 되기 때문에 가능합니다. Go 템플릿의 문법이 쉬운 이유는 파이프가 필요한 함수를 체인형식으로 호출하기 때문입니다. 파이프의 한가지 한계는 한가지 값에 의해 실행되고, 이 값은 다음 파이프의 다음 파이프의 마지막 인자가 됩니다. 다음 예제는 파이프를 이용하고, 사용하는데 도움이 될 것입니다. shuffle 다음 두개의 예제는 동일합니다. {{ shuffle (seq 1 5) }}{{ (seq 1 5) shuffle }}index 다음 예제에서는 페이지 파라메터로 “disqus_url” 을 전달 하였고, HT..

Basic Syntax [1] Go의 템플릿은 변수와 함수로 이루어진 HTML입니다. GO의 템플릿에서 변수와 함수를 사용하기 위해서는 다음의 {{ }} 를 사용 합니다. Access a Predefined Variable (사전 정의 변수 사용하기) 현재 스코프에 존재하는 사전 정의된 변수를 사용하거나, 변경된 변수를 사용 할 수 있습니다. Note : .Title === predifend Variable Note : $address === custom Variable {{ .Title }} {{ $address }} 함수의 파라메터에 전달인자를 넣는 방법은 공백을 이용하는 것입니다. {{ FUNCTION ARG1 ARG2 }} 아래의 함수는 add 함수를 이용하여, 1과 2의 결과를 리턴하는 예제 입..

Directory structure Hugo new site [name] 명령어로 생성된 프로젝트는 다음과 같은 폴더 구조를 가지고 있습니다. ├── archetypes ├── config.toml ├── content ├── data ├── layouts ├── static └── themesDirectory Structure Explained 이 문서는 대략적으로 각 폴더에 대해서 리뷰한 글입니다. 각 폴더의 자세한 내용을 보고 싶다면, 링크되어 있는 회고 문서를 읽어주세요 . Archetypes Hugo에서는 Hugo new커맨드를 입력하는 것으로 새로운 컨텐츠 파일을 만드는 것이 가능합니다. Hugo는 새로운 컨텐츠를 만들때, date , title와 draft=true 형태를 포함하는 파일을 만..

Quick Start Note 이 문서는 Hugo의 공식문서를 번연하여 편집한 글입니다. 오타나 수정사항이 존재하면 언제든지 댓글로 말씀 부탁드립니다. Hugo Insatall On Mac Note : Hugo를 Mac에 설치하려면 Mac OS package Manager인 brew 혹은 MacPorts를 먼저 설치해야 합니다. Note : [Homebrew](The Missing Package Manager for macOS (or Linux) — Homebrew) $ brew install hugo Note : [Macport](The MacPorts Project — Home) $ port install hugoHugo create a New site $ hugo new site newSiteNam..

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