본문 바로가기
728x90
반응형

📌 Front End147

[TypeScript] 타입스크립트 타입(자료형) ✍️ Summary타입스크립트 자바스크립트 타입TypeJavaScriptTypeScript내용NumberOO숫자(정수, 실수, Infinity, NaN)StringOO문자열작은따옴표('), 큰따옴표("), 백틱(`)BooleanOOtrue / falseNullOO값이 없는 상태UndefinedOO값이 할당되지 않은 상태SymbolOO고유하며 수정 불가능한 데이터 타입 (주로 객체 프로퍼티의 식별자로 사용되며 ES6에서 추가)ObjectOO객체형(참조형)ArrayXO배열TupleXO고정된 요소의 수만큼의 자료형을미리 선언 후 배열로 표현(갯수와 자료형이 고정된 배열)UnionXO변수의 값이 여러 타입을 가지는 경우 타입 사이에 파이프( | ) 기호를 사용하여 정의EnumXO열거형 (숫자 값 집합에 이름을 .. 2024. 7. 22.
[TypeScript] TypeScript 개발환경 세팅하기 👉 선행작업이 필요합니다.이에 대한 방법은 아래 링크를 참고해 주시기 바랍니다.https://creative103.tistory.com/187 [NodeJS] Node.js 환경에서 TypeScript 실행환경 세팅하기Node 설치 (LTS)Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 프로creative103.tistory.com🗂️ 새 작업공간 폴더 생성🗂️ 기존 파일 - 복사해서 가져오기".. 2024. 7. 19.
[NodeJS] Node.js 환경에서 TypeScript 실행환경 세팅하기 Node 설치 (LTS)Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 프로젝트 파일 생성NodeJS 설치가 완료되었다면 커맨드 창을 열고 (윈도 키 + R > cmd 입력 후 엔터)타입 스크립트 연습용 프로젝트를 생성할 경로로 이동한다. 비주얼 스튜디오로 해당 프로젝트 폴더를 연다.# 터미널 창ctrl + Shift + `(Backtick)# 노드 버전 확인node -v🗂️ Node.js 환경변수 .. 2024. 7. 15.
[JavaScript] Console API 종류 (다양한 콘솔 API 모음) ✍️ Console Method 목록console.log(console); 콘솔 출력 - console.log( ... )인자로 전달된 값들을 화면으로 출력해준다. 콘솔 창 초기화 - clear단어 그대로 콘솔 창에 입력된 모든 것들을 초기화 시켜준다.  특정 시점부터의 디버깅이 필요한 경우 해당 시점의 맨 앞에서 실행시켜주면 콘솔 확인이 편리하다.console.log(document.body);console.clear();const data = { a: 1, b: 5 };console.log(data);  로그 레벨 - debug / info / warn / error레벨로 구분된 로그 정도로 생각하면 될 것 같다.  기본적으로 직관적 스타일이 적용된 로그를 볼 수 있다. console sidebar .. 2024. 7. 15.
[JavaScript] 자바스크립트 콜백 함수(Callback Function) - 선언적 함수, 익명 함수, forEach(), map(), filter() 콜백 함수 (Callback Function)자바스크립트에서 함수도 하나의 자료형으로 본다. 그래서 매개변수로 함수를 전달할 수 있다. 매개변수로 전달하는 함수를 콜백함수라고 한다.콜백 함수 종류1. 선언적 함수2. 익명 함수 1. 선언적 함수// ▶ 함수 선언function callThreeTimes(callback) { for(let i=0; i 2. 익명 함수// ▶ 함수 선언function callThreeTimes(callback){ for(let i=0; i콜백 함수 활용 함수1. forEach()2. map()3. filter()1. forEach()forEach 함수는 배열이 가지는 함수로써 배열 내부의 요소를 사용해서 콜백 함수를 호출해 준다. 📝 forEach() 형태// 요소 : 배.. 2024. 6. 16.
[JavaScript] 자바스크립트 문서 객체 모델(DOM) - DOM Tree, DOM API, DOM 노드 접근, DOM 노드 탐색, DOM 노드 조작, DOM 이벤트 처리 문서 객체 모델 DOM (Document Object Model)DOM 이란 Document Object Model의 약자입니다. 번역하자면 문서 객체 모델인데요.여기서의 문서는 HTML 문서를 말한다. 브라우저는 웹 문서를 로드한 후, 파싱하여 DOM을 생성한다. DOM은 모든 요소, 속성, 텍스트를 객체로 만들어 이 객체들을 부자 관계에 따라 트리 구조로 구성한 것을 의미한다. 정적인 웹페이지를 변경하는 유일한 방법은 DOM을 변경하는 것이며, 이 때 필요한 것이 DOM API이다.DOM Tree 구성요소문서 노드(Document Node)  ➡️  최상위 트리이자 접근의 시작점이다.요소 노드(Element Node)  ➡️  HTML 요소를 표현한다.속성 노드(Attribute Node)  ➡️  .. 2024. 6. 16.
[JavaScript] 자바스크립트 배열(Array) - 배열 생성(리터럴, Array 생성자 함수), 배열 요소 접근, 배열 메서드(Array.prototype 메서드), 배열 반복문(for of 문, forEach 문) 배열(Array)자바스크립트에서 배열은 여러개의 값을 저장하고 관리하는데 사용되는 아주 기본적인 자료구조이다. 자바스크립트 배열은 타입이 고정되어 있지 않아서, 서로 다른 타입의 원소들을 적재할 수가 있다. 그리고 배열은 동적으로 크기가 변할 수 있어 자바(Java)와는 달리 크기를 지정할 필요가 없다.  📍 배열(Array) 용어배열(array) : 이름과 인덱스로 참조되는 정렬된 값의 집합배열 요소(array element) : 배열을 구성하는 각각의 값인덱스(index) : 배열에서의 위치를 가리키는 숫자배열 생성 방법1. 배열 리터럴2. Array() 생성자 함수// 배열 리터럴let 배열명 = ['요소', '요소', '요소',...];// Array() 생성자 함수let 배열명 = new Ar.. 2024. 6. 15.
[JavaScript] 자바스크립트 객체(Object) - 객체 생성(리터럴, Object 생성자 함수), 객체 접근, 객체 반복문(for in문), 객체 this 키워드 객체(Object) 자바스크립트 객체는 {} key:vlaue가 모여 있는 Map 형식이다.자바스크립트 객체 형식 : { K: V, K:V, K:V } 객체내 Value에는 String, Number, Boolean, Array, Object, null, 함수까지 다양한 자료형이 올 수 있다.객체의 key는 무조건 String으로 저장된다.자바스크립트 객체 모양의 문자열을 JSON(JavaScript Object Notation, 자바스크립트 객체 표기법) 한다.JSON의 형식 :  "{ K:V, K:V, K:V }" 📍 프로퍼티(property)란?객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.이름과 값으로 구성된 정렬되지 않은 집합프로퍼티는 함수도 저장할 수 있음 ➡️ 프로퍼티 메서드.. 2024. 6. 15.
[JavaScript] 자바스크립트 요소 추가하기 - .createElement(), .createTextNode(), .appendChild() JavaScript 요소 추가자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다.  .createElement().createTextNode().appendChild()노드 객체 생성하는 주요 메서드메서드생성하는 노드 객체document.createElement(요소 이름) 요소 노드 객체document.createAttribute(속성 이름) 속성 노드 객체document.createTextNode(텍스트)텍스트 노드 객체document.createComment(텍스트) 주석 노드 객체document.createDocumentFragment()도큐먼트 프래그먼트document.importNode(다른 문서의 노드, deep)다른 문서에 있는 노드를 복사한다. deep을 true로 설정하면.. 2024. 6. 13.
728x90
반응형

티스토리툴바