본문 바로가기
관리자

Programming-[Frontend]

(62)
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 -함수 표현식 : 어떤 변수에 함수를 지정하는 방법으로, 이를 활용하..
Checkbox, Radio checkbox는 클릭하면 check가 되고, 다시 클릭하면 check가 해제된다. 또한 여러 개 항목이 있을 경우에도 중복으로 선택이 가능하다. radio는 클릭하면 check가 되지만, 다시 클릭하여 check 해제를 할 수 없다.(기본적으로는) 그리고, 여러 개의 항목 중 1개의 항목만 단독으로 선택 가능하다. checkbox의 작성방법은 아래와 같다. input tag를 쓰되, type은 checkbox로 주면 된다. name, value는 반응형 웹에서 쓰이는 개념으로, checkbox가 check 되었을 때, 서버에 전달할 이름과 값을 지정해주는 것이다. checked를 적어놓으면, checkbox가 check된 상태로 웹페이지가 로딩되게 된다. radio는 여러 개의 버튼 중, 한개만 선택되..
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..
Javascript / Array / filter, map, reduce 배열의 구성, 접근, 추가/삭제/변경 등 기초에 관한 내용은 다음 글에서 익히자. '2.배열 - 1-2. 배열 및 반복문' 1. filter method filter method는 배열의 요소 중, 특정 조건을 만족하는 값들만을 걸러 새로운 배열로 반환해주는 method이다. 배열.filter(filtering함수) 1 2 3 4 5 6 function isOdd(value) { return value % 2 !== 0; } var filtered = [12, 5, 8, 130, 44].filter(isOdd); filtered // 결과 : [5] cs callback함수의 형태로 작성할 수도 있다. 1 2 3 4 5 6 7 let arr = [12, 5, 8, 130, 44]; let oddNum =..
Javascript / 기초 / 객체지향 (Object-oriented) 객체지향 프로그래밍의 기초는 다음 글을 통해 파악할 수 있다. - 객체지향 프로그래밍 이 글은 기초 파악 후 Javascript에서의 객체지향 프로그래밍 방법에 대해 알기 위한 내용이 담긴 글이다. 간단하게, 객체는 동일한 속성을 갖는 변수들을 정의하기 위해서 사용한다. 동일한 속성을 갖는 집합체를 Class라 하고, Class의 객체들을 인스턴스(Instance)라 한다. Class는 속성과 메소드를 사용한다. ex) Car 객체 : brand, speed라는 속성을 갖고, speedUp이라는 메소드를 가짐. 속성 : Car1 = 'H사, 100km/h', Car2 = 'T사, 50km/h' 메소드 : Car1.speedUp(10) : 110 km/h, Car2.speedUp(50) : 100 km/h..
Javascript / 기초 / Scope, 선언키워드(var, let, const) 1. Global/Local Scope Scope는 어떤 변수가 적용되는 범위를 나타낸다. Global scope, local scope로 구분된다. >> 안쪽 scope에서는 바깥 변수/함수에 접근 가능하지만, 바깥쪽 scope에서는 안쪽 변수/함수에 접근할 수 없다. 1 2 3 4 5 6 7 8 9 let wish = 'I want'; function foods(){ let food = 'cheese burger'; return wish + ' ' + food; } foods(); // 결과 : 'I want cheese burger' food; // 결과 : ReferenceError 2. Block, function scope 2-1. Block Scope block은 중괄호'{ }' 안의 영역을..