세줄코딩

앵귤러를 하면서 조금씩 정리하려 한다. 타입 에일리어스 1. 타입 에일리어스를 이용한 단일 타입 선언.- 타입 에일리어스를 이용하면 기존 타입에 새로운 이름을 지을 수 있다. 사용 방식 type = 타입; -> type myProfile=string; 2. 타입 에일리어스를 이용한 유니언 타입선언- 타입 에일리어스는 단일 타입보다는 유니언 타입( let c = a | b )이나 리터럴 타입( let c:{ a:string, b:number }[] )과 같은 다소 복잡한 형태의 타입에 적용하면 좋다.type myId=string; type myA=string | undefined; type User={ id:myId; alias?:myA; //? 는 세이프 네이비게이션이라고도 하며 기능은 해당 속성이 불확..

요새 vue를 잠깐 보고 있는데 우옷 이건 또 먼가~ 더미 텍스트를 이렇게 쉽게 생성 시키다니....정말이지 만들고자 혹은 필요한 라이브러리가 넘쳐난다. 없는 것을 찾는게 더 어려운 듯..... 샘플 예제를 보다 발견~ chance.js - http://chancejs.com/index.html 간단 사용법 console.log(chance.sentence()); //더미 랜덤 문장생성 console.log(chance.paragraph()); //더미 랜덤 문단 생성

무슨 어쩌고 보안 문제라고 github에서 메일이 왔다.package-lock.json에 parsejson이 무슨 어쩌고 보안 취약이란다. package-lock.json을 지워버리면 그만이긴 한데....글케 하면 다른 곳에서 혹은 다른 누군가가 설치파일 등을 동기화하기 어려워진다. 아 어케하지? 역시 구글 검색 ~ 엄청 검색 끝에 테스트 러너를 업뎃으로 해결을 했다는 코멘트가 있었다. 아래처럼 터미널에 입력.npm i karma@3.0.0 --savenpm install --save-dev protractor@5.4.0 머 어찌 되었건 해결하여 깃헙에 push 뙁 해결 !!

device width : 414pxdevice height : 846px 해상도 1440 * 2960 CSS media query@media only screen and (min-width: 414px) { /* Your Styles... */ } - mobile only@media only screen and (min-width: 414px) and (max-width: 767px) { /* Your Styles... */ } - Retina styles@media only screen and (-webkit-min-device-pixel-ratio: 3.5), only screen and ( min--moz-device-pixel-ratio: 3.5), only screen and ( -o-min-..

Viewport 정리 width : viewport의 width를 조정. 숫자값이 들어갈 수도 있고, device-width 와 같은 특정한 값을 사용할 수 있음. device-width - 100% 스케일에서 CSS pixel로 계산된 화면 width. height : viewport의 height( 세로 )를 조정. initial-scale : 페이지가 처음 로딩 될 때 줌 레벨 조정. 값이 1일때는 CSS pixel과 기기 pixel 간의 1:1 로 조절. minimum-scale : viewport의 최소 배율값, 기본값은 0.25. maximum-scale : viewport의 최대 배율값, 기본값은 1.6. user-scalable : 사용자의 확대/축소 기능을 설정, 기본값 yes.

하위 엘리먼트가 있는지 없는 체크할 경우가 있다. 물론 js 로 체크하는게 보통이지만.... 예를 들어 마크업과 JS수정없이 아코디언 메뉴에 이미지를 추가한다고 치자. 아코디언메뉴에서 열리고 닫히는 모습을 알기 쉽게 맨 우측에 화살표를 넣어야 하는데 하위메뉴가 없을 때는 화살표가 나오지 말아야한다. 이럴때 정말이지 난감하다. JS코드를 안건드리고 어케!!!!!!!!!!! 특히나 JS를 만질 권한이 없다라던지 JS에서 변경하면 큰일이 난다라는..... 게다가 개발팀과 분리되어 웹퍼블리싱만 한다면 더욱이 힘들 것이다. 그럼 기존 마크업과 JS수정없이 CSS 만으로 체크할 수 있을까 ? 바로 :only-child 라는 선택자를 사용할 수 있다. :only-child 선택자 - 부모 엘리먼트내에서 자신이 유일한..

this - 함수를 속성 또는 메소드로 포함하고 있는 객체를 참조한다. ( this의 값은 함수가 호출되는 컨텍스트에 따라 달라 질 수 있다. ) 컨텍스트(context) - 자바스크립트 코드 실행시 인터프리터가 new키워드 or 리터럴 표기법 등을 만나면heap메모리에 만들어지는 별도의 공간. 실행 컨텍스트 - 함수가 실행된 부분. 콜백 패턴 ( = 콜백 함수 )- 함수는 객체. 즉 함수를 다른 함수의 인자로 전달할 수 있다. 이런 것을 콜백 패턴. 바인딩bind : 결속시키다. 묶다 는 뜻을 가짐.- 객체와 메서드를 묶어놓는다. 즉 특정 객체에서 실행되게끔 고정시키는 역활. 클로저- 함수 객체와 함수의 변수가 해석되는 범위 ( 변수 바인딩의 집합 )의 조합.- 이는 함수의 변수가 유효범위체인( 스코프..

HTML CSS .switcher {position:relative;width:192px;height:42px;border-radius:25px;} .switcher input { -webkit-appearance: none; appearance: none; position: relative; width: 192px; height: 42px; border-radius: 25px; background-color: #0ab1a9; border:1px solid #fff; } .switcher input:before, .switcher input:after { z-index: 2; position: absolute; top: 50%; color: #fff; -webkit-transform: translateY..