반응형

프로그래밍/Frontend 7

[TypeScript] Type + JavaScript - (2) Interface

1. 타입 호환성 (Type Compatibility, Type Equivalence)  타입 호환성은 프로그래밍 언어론(Programming Language Theory)에서 언급되는 내용으로 어떤 맥락에서 타입 A를 가진 객체가 타입 B와 동등한지(취급해도 되는지)를 판단하는 것이다. 만약 A타입을 가진 객체를 B로 취급해도 된다면 A를 B로 할당 가능하다고 하며, 타입 A는 타입 B의 서브타입이라고 한다. 그리고 프로그래밍 언어마다 이러한 타입 호환성의 정의 범위는 다르다.  예컨데 C#이나 자바 등의 언어에서 '사람'이라는 클래스를 확장한 '학생'이라는 클래스가 있을 경우 '학생'클래스는 '사람' 클래스로 취급할 수 있으며 '학생'클래스는 '사람'클래스의 서브타입이다. 하지만 '강아지'라는 클래스..

[TypeScript] Type + JavaScript - (1) 기본 타입

1. 기본 타입 자바스크립트의 원시 타입을 대부분 지원하며 추가적으로 Enum(열거)타입과 기타 여러 유용한 타입을 지원한다. 다만 원시값을 래핑하는 Boolean, Number, String 내장 객체타입도 지원하지만 매우 드물게 사용되므로 웬만해선 소문자로 시작하는 원시 타입을 사용하자. boolean(불리언)true/false값const a : boolean = false;const b : boolean = 1;// Error : Type 'number' is not assignable to type 'boolean'.ts(2322) number(숫자)JavaScript와 같이 TypeScript에서도 모든 숫자는 부동 소수점 값이다. 모든 부동 소수에는 number라는 타입이 붙여진다. TypeS..

[JavaScript] 자바 스크립트 기초 - (1) 기본문법, 자료형, 변수, 함수

Python기반 백엔드 과정을 배우고 있지만 프로젝트를 하면서 필수적으로 프론트엔드를 구현해야 하기 때문에 자바스크립트를 다루게 됐다. 기초가 없는 상태에서 필요한 자바스크립트 코드들을 구글링한 뒤 머리 깨져 가면서 커스텀하는 건 굉장히 비효율적이다. 그래서 자바스크립트를 기초부터 차근차근 공부해 볼 생각이다. 이 카테고리는 python 등 기본적인 프로그래밍 언어를 알고 있다는 가정 하에 (나한테) 필요한 부분만 정리해서 올릴 예정이다. 00. What is JavaScript? 넷스케이프에서 일하던 브랜든 아이크가 10일만에 설계해 첫번째 버전을 만든 언어인 자바스크립트는 이것저것 허점이 많고 불편해서 당시에는 묻힐 뻔하다가 지속적인 보완과 Ajax, jQuery의 등장으로 지금은 웹개발을 하는데 없..

[CSS] 03. CSS 핵심 (3)

Chapter 03. CASCADE CSS는 Cascading Stylesheet의 약자다. 여기서 cascade는 명사로는 다단으로 된 폭포를 의미하고 동사로는 상명하달 비슷한 의미를 가지고 있다. 즉 CSS는 여러 태그에 붙은 스타일의 속성이 겹칠 경우 순서를 정해서 차례로 적용하는 방식으로 작동한다. 위에서부터 (1) 브라우저가 기본적으로 페이지에 적용하는 스타일시트, (2) PC유저가 로컬에 적용한 스타일, (3) 작성자가 적용한 스타일, (4) 작성자가 !IMPORTANT를 선언한 스타일, (5) PC유저가 !IMPORTANT로 로컬에 적용한 스타일 로 된 레이어가 있다. 이중 !IMPORTANT가 선언되어 있는 레이어가 가장 우선순위가 높다. 따라서 각 속성에서 높은 우선순위에 있는 속성값이 ..

[CSS] 02. CSS 핵심 (2)

Chapter 02. display속성, 선택자 이번에는 자주 쓰는 display 속성인 블록과 인라인의 차이에 대해서 알아보고 기타 display 속성들과 함께 css 선택자를 정리한다. Display 속성 CSS에서 display속성은 화면에서 element들이 어떻게 보여지는지를 결정한다. 우선 HTML의 요소들은 크게 블록(block)요소과 인라인(inline)요소으로 나눌 수 있다. , , ~, 등의 블록 요소는 하나의 태그가 브라우저에서 좌우 공간을 다 차지하면서 독립적인 공간을 가지는 요소다. 따라서 블록 요소 아래에 다른 태그를 쓰면 다음 줄에 요소가 나타난다. 이와 달리 , , 등의 인라인 요소는 하나의 태그가 브라우저에서 크기를 가질 수 있는 그 영역만 차지해 좌우로 다른 태그들이 나란..

[CSS] 01. CSS 핵심 (1)

Chapter 01. 색상부터 단위, 박스까지 웹사이트를 만들면서 항상 CSS는 막히면 구글링을 통해서 해결법을 찾아왔다. 이번 기회에 한번 전체 정리를 해보려고 한다. 아주 기초적인 부분들은 빼고 핵심적인 부분만 정리해서 앞으로도 찾아볼 수 있도록 만드는 것이 목표다 CSS 파일(CSS files) 보통 CSS 파일은 HTML파일과 분리해서 사용한다. HTML파일에 태그로 style을 지정해 줄 수 있지만 코드가 복잡해질 수 있기 때문에 간단한 파일이 아니라면 분리해서 사용하는 것을 추천한다 home ┣ index.html ┗ style.css 주로 위와 같이 style.css로 이름을 짓지만 페이지마다 다른 css를 적용하거나 할 때는 다양한 이름으로 바꾸어 줘도 상관없다. 위의 코드를 적용해서 cs..

[HTML] 01. Introduction

1. HTML HTML(HyperText Markup Language)은 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어이다 HTML은 elements(요소)로 구성되어 있다 tag(태그)는 elements(요소)를 만들 때 사용하며 와 같이 태그를 구성할 수 있다 1.1 내포된 요소(Nesting elements) 요소안에 요소가 들어갈 수 있다 당근은 주황색이다 이러한 요소를 내포(Nesting)되었다고 표현한다 1.2 블록 레벨 요소 vs 인라인 요소('Block elements' vs 'inline elements') HTML에는 두가지 종류의 요소가 있다 1.2.1. 블록 레벨 요소(Block-level elements) 블록 레벨 요소는 웹페이지 상에 블록..

반응형