Dog foot print

변수와 상수 프로그래밍을 처음에 배우게 되면, 접하는 내용이 변수와 상수이다. 변수는 말 그대로 추후에 담고 있는 값을 변경 할 수 있는 공간을 의미하고, 상수는 차후에도 변경 할 수 없는 공간을 의미한다. 선언 방법 var variable; let constants;위의 코드를 보면, var와 let 으로 구분되어 있는 문자가 있는데, 이것이 변수와 상수를 의미한다. 추후 나오는 variable과 constants는 이 공간의 이름(변수 명)을 의미한다. 이렇게 발생된 공간은 실제로 RAM의 공간의 일부분을 의미 하는건데, 이 공간은 실제로 숫자로 이루어져 우리가 그 값에 접근하기 매우 어렵다.변수명은 우리가 알기 어려운 숫자 대신에 사용하기 쉬운 문자로 이루어져 그 공간을 식별하게 해준다. 그렇기 때..

Xcode 와 친해지기 Xcode 사양 V 12.5.1 Xcode 첫 실행 Note : 12버전 부터 Playground가 초기 실행 화면의 옵션에서 제거되고, File -> New -> Playground로 이동시 사용 가능하다. Create a new Xcode project Apple 제품에 사용되는 소프트웨어의 프로젝트를 새롭게 만들기 위한 버튼이다. Note : IpadOS가 IOS로부터 분리되었지만 현재는 IOS로 통합 되어있다. Note : 이전 11버전 까지는 Single View App이 존재하였으나, 지금은 App으로 명칭이 변경되었다. Clone an existing project Git을 사용하는 Bitbucket이나 Github와 같은 외부 저장소로 부터, 프로젝트를 클론하여 내 ..

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

requirement 일렉트론 윈도우에서는 svelte를 사용 할 수 있어야 한다. 유용한 플러그인 및 모듈을 설치하여, 깔끔한 폴더 구조를 만들어야 한다. svelte와 일렉트론에서 typescript를 사용 할 수 있어야 한다. svelte에서는 scss를 사용 할 수 있어야 한다. svelte에서 최신 문법을 사용 할 수 있어야 한다. svelte에서는 css초기화가 되어야 한다. svelte에서는 css 브라우저 접두사가 붙어야한다. rollup-plugin-copy 현재 문제점은 아래와 같이 파일이 번들링 되며 public폴더에 build 폴더가 생겨, public 폴더가 오염된다는 문제가 있다. 그래서, 빌드 시 public 폴더에는 영향을 미치지 않으며, public 폴더 내부에 존재하는 파..

Electron with svelte 초기 세팅하기 requirement 일렉트론 윈도우에서는 svelte를 사용 할 수 있어야 한다. 유용한 플러그인 및 모듈을 설치하여, 깔끔한 폴더 구조를 만들어야 한다. svelte와 일렉트론에서 typescript를 사용 할 수 있어야 한다. svelte에서는 scss를 사용 할 수 있어야 한다. svelte에서 최신 문법을 사용 할 수 있어야 한다. svelte에서는 css초기화가 되어야 한다. svelte에서는 css 브라우저 접두사가 붙어야한다. 환경 OS : mac big-sur 11.3 NODE : 14.16.1 NPM : 6.14.12 YARN : 1.22.10 svelte 사용하기 SVELTE TEMPLATE설치 Note : npm , node , y..

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

bind:group & this Bind:group bind:group 문법은 type="radio" 혹은 type="checkbox" 의 인풋에서 요긴하게 사용되는 예약어이다. 아래의 코드에서 보다시피 radio 버튼에 group을 설정하게 되면, 버튼이 클릭되었을 때, 해당 value가 변수에 할당되게 된다. Checkbox는 다중 선택이 가능하기 때문에, 이를 bind:group으로 설정하면 체크되어 있는 input의 value가 배열에 저장되게 된다. bind:this bind:this는 특정 돔 노드를 변수에 할당하는 역할을 한다. 다만, 렌더링 이후에, 노드 요소가 변수에 할당되기 때문에, 사용시 주의를 필요로 한다. #svelte

# How to pixel work ? 서론 이번 주 금요일 스프린트를 마무리 하기전 그래프의 구분 선을 1px 이하로 표현해달라는 요청을 받았다. 그래서 0.5 픽셀로 구분선을 설정하였는데, 이런 의문이 발생하였다. “ 모니터는 픽셀단위로 이루어졌고, 1개의 픽셀은 1개의 색을 표현하는 점인데, 어떻게 0.5px이라는 단위가 존재할 수 가 있지 ? 1개의 픽셀에서 절반을 다른 색으로 표현하는게 가능한가 ? “ 결국 궁금증을 이기지 못하고, 이번 주말은 이 의문에 대한 답을 찾기 위해 시간을 쏟을 예정이다. 모니터의 픽셀이란 ? 픽셀은 색을 표현하는 한개의 작은 전구이다. 이 픽셀은 Red, Green, Blue로 다시이루어져 있는데, 이 각 RGB 컬러의 색상의 세기를 이용하여, 16777216개의 색..