본문 바로가기
관리자

Programming-[Frontend]/Javascript

(33)
Javascript / 비동기 호출의 개념, 타이머 API 기본 1. 비동기 호출(Asynchronous Call) 비동기 호출이란, 음식점에서의 주문 시스템에 비유해서 설명될 수 있다. 고객에게 주문을 받고(A) - 음식을 만들고(B) - 음식을 대접하는(C) 과정이 필요하다면, 고객 1명의 요청마다 A, B, C 과정을 차례대로 처리하여 과정을 완료하고 그 다음 고객의 주문을 받지는 않는다. 고객에게 주문을 받고, 요리가 만들어지는 동안에 또 다른 고객의 주문을 받게된다. 프로그램에서도 이와 마찬가지로, 하나의 함수(프로그램)이 실행되는 도중에 다른 프로그램이 동작하도록 호출하는 것을 비동기호출 이라고 한다. 정확한 이해를 위해서는 컴퓨터의 작동 구조와 프로세스(스레드)의 이해가 필요하지만, 여기서는 개념만 짚고 넘어가도록 한다. *동기, 비동기식 처리 모델( 출..
Javascript / DOM / template tag template tag는 javascript로 html의 element를 만들 때, 반복되는 구조를 쉽게 만들기 위한 도구이다. tag로 html 문서 내부에 내용을 작성하면 html 페이지 상에서는 보이지 않지만, javascript에서 활용하여 element를 만들면 그제서야 html 문서에 표현되게 된다. 아래와 같이 표현하여 template을 활용할 수 있다. document.importNode(template tag 선택자.content, true) template을 만들고, template 안의 내용을 .textContent를 이용하여 바꿔준다는 개념이다. 아래 예시를 보자. -HTML 1 2 3 4 5 6 7 8 9 ID PW Email Colored by Color Scripter ..
Javascript / Array / forEach, Every, Some 1. forEach method forEach method는 for 구문과 같이 배열의 인자를 순서대로 불러와서 특정 작업(callback 함수 내용)을 실행한다. for 구문에 있는 초기화, 조건식, 증감문 등이 없으므로 깔끔하게 작성이 가능하다. return이 없는 형태로, 모든 배열 요소에 대해 실행한 결과를 함수 안에서 표현만 가능하다. 배열.forEach(callback(인자, index, 배열)) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const arr = [1, 2, 3, 4, 5]; arr.forEach(function(element, index, array){ console.log(`${array}의 ${index}번째 요소 : ${element}`); }); //결과..
Javascript / DOM / Event (addEventListener, onclick) 1. 기본개념 Event란 웹페이지에서 사용자의 click, drag & drop, keyboard 입력 등을 의미한다. javscript에서 event 속성을 어떤 개체(예를 들면, 버튼)에 주게 되면, event 발생 시에 어떤 동작을 하도록 만들 수 있다. 대표적인 예로, click에 대한 아래 예제를 살펴본다. ex1) addEventListener를 활용하여 click 발생 시, 함수 실행 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 // HTML 코드 Submit // addEventListener 실행 코드 document.querySelector('#submit').addEventListener('click..
Javascript / Callback, High Order Function, hoisting 1. 함수 표현식(function expression)과 함수 선언식(function declaration) 함수를 만드는 방법은 함수표현식과 함수선언식이 있다. 1 2 3 4 5 6 7 8 9 10 11 12 alpha(5) // 결과 : ReferenceError: Cannot access 'alpha' before initialization beta(5) // 결과 : 25 //함수 표현식 const alpha = function(num){ console.log(num * num) } //함수 선언식 function beta(num){ console.log(num * num) } Colored by Color Scripter cs -함수 표현식 : 어떤 변수에 함수를 지정하는 방법으로, 이를 활용하..
Javascript / DOM / 기초 / createElement, textContent, append, remove, querySelector DOM의 정의 DOM : HTML 문서를 동적 제어하기 위해 Javascript로 표현한 것 (정도로 이해하자..) DOM은 Document Object Model의 약자로, JavaScript를 이용해서 HTML의 속성값을 제어하는 것을 뜻한다. HTML으로 작성된 문서를 동적으로 제어하기 위해서 HTML 문서를 Javascript형태로 바꾸는 것이다! (또는 HTML 문서 자체를 Javascript로 작성하는 것) 이것은 HTML과 javascript의 구조가 Tree구조로 되어있기 때문에 가능하다.(마치 조직도와 같이..) HTML의 트리구조를 Javascript의 트리구조로 치환하여 표현해보자. 다음의 HTML 코드는 1 2 3 4 5 Get one burger What kind of source..
Javascript / 기초 / 자료형(Primitive type, Reference type) Javascript의 자료형은 Primitive Type(원시 타입)과 Reference type(참조 타입) 이 있다. 1. Primitive Type Primitive type은 6가지 종류가 있다. Boolean, number, string, null, undefined 이러한 Primitive type은 만약 값을 복사하면, 값 자체를 복사하여 새로운 메모리에 할당해준다. 1 2 3 4 5 6 let a = 2; let b = a; b = 3; b // 결과 : 3 cs 2. Reference Type reference type은 Object로 기본적으로는 3 종류를 의미한다. 아래 3가지는 Javascript에서 만들어놓은 Class 이다. Array(배열), Object(객체), functio..
Javascript / 기초 / Testbuilder (Mocha, Chai) 1. Test builder를 사용하는 이유 Testbuilder는 TDD(Test-driven Development) 방법론의 Tool이다. TDD는 코드를 작성하기 전에 Test Case를 작성하는 방법으로, 다음과 같은 장단점이 있다. 장점. 코드를 작성하기 위한 방향, 코드의 구성에 대해 미리 기획과 고민이 완료되었다는 뜻이므로, 버그가 더 적은 코드를 짜게 된다. 이에 따라 프로그램이 장기적인 문제를 일으킬 확률도 줄어든다. 단점. 1. Proto type의 코드를 만들어 전반적으로 기획을 바꿔가며 유동적으로 대처하는 것이, 속도가 빠르다. 어떤 방법이 맞든지, 기초적인 Test Case는 짜야하고, 경우의 수를 따져봐야 하는 것은 기본이다. 이러한 맥락에서, Testbuilder tool(Te..