본문 바로가기

javaScript

 (20)
JSON JSON은 JavaScript Object Notation 데이터 교환을 위해 만들어진 객체 형태의 포맷을 말한다. 네트워크(서버-클라이언트)에서 데이터를 주고 받을 때 송신자와 수신자 모두 같은 포맷의 형식으로 데이터를 주고 받아야 데이터 전송이 가능하고 데이터를 처리할수 있을 것이다. 데이터의 형식을 맞추기 위해 JSON을 사용한다. JSON 특징 JSON은 객체 형태이며 객체 안에 내용은 문자열(String)이다. * 객체는 타입 변환을 이용해 String으로 변환할 경우 객체의 내용은 바뀌지 않는다.(console.log result [object object]) JSON.stringify(): 객체를 JSON으로 변환 JSON.parse(): JSON을 객체로 변환 JSON.stringify()..
내장고차 함수 Array.reduce()에 대해 알아보자 내장고차 함수이면서 배열의 메서드로 사용하는 reduce 이해가 되다 가도 하다보면 헷갈리는 reduce.. 찬찬히 한번 보자 reduce의 과정 배열의 각 요소를 특정 방법(함수)에 따라 원하는 하나의 형태로 응축한다. (reduction) reduce의 특징 reduce(acc(누적값), cur(현재값or초기값)) 기존 배열을 수정하지 않는다. 배열을 하나의 값으로 만든다. 초기값을 정할 수 있다. 초기값이 없다면, 배열의 첫번째 요소가 초기값이 된다. 초기값을 정하면 배열의 첫번째 요소가 현재값이 된다. 값들을 누적해서 더해준다. 문자열이나 숫자를 합치거나 뺄 수 있다. 작은수, 큰수를 비교 할 수도 있다. acc에는 함수가 들어갈 수 있다. reduce는 이렇게 여러 데이터를, 하나의 데이터로 응..
AJAX(feat. SPA, Fetch, JS, DOM, XHR...) AJAX ? AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법. AJAX의 가장 큰 특징은, 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것. 예로 네이버 검색창을 한번 보자. 검색창에 한 글자를 입력할 때마다, 해당 글자로 시작하는 단어들을 서버로부터 받아와, 아래 추천검색어로 보여주게 된다. 다시 말해, 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링 되며, 여기에 AJAX가 사용된다. AJAX의 두가지 포인트 AJAX를 구성하는 핵심 기술은 JavaScript와 DOM, 그리고 F..
동기(sync)와 비동기(async) 비동기에 앞서 Blocking || Non-blocking과 callback에 대해서 짚고 넘어가자 Blocking || Non-blocking 전화와 문자를 예로 설명할 수 있다. 전화 문자 하던 일을 멈추고 받아야한다(blocking) 확인 후, 나중에 답장할 수 있다(none-blocking) 요청에 대한 결과가 동시에 일어난다(Synchronous) 요청에 대한 결과가 동시에 일어나지 않는다(Asynchronous) callback 앞서 공부한 callback에 대해서 알아야 한다. > calback in action : 반복 실행하는 함수 (iterator) [1,2,3,4].map(function(el, idx) { return el * el } ) > callback in action : 이..
class & instance (feat. OOP, ES6) class와 instance의 개념을 잘 잡아둬야 나중에 후회하지 않는다... class와 instance에 대해 알아보자 class 먼저 알아야 할것은 객체지향 프로그램이이다. 객체 지향 프로그래밍(OOP)은 하나의 모델이 되는 청사진(blueprint)을 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. 위의 설명에서 하나의 모델이 되는 청사진을 => class 그 청사진을 바탕으로 한 객체를 => instance 우리가 아는 객체와는 구분을 지어야 한다. 그냥 객체가 아니라 청사진을 바탕으로한 객체를 instance(object)라고 하고 청사진을 클래스(class)라고 한다. *ES5에서는 클래스는 함수로 정의 했고, ES6에서는 class라는 키워드로 정의한다. // ES5 ..
사고의 추상화(feat. filter, map, reduce) 추상화? 복잡한 어떤 것을 압축해서 핵심만 추출한 상태로 만드는 것이 추상화 우리 일상에서 추상화가 아닌것을 찾아보기 힘들다. 네이버 검색창에 검색어를 입력 했을 때, 검색어가 어떻게 입력이 되고 데이터가 전송이되고 어떻게 처리되는지... 알지 않아도 우리는 편하게 검색어만 입력해서 사용할 수 있다. 카카오톡에서 메세지를 보낼 때, 메세지를 입력하지만 이 메세지가 어떻게 입력이되고 어떻게 서버에 전송이되는지 알지 않아도 우리는 편하게 메세지를 보낸다. 이렇듯 추상화는 우리 일상의 대부분을 차지한다. 자바스크립트를 비롯한 대부분의 언어 역시, 추상화의 결과이다. 크롬 개발자 도구 console에서 코드를 입력하면 보이지 않는? 우리가 과정을 알지 못해도 코드의 결과를 볼 수 있다. 이 과정을 자바스크립트 ..
Element와 node의 차이 DOM을 사용하다보면 element를 자주 보게 된다. 그렇다면 element와 node의 차이는 무엇일까?? node DOM 문서는 node의 계층 구조로 이루어져 있다. 계층 구조란? 상위에서 하위까지 단계를 말한다. 아래 그림처럼 각 층마다의 level 단계를 갖는다. node에는 요소, 텍스트, 주석 등 여러가지 유형을 가지고 있으며, element는 이러한 node 유형중 하나이다. element 태그로 작성된 노드를 말한다. element는 node의 여러 종류중 하나이다. 위 그림에서 element는 , , , , , ...등 이다. DOM을 조작할 때는 주로 element를 탐색하는 방법을 많이 사용한다.
DOM(Document Object Model)의 구조 자바스크립트 DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, JavaScript를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있다. 그렇다면 HTML에서 JS는 어떻게 실행 될까? 웹 브라우저가 작성된 코드를 해석하는 과정에서 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춘다. HTML 해석을 잠시 멈춘 웹 브라우저는 요소를 먼저 실행한다. 요소는 등장과 함께 실행된다는 사실! 자바스크립트에서 DOM은 documnet 객체에 구현되어 있다. 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 documnet 객체를 조회할 수 있다. consol..

티스토리툴바