개발자의 낙원

Union? 사전적 의미: 조합, 결합, 연합 in Mathematics(수학에서): 합집합 타입스크립트에서: 잠재적인 타입들을 열거해 놓은 타입이다. 아직 어떤타입의 값이 대입될지 정해져 있지 않았을 때 사용한다. 열거에는 | 기호를 사용한다. ex) number | string 자바스크립트에는 존재하지 않는 타입스크립트 고유의 문법요소이다. Union Type 예제 //TypeScript 코드 //string과 number중 하나를 가질 수 있는 타입 type stringOrNumber = string | number; //string let burgerName: stringOrNumber; burgerName = 'HamBurger'; // number let price: stringOrNumber..

Intersection? 사전적 의미: 교차로, 교집합, 어떤 것들이 가로지르는 지점 Intersection type (in Typescript): 여러 타입을 융합하여 만든 하나의 타입. "&" 연산자를 활용하여 정의한다. 융합된 타입들의 요소를 전부 가지고있다. type예제 type CheeseBurger = { numBread: number; numCheese: number; } type BeefBurger = { numBread: number; numBeef: number; } //numBread라는 공통의 요소를 가지고있는 두 타입을 정의했다. type BeefCheeseBurger = CheeseBurger & BeefBurger; //& 연산자가 바로 intersection 연산자이다. //..

타입스크립트 소개 및 개발 준비 게시물의 링크는 이 글의 맨 밑에 있습니다. Art and design icons created by Freepik - Flaticon 목차. A. interface의 개념 사전적 정의, 프로그래밍 언어에서의 정의 사용이유 B. Typescript예제 1. object와 class의 청사진이 되는 interface 2. function의 청사진이 되는 interface 3. +@: readonly제어자와 option(옵션) 항목 A. Interface 개념 interface(인터페이스)란? 타입스크립트의 interface : class(클래스), object(오브젝트), function(함수) 등을 정의하기 위한 blueprint(청사진)을 제공하는 구성요소. 사전적 의미..

Miscellaneous icons created by Pixel perfect - Flaticon Singleton(싱글턴)? 일반적인 용어: "Single"에 하나를 의미하는 접미사 "ton"을 붙여서 "단독"의 의미를 강화한 단어. ex) singleton (카드): 카드 한 장 singleton (사람): 자식이 없는 사람, 혹은 가족이 없는 개인. 프로그래밍 용어 Singleton pattern: 하나의 class(클래스)가 하나의 instance(인스턴스)만 갖는 것을 보장하는 디자인. Singleton Pattern의 장점 하나의 class가 하나의 instance만 생성하도록 함으로써, 메모리 사용을 줄이고 시스템성능을 향상시킬 수 있다. instance가 하나뿐이니, 기억할 이름도 하나뿐..

썸네일 이미지 Microsoft icons created by Freepik - Flaticon 저번에 소개했던 TypeScript의 개발준비를 위한 설정을 해보자. https://batcave.tistory.com/33 TypeScript(타입스크립트)? 간단하게 알아보기 Typescript icons created by Freepik - Flaticon TypeScript(타입스크립트 이하 TS)란? 프로그래밍언어: JavaScript(자바스크립트, 이하 JS)의 super set(상위집합) JS에 새로운 요소를 추가하여 만든 언어. Type check(타입 batcave.tistory.com 0. Node.js, VScode설치하기 TypeScript(이하 TS)를 활용하는 데에 npm이 유용하게 ..

Typescript icons created by Freepik - Flaticon TypeScript(타입스크립트 이하 TS)란? 프로그래밍언어: JavaScript(자바스크립트, 이하 JS)의 super set(상위집합) JS에 새로운 요소를 추가하여 만든 언어. Type check(타입체크) 기능을 통해, JS를 마치 자바처럼 static(정적)으로 프로그래밍할 수 있게 해 준다. 컴파일러: ". ts" 확장자 파일을 ". js"파일로 컴파일러 사실 TS는 그 자체로 실행가능한 언어가 아니다. TS로 작성한 모든 코드 들은 JS로 컴파일되어 실행된다. TS의 장점 js코드의 오류를 run-time 이 아닌 compile-time에 발견할 수 있다. js코드가 프로그래머의 의도와 다른 논리로 작동하는..

Ui design icons created by Smashicons - Flaticon Box Theory? 웹개발에서, HTML element(요소)들은 전부 직사각형이 겹겹이 쌓여있는 박스로 취급하여 다루는 기법이다. 박스 찾아보기 구글크롬의 "개발자 도구" 기능을 이용하여 웹을 구성하는 코드를 포함한 여러 요소를 살펴볼 수 있다. box이미지모델은 style코드 최하단부에 위치한다. 또, 크롬의 확장프로그램 pesticide를 통해. 웹페이지 요소들의 박스들을 한눈에 볼 수 있다. pesticide링크 Box의 구성요소 content(콘텐츠, 내용물): 박스가 담고있는 실제 HTML element. 가장 안쪽에 위치한 박스이다. padding(패딩, 충전재): content와 border사이의 공간..

True icons created by Freepik - Flaticon Media? Query? Media: 중간 매개물. 매체 Query: 질문 Media Query(미디어쿼리)? 웹에 접근하는 Media(기계 혹은 뷰포트)의 특성에 따라, 다른 스타일을 적용 할 수 있게 해주는 CSS 기술 CSS의 조건문이라고 생각하면 편하다. responsive(반응형) 웹사이트를 만드는데에 널리 이용된다. 형태 @media media-type and (expression){ } 예시 @media screen and (max-width: 600px){ h1 {font-size: 200px; } div { position: absolute; } } media가 screen이며 너비가 600px 이하인경우, h1의 ..

Html icons created by Pixel perfect - Flaticon HTML: Hyper Text Markup Language 하이퍼텍스트 마크업 언어 하이퍼 텍스트: 인터넷에서 사이트끼리 접속을 매개해 주는 링크 마크업: Tag(태그)들의 집합 Tag: 요소의 배치방식이나 요소간 관계등의 특징을 정의하기 위한 도구. html은 요소의 앞과 뒤에 태그를 붙여 특징을 정의한다. ex) 요소 앞에 있는 태그를 opening tag(여는 태그), 뒤에 있는 를 closing tag(닫는 태그)라 한다. 단일 태그로 존재하는 요소 : 줄바꿈태그. 앞뒤 태그가 따로 존재하지 않는다. 태그속성(attribute) 태그에 포함되는 문자를 "속성"이라 한다. 각 요소들의 행동 및 배치구조를 나타내기 위..

Grid(그리드)? 평행선과 수평선으로 이루어진 격자구조의 요소. 일반적으로 row(행): 가로줄과 column(열): 세로줄로 구성된다. 구글 크롬 시작화면의 웹페이지 아이콘 링크들도 일종의 그리드 배치로 볼 수 있다. ( HTML 소스는 안 까봐서 저게 실질적인 어떤 라이브러리의 그리드 구조인지는 모른다.) 부트스트랩에서는 responsive(반응성이 있는) 그리드를 제공해 준다. 이 말은 웹페이지 방문자가 사용 중인 기기의 화면크기, 혹은 브라우저의 크기에 반응하여 요소들의 배치가 자동으로 번경됨을 뜻한다. 크롬을 통해 예시를 살펴보자 크롬브라우저의 가로길이를 늘리자, 한 행에 배치되어 있는 아이콘의 개수가 3개에서 5개로 늘었다. 부트스트랩이 반응하는 화면 사이즈 표 출처 : 부트스트랩 그리드 d..