[JavaScript] JavaScript HTML template

1. HTML template - 반복적인 HTML 부분을 화면에서는 보이지 않는 template로 만들어 두고 서버에서 전달되는 JSON과 연결하여 반복적인 tag를 만들어 내는 기법 - 즉, 반복적인 HTML 코드를 template에 넣어놓고 JavaScript를 이용해서 받은 데이터로 교체해주고 HTML로 나타내주는 것이다. - 바꾸고 싶은 데이터 부분을 {icon}, {img}, {title} ...로 해준 다음 JavaScript에서 서버에서 받은 데이터(JSON)의 각 데이터로 replace를 해준다. 그런 다음 원하는 태그 쪽에 appendChild() 해주면 된다. - 여기서 그냥 태그를 appendChild를 해주면 여러 개가 적용이 되지 않는다. - 그래서 태그이름.cloneNode(t..

[JavaScript] JavaScript 함수형 프로그래밍

1. 함수형 프로그래밍 Simple is the Best! 즉, 기능 동작을 위해 간단하고, 간결하고, 간소하게 작성하는 방법론 함수형 프로그래밍은 객체지향 프로그래밍과 비교되는 방법론으로 객체지향 프로그래밍에 비해 더 간결하고, 더 예측 가능하고, 더 테스트하기 쉬운 경향이 있다. 단, 이 장점들이 단순히 함수형 프로그래밍이 객체지향 프로그래밍에 비해 더 쉽다는 것은 아니다. 2. 함수형 프로그래밍의 3대 개념 ① 순수 함수(Pure Function) ② 불변성(Immutable state) ③ 1급 객체(First-class) 3. 순수 함수(Pure Function) - 같은 입력 값이라면, 항상 같은 결과 값을 반환한다. - 외부적인 것에 영향을 받지 않는다. - 예측이 가능해야 한다. 4. 불변..

[JavaScript] DOM 노드 읽기, 탐색, 추가, 삭제

1. DOM 노드 - DOM : Document Object Model - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법 - 웹 문서의 모든 요소들을 객체로 만들고 이를 트리 구조로 구성한 모델 - 브라우저의 문서에 객체(태그)를 의미 2. DOM 노드 읽기 - 노드 읽기 : 문서에 DOM 노드(객체)를 가져와 자바스크립트에서 읽거나 사용 getElementById() 요소에 지정된 id를 통해 객체를 가져옴 getElementsByTagName() 요소에 태그명을 통해 객체를 배열로 가져옴 getElementByName() 요소에 이름을 통해 객체를 배열로 가져옴 getElementByClassName() 요소에 지정된 클래스명을 통해 객체 배열을 ..

[JavaScript] 문서 객체 모델(DOM)

1. 문서 객체 모델(DOM) - DOM : Document Object Model - 웹 문서의 모든 요소를 자바스크립트를 이용해 조작할 수 있도록 객체를 사용하여 문서를 해석하는 방법 - 웹 문서의 모든 요소들을 객체로 만들고 이를 트리 구조로 구성한 모델 - DOM 트리 구조 : 웹 문서의 요소를 부모와 자식 요소로 구성된 트리 구조 2. 여러 DOM 노드 문서 노드(Document Node) - 트리의 최상위 존재하며, 하위 자식 노드에 접근하기 위해선 반드시 Document Node를 통해야만 한다. - DOM 트리에 접근하기 위한 시작점 요소 노드(Element Node) - 웹 문서의 태그 Element Node로 표현 - 모든 Element Node는 Attribute/Text Node를 ..

[JavaScript] JavaScript Array 객체

1. Array 객체 생성 let arr = [값1, 값2, ...]; -> 생성과 동시에 초기화 let arr = new Array(); -> 배열을 생성하기만 함 let arr = new Array(배열크기); -> 생성과 동시에 공간을 만들어 둠 2. 주요 메소드 pop() arr.pop(); 배열의 마지막 요소를 제거 후 리턴 push() arr.push("안녕"); 배열의 마지막에 새로운 요소 추가 reverse() arr.reverse(); 배열의 요소 순서 반전 sort() sort((a ,b) => {return a - b} sort((a ,b) => {return b - a} arr.sort(); arr.sort((a ,b) => {return a - b}; arr.sort((a ,b) ..

[JavaScript] typeof / instanceof, String 객체

1. typeof, instanceof - typeof : 피연산자의 데이터 타입을 반환하는 타입 연산자 - instanceof : 객체가 특정 객체 타입인지 확인하는 비교 연산자 2. String 객체 let str = "가나다"; -> String 변수 let str = new String("가나다"); -> String 객체 3. String 객체 주요 메소드 charAt(position) str1.charAt(1); 해당 인덱스 문자 반환 charCodeAt(position) str1.charCodeAt(1); 해당 인덱스 문자를 유니코드로 반환 concat(args) str1.concat("1234"); 매개변수로 입력한 문자열을 결합 indexOf(search, position) str1.in..

[JavaScript] JavaScript 내장 객체, Object 객체, Number 객체

* 프로토타입 이해 https://tadaktadak-it.tistory.com/80?category=1024177 [JavaScript] 객체와 상속, 프로토타입 1. 객체 - 추상적인 개념이 실체화 된 것 - 프로퍼티(자바에서 필드)들로 이루어진 하나의 집합 2. 객체 선언 리터널을 이용한 객체 생성 - 장점 : 객체를 빠르고 간단하게 만들 수 있음 - 단점 : 비 tadaktadak-it.tistory.com 1. 내장 객체 - 브라우저의 자바스크립트 엔진에서 내장하고 있는 객체 - 우리가 만든 객체가 사용자 정의 객체가 아닌 자바스크립트에서 미리 만들어 놓은 객체를 의미 - 밑에 처럼 내장 객체의 종류는 어마무시하게 많다. AggragateError, Array, AsyncFunction, Ato..

[JavaScript] JavaScript 객체

https://tadaktadak-it.tistory.com/80?category=1024177 [JavaScript] 객체와 상속, 프로토타입 1. 객체 - 추상적인 개념이 실체화 된 것 - 프로퍼티(자바에서 필드)들로 이루어진 하나의 집합 2. 객체 선언 리터널을 이용한 객체 생성 - 장점 : 객체를 빠르고 간단하게 만들 수 있음 - 단점 : 비 tadaktadak-it.tistory.com 1. 객체의 기본 및 구조 - 다양한 데이터를 가질 수 있는 key, value 형식의 property 여러 개를 가질 수 있는 데이터 집합 - 자바스크립트에서의 객체란 자바스크립트 그 자체라고 말해도 과언이 아님 - 추상적인 개념이 실체화 된 것 - 프로퍼티들로 이루어진 하나의 집합 프로퍼티(property) ..

[JavaScript] 변수의 종류(var, let, const)

https://tadaktadak-it.tistory.com/74?category=1024177 [JavaScript] 스코프, 호이스팅, 변수의 선언 방식 1. 스코프(scope)와 호이스팅(hoisting) 스코프(scope) - 변수에 접근할 수 있는 범위 - 변수의 생명주기 - 변수의 유효 범위 { } 호이스팅(hoisting) - 변수나 함수의 선언이 어디에 있든 상관없이 다른 코드 tadaktadak-it.tistory.com 1. 변수의 종류 var : 자바스크립트의 기본 변수로 초기에 만들어진 변수(원조격) let : 나중에 추가된 변수로 블록 범위 변수이다. const : 나중에 추가된 변수로 블록 범위이면서 상수이다. var, let, const 차이점 1. 중복선언 가능 여부 2. 재..

[JavaScript] JavaScript 이벤트

1. 이벤트와 이벤트 핸들러(리스너) 이벤트 - 웹 페이지에서 키보드, 마우스 클릭, 마우스 이동 등 동작의 사건을 발생시키는 것 이벤트 핸들러(리스너) - 웹 페이지에서 이벤트가 발생 할 경우 호출되도록 등록하기 위한 함수 - 즉, 특정 함수를 이벤트에 등록하여 해당 함수(기능)을 하도록 함 2. 이벤트의 종류 마우스(Mouse) 마우스 클릭, 이동, 포커싱, 동작과 관련된 이벤트 click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave 키(Keyboard) 키보드의 키 업/다운 및 타이핑과 관련된 이벤트 keydown, keyup, keypress, keycode 폼(Form) 입력폼 요소에서 발..