TypeScript 란• 타입스크립트 (TypeScript)는 MS에서 만든 대규모 어플리케이션 개발을 위한 소프트웨어 언어• ES6 + 정적 타입• ES6 는 Supset, Typescript 는 ES6 의 Super set • 타입스크립트는 ES6 의 모든 기능을 지원한다.• 정적 타입을 지원함으로 코드의 오류를 줄이고 쉽게 디버깅이 된다.개발환경• 타입스크립트를 브라우저의 JS Engine 이 해석하지 못한다.• 타입스크립트 코드를 브라우저에서 해석 가능한 자바스크립트 코드로 변형시켜야 한다.• 컴파일러(트랜스파일러)– tsc >npm install typescript>npx tsc main.ts • tsconfig.json 활용>npm init>npm install -D typescript>npx..

▼ HTML,JavaScript 문서더보기 Cat-1 Ragdoll British Shorthair Scottish Fold Bengal Siamese Maine Coon American Shorthair Russian Blue Cat-2 Sphynx Munchkin Persian Norwegian Forset Turkish Angora Bombay Selkirk Rex Munchkin  //요소 노드 주요 프로퍼티const myTag = document.querySelector('#list-1') HTML 문서를 ..

File 핸들링 제약• 브라우저에서 실행되는 프론트 웹 애플리케이션에서 사용자 컴퓨터에 저장되있는 파일을 핸들링하는 것은 일차적으로 금지되어 있다.유저가 브라우저에서 선택한 파일에 한해서만 자바스크립트로 읽어 들일 수 있고 서버에 업로드가 가능하다.사용자가 선택한 파일이란 이후에 살펴볼 을 통해 유저가 선택한 파일이거나아니면유저가 드래그&드랍으로 웹 페이지에 추가시킨 파일을 의미한다. • 사용자가 애플리케이션에 파일을 추가하기 위한 가장 기본적인 방법은 태그를 이용하는 방법이다. ▼ multiple 속성 • multiple 속성이 추가되면 사용자가 파일 선택 다이얼로그에서 여러 파일을 선택할 수 있다. ▼ accept 속성 • accept 속성을 이용해 사용자가 선택할 파일의 타입을 지정할 수 있다.  ..

DOM을 이용하면 자바스크립트로 웹 문서를 자유롭게 다룰 수 있다고 했을 때,하지만 웹 문서를 수정하거나 새로운 콘텐츠를 추가,삭제 하려면가장 먼저 다루고자 하는 노드를 접근하여야 한다. 일단 원하는 태그를 선택하는 가장 기본적인 방법은 document 객체의 메소드를 활용하는 것이라 했을 때, ▼ content라는 id 값을 가진 태그 콘솔에 출력하기// DOM 트리 접근하기const myTag = document.querySelector('#content')console.log(myTag);   위와 같이 document 객체의 메소드를 활용하여 태그를 선택했다면DOM 트리의 부모, 자식, 형제 관계를 활용해서 태그를 선택 하는 법을 알아보자.DOM Tree 접근하기(1) - 자식 요소 노드자식이라는..

DOM(Document Object Model) 문서 객체 모델​ Document Object Model(DOM) - 문서 객체 모델웹 브라우저 안에 나타나는 콘텐츠 부분을 웹 페이지라고도 부르지만 웹 문서라고도 표현한다.그래서 DOM을 간단하게 요약하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이다.그리고 이미 사용해봤던 document 객체가 이 웹 문서의 최상단 객체로 진입점의 역할을 하며,document 객체를 활용하면 웹 페이지 내부에 무엇이든 수정할 수 있고 새로운 컨텐츠를 만들어 낼 수 있다. ▼ 콘솔에 documnet 객체를 출력 // DOM (Document Object Model)console.log(document);console.log(typeof docume..

자바스크립트는 원래 웹 브라우저를 다루기 위해서 등장한 프로그래밍 언어이다.자바스크립트는 모든 것이 객체라고했듯이 우리가 사용하는 이 웹 브라우저를자바스크립트의 window라는 객체로 다룰 수가 있다.콘솔에 window 객체를 출력해보자면..▼ //window console.log(window);이렇게 윈도우 객체가 하나 나오는데, 펼쳐보면 정말 많은 프로퍼티들이 있다.윈도우 객체는 말 그대로 이 브라우저의 창을 대변하며 이 객체안에 있는 프로퍼티를 활용하면자바스크립트로 브라우저가 가지고 있는 다양한 정보를 얻거나,혹은 브라우저를 자유롭게 제어할 수 있다. window 객체 - innerWidth, innerHeight 프로퍼티예를 들어서 innerWidth, innerHeight 프로퍼티에 ..

1. 자바스크립트로 태그 선택하기 2. 유사배열배열과 유사한 객체 ex) HTMLCollection, NodeList, DOMTokenList, ...특징숫자 형태의 indexing이 가능하다.length 프로퍼티가 있다.배열의 기본 메소드를 사용할 수 없다.Array.isArray(유사배열)의 리턴값은 false다. 3. 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ... 이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일 이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다.  4. 이벤트 핸들러를 등록하는 2가지..

웹 페이지에서 일어날 수 있는 대부분의 일들을 Event 라고 부른다.웹 페이지에는 다양한 이벤트들이 존재하는데그냥 마우스를 움직여도 이벤트이고 키보드를 누르거나 페이지를 스크롤 하는 것도 이벤트이다. 다운받은 index파일을 열면 클릭버튼 하나있는데지금은 클릭해도 아무런 변화가 일어나지 않는다.자바스크립트를 통해서 이 HTML 버튼을 클릭했을 때의 특별한 동작을 만들어내는 법을 알아보자 이벤트와 버튼 클릭 더보기 Click! 우선 querySelector를 이용해서 버튼을 선택한다.▼//이벤트(Event)와 버튼 클릭const btn = document.querySelector('#myBtn')▲ 'btn' 변수 생성하고 querySelector 메소드를 이용해서 id인 #myBtn 을 ..

WebSocket▼ HTTP 프로토콜의 한계 • HTTP 프로토콜의 특징을 이야기 할 때 항상 화자되는 중요 특징이 Connection Oriented 와 Stateless 이며Connection Oriented 라는 특징은 네트워킹을 통해 데이터를 주고 받고자 하는 두 애플리케이션이 상호 연결된 상태에서 데이터 송신/수신이 이루어 진다.HTTP 프로토콜은 Connection Oriented 하다고 주로 말하는데,우리가 관심을 가지고 있는 웹 애플리케이션으로 이야기 하자면 브라우저와 웹 서버가 네트웍에서 연결된상태에서 상호 데이터를 주고 받으면서 브라우저에 백앤드 데이터가 출력되는 것이다. • HTTP 프로토콜이 가지는 또 하나의 중요 특징이 Stateless 이다.Stateless 는 웹 애플리케이션을..

CSS 선택자로 태그 선택하기(id 선택) - querySelector('#name')document.querySelector('#name')▲ querySelector 메소드의 파라미터로 CSS 선택자를 문자열로 전달해 준다. // css 선택자로 태그 선택하기const myTag = document.querySelector('#myNumber'); // = getElementById('myNumber')console.log(myTag);▲ 그리고 CSS 선택자로 id 선택은 #을 사용하므로 문자열의 소괄호 안에 넣어주고변수에 담아준 다음 콘솔에 출력하면 다음과 같이 결과가 나온다.▼이렇게 myNumber라는 id값을 가진 태그가 출력되었는데결국 querySelector('#myNumber')는 get..