본문 바로가기

분류 전체보기182

TypeScript 설치 및 사용 node.js 설치 ⊙ https://nodejs.org Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org as by 2022/07/20 v16.16.0 LTS v18.6.0 Current ⊙ node.js version manager 1. nvm(권장) https://github.com/coreybutler/nvm-windows for Windows https://github.com/nvm-sh/nvm for macOS 2. n https://github.com/tj/n browser설치 보통은 Chrome 사용(권장) TypeScript 컴파일러 설치 1. npm (권장) npm i ty.. 2022. 7. 20.
[자바스크립트] 문서 객체 모델 DOM에서 노드 추가 및 삭제하기 DOM에서 노드 추가 및 삭제하기 웹 문서에서 처음 화면에는 내용이 보이지 않다가 클릭 등의 이벤트가 발생하면 내용이 나타나는 경우가 있다. 이러한 동작은 CSS의 display 속성을 사용해 만들 수도 있지만, DOM 트리에 새로운 노드를 추가(텍스트나 속성 노드 포함)하는 방법도 있다. 노드 리스트 DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트(node list)를 사용해야 한다. DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한 번에 여러 개 가져올 수 있다. 이렇게 여러 개의 노드 정보를 저장한 것, 노드를 여러 개 저장한 데이터 형태를 노드 리스트라 한다. 노드 리스트는 배열과 비슷해서 인덱스 번호로 특정 위치의 노드에 접근할 수 있다. 텍스트.. 2022. 7. 20.
[자바스크립트] 문서 객체 모델 DOM, 이벤트 문서 객체 모델이란? DOM은 웹 문서를 하나의 객체로 정의한다. 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 그래서, DOM은 웹 문서와 그 안의 모든 요소를 객체로 인식하고 처리하는 것을 말한다. 이러한 문서 객체 모델(DOM)의 구조를 DOM 트리로 나타낸다. DOM 트리 DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. DOM은 HTML 요소의 계층과 달리, 문서 안의 요소 뿐만 아니라 각 요소에 사용한 내용과 속성도 자식으로 나타낸다. ex. body의 자식인 h1의 요소 내용도 h1의 자식이 되지만, img 요소의 src이나 alt 속성도 각각의 자식이 된다. 부모와 자식 구조로 표시하면 마치 나무 형태가 되어 DOM 트리라고 한다. 이 DOM .. 2022. 7. 19.
SelfStudy 엘리코딩 자바스크립트 내부에 포함되어 있는 오브젝트들에 대한 레퍼런스 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference JavaScript reference - JavaScript | MDN This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more about this reference. developer.mozilla.org 2022. 7. 19.
[자바스크립트] 자바스크립트의 배경과 API, 공식 사이트 2004 년 AJAX : Asynchronous JavaScript and XML 비동기적으로 데이터를 서버에서 받아오고 처리할 수 있도록 도와주는 프로그램 2008년 구글에서 크롬이라는 JIT(just-in-time compilation) 엔진을 장착한 브라우저를 만들게 되었다. 자바스크립트를 실행하는 속도가 엄청나게 빠른 엔진 2015년 ECMA Script6 등장: 2009년 ECMA Script5로 표준화를 시작하고 그 뒤 현재까지 표준화된 자바스크립트의 큰 틀이 되고 있음. default parameter, class, arrow function이 이 때 정의되어 사용됨. ECMA Script5, 6이후로 자바스크립트가 브라우저에 구애받지 않고 잘 작동하게 되어 jQuery나 dojo, moot.. 2022. 7. 18.
[HTML] 김준태 강사 강의 복습 웹사이트에 들어간다고 하지만, 사실은 웹사이트에 우리가 주소로 접근(request, 요청)하는 순간에 해당 주소에 존재하는 HTML, CSS, JS 파일이 우리 컴퓨터에 순간적으로 다운로드(Response, 응답)되는 것일 뿐이다 ! 개발자 도구에서 네트워크를 통하여 주고받는 파일을 볼 수 있다. 결국 웹이라는 건, 어떤 주소에 접근하면, 어떤 파일을 건네줄 건지가 정의된 것이라고 생각하면 된다. HTML에서 Markup Language란 프로그래밍 랭귀지와 같이 특정한 논리를 가지고 작동하는 프로그램을 작성하기 위한 것이 아니라, 특정한 데이터를 표시하는 방법을 기술하는 언어를 말하는 것으로, 보여줄 데이터를 작성하는 방식을 정의한 언어일 뿐이다. CSS는 Cascading Style Sheet의 약자.. 2022. 7. 18.
MGS Day-14 증가, 감소 연산자 : 변수에 저장된 값을 1 증가 및 감소시키는 경우에 사용되는 연산자 연산자 연산자의 기능 ++i i의 값을 1 증가시킨 후, 증가된 값을 반환 i++ i의 값을 1 증가시킨 후, 증가되기 전 값을 반환 --i i의 값을 1 감소시킨 후, 감소된 값을 반환 i-- i의 값을 1 감소시킨 후, 감소되기 전 값을 반환 함수 선언식 : function 키워드로 단독으로 선언 함수 표현식 : 변수에 함수를 담음(할당), 익명 함수를 변수에 담아 호출할 수 있게 된다. 화살표 함수(Arrow function) : ES6에서 처음 등장한 새로운 함수 선언 방법 화살표 함수에는 없는 것 : 함수 이름, this, arguments 1. 빈 객체 user를 만든다. 2. user에 키가 name, .. 2022. 7. 15.
MGS Day-13 JS 클래스 JS에서의 기본값 this는 window인데(window를 가리키는데) use strict가 적용되면 undefined임 ! cf. ES2015 모듈에서는 strict 모드 자동 적용됨 객체 안의 this는 객체를 가리킴 ! 하지만, 이 객체의 this가 포함된 메소드를 변수에 대입해 확인해보면 이 때의 this는 window임을 확인할 수 있다. 즉, 꼭 객체 안에 있는 this라고 항상 객체를 가리키는 것은 아니란 말. => 결국, this는 함수가 호출될 때 정의된다 !!!! 쉽게 말해 함수 앞에 객체가 붙어있으면(객체.함수) this는 객체를 가리키고, 그 객체를 다른 변수에 담거나 하면 this는 그냥 window를 가리킴 + new가 붙는 생성자 함수일 때도, this가 windo.. 2022. 7. 15.
MGS Day-12 function getType에서 메소드 체이닝으로 slice(8, -1)을 한 이유는 원래 [object Number] 이런 식으로 출력되는 것을앞의 [object와 뒤의 ]를 잘라내어 앞에 나오는 object를 제거하고 보려고 하는 것이니 중요한 것은 아님 자바스크립트의 typeof의 명령어로는 명확한 자료형이 나오지 않기 때문에, getType이라는 함수를 개별적으로 만들어 명확한 자료형을 확인해 본 것이다. 이 때의 getType이라는 함수를 따로 파일에 저장하고 각각의 자바스크립트 파일에서 불러올 수도 있다. getType 함수를 따로 저장할 때 그 앞에 export default(다른 파일에 내보낼 기본 함수)를 붙여 준다. 이렇게 이것저것 JS를 실습하다 다른 자바스크립트 파일에서 자바스크립.. 2022. 7. 13.

티스토리툴바