Front-end
-
Tyepscript - Union, any, unknownFront-end/Typesrcipt 2023. 4. 12. 11:03
Tyepscript Union Tyepscript Union 이란 2가지 이상의 타입을 선언이 필요할때 선언할 수 있는타입이다. 선언 방법은 변수: (타입1 | 타입2) 로 선언할 수 있다. let myName: (string | number) = 'kim'; let myAge: (string | number) = 27; 배열변수에서의 union type 을 선언하여 숫자 또는 문자열 배열 변수를 만들 수 있다. let myNumArr: (string | number)[] = [1, 'zelord', 3]; // 숫자 or 문자열 배열 타입선언 배열 뿐만아니라 오브젝트변수에서도 union type 선언이 가능하다. let myObject: { name: (string | number) } = { name..
-
Typescript - Primitive TypesFront-end/Typesrcipt 2023. 4. 12. 10:05
Primitive Types Primitive Types(기본 타입)이란 string, null, boolean 원시타입이다. 타입스크립트의 변수 선언은 변수명: 타입 이렇게 선언할 수 있다. let myName: string = 'kim'; // myName이라는 변수는 string 타입이 된다 myName = 27; // 숫자타입인 number가 되서 에러가 나타난다. 여러가지 타입으로 변수를 선언 할 수 있다. let myName: string = '내 이름'; // string 타입 let myAge: number = 3; // number 타입 let myboolean: boolean = true; // boolean 타입 타입을 명시적으로 선언해도 되지만 생략이 되면 타입스크립트가 변수를 생성..
-
Typescript - 변수 선언Front-end/Typesrcipt 2023. 4. 11. 16:11
Typescript 변수 선언 Typescript 변수에 타입을 지정할 수 있다. let myName: string = '내 이름'; // string 타입 let myAge: number = 3; // number 타입 let myboolean: boolean = true; // boolean 타입 let myNull: null = null; // null 타입 let myUndefined: undefined = undefined; // undefined 타입 let myStrArr: string[] = ['1', '2', '3']; // 문자열 배열 타입 let myNumArr: number[] = [1, 2, 3]; // 숫자열 배열 타입 let myObject: { name: string } = ..
-
Typescript - 설치 및 셋팅Front-end/Typesrcipt 2023. 4. 11. 10:46
Typescript 란 Javascript를 기반으로 타입을 추가하여 더 나은 도구를 제공하는 강력한 유형의 프로그래밍 언어이다. Typescript를 쓰는 이유 Javascript 는 Dynamic Typing(동적 타입 / week Type) 을 제공한다. Dynamic Typing 이란 변수의 타입 지정(Type annotation)없이 값이 할당되는 과정에서 자동으로 변수의 타입을 지정(타입추론 / Type Inference)해준다. 또한 같은 변수에 여러 타입의 값을 할당 할 수 있다. var str = 'Hello'; var num = 31; var strArr = ['Js', 'HTML', 'CSS']; var dynamicVariable = 'String'; console.log(dynam..
-
HTML5 - 여러 값 표현 태그 - select / textareaFront-end/HTML5 2021. 10. 20. 23:22
여러 값 표현 태그 값을 표현하는 태그 중에선 여러 가지 방법이 있다. 태그 여려값 중 하나의 값을 선택하는 태그이다. 태그 안에는 값을 선택할 수 있는 태그가 있다. select 작성법 표시내용 표시내용 표시내용 // selected : 초기값 표시 select 속성으로는 size, multiple 이 있다. option 속성으로는 value, selected 가 있다. * selected가 없으면 첫번째 option의 값이 기본값으로 선택된다. select 태그 예시 select와 option태그 전화번호 : 010 011 016 019 없음 태그 option태그를 그룹으로 나누어 선택할 수 있도록 묶어주는 태그이다. optgroup 태그 작성법 표시 내용 표시 내용 표시 내용 표시 내용 optgro..
-
HTML5 - 폼 관련 태그 - part2 - input - 3Front-end/HTML5 2021. 10. 19. 23:26
Input태그 의 양식 태그 input태그는 날짜, 시간, 이메일, 주소 등을 입력할 수 있는 양식 태그들이 있다. color 속성 색상을 선택할 수 있는 속성이다. color 속성 작성법 속성으로는 value가 있다. color 속성 예시 type = "color" 색상 선택 : *초기 설정 값이 없을경우 기본값은 검은색을 나타낸다. date / datetime-local / month / week 속성 년도, 월, 일, 주를 선택하는 속성이다. date / datetime-local / month / week 작성법 속성으로는 min, max, step, value가 있다. date / datetime-local / month / week 예시 날짜 관련 태그 date / month / week / ..
-
HTML5 - 폼 관련 태그 - part2 - input - 2Front-end/HTML5 2021. 10. 19. 22:37
image 속성 이미지 형태의 제출 버튼(submit)을 생성한다. image 속성 작성법 image 속성 값으로는 src가 있다. image 속성 예시 type = "image" 이미지 형태의 제출버튼을 나타내는 태그 submit / reset 속성 submit : 서버의 폼 핸들러로 input에 입력한 값들을 제출(submit)하는 태그이다. reset : 폼 안에 모든 요소들의 값을 초기값으로 되돌리는 태그이다. submit / reset 속성 작성법 type = "submit / reset" submit : 서버의 폼 핸들러로 input에 입력한 값들을 제출(submit)하는 태그이다. reset : 폼 안에 모든 요소들의 값을 초기값으로 되돌리는 태그이다. submit / reset 속성으로는 ..
-
HTML5 - 폼 관련 태그 - part2 - input - 1Front-end/HTML5 2020. 12. 15. 17:43
input이란 사용자로부터 data를 입력 받기 위한 태그이다. 속성으론 type, value, name, placeholder 등이 있다. 그 중 type 속성으로는 여러가지의 값을 가져서 다양한 input형태를 만들 수 있다. text 속성 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 박스이다. text 속성 작성법 text 속성 예시 type = "text" 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 박스 아이디 : password 속성 입력된 텍스트를 브라우저별로 지정된 문자로 가리개 하는 타입이다. password 속성 작성법 password 속성 예시 type = "password" 입력된 텍스트를 브라우저별로 지정된 문자로 가리개 하는 타입 비밀번호 : * 비밀번호를 가려서 나타난다. bu..