본문 바로가기
관리자

Programming-[Frontend]

(62)
Javascript / 함수 / call, apply, bind 1. call과 apply method 지난 this에 관한 글에서 일반적으로 this는 전역객체나 부모객체를 가리키는 반면, call, apply는 사용자가 정해주는 객체를 this로 취급한다는 것을 배웠다. (Javascript / Execution context, this) call, apply, bind는 함수를 호출하는 또 다른 방법으로, 함수이름.call/.apply/.bind(thisArg, 인자) 로 표현된다. 만약 첫번째 인자인 객체를 입력하지 않으면, 이 메소드들은 자동으로 전역객체인 window를 가리키게 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 let a = { food: 'Cheese Burger' }; let b = { food: 'Chicken',..
Javascript / Array / sort sort는 Javascript Array의 내장함수이다. 즉, Array.Prototype.sort 이다. 1. 문법 array이름.sort([compareFunction]) compareFunction을 생략하면, 오름차순으로, ASCII 문자 순서대로 정렬된다. 2. 정렬 순서 compareFunction을 생략하면 ASCII 문자 순서대로 정렬되므로, 글자의 경우 알파벳 순서대로 정렬된다. 하지만, 숫자의 경우 문자로 형변환 하기 때문에 오름차순, 내림차순으로의 결과를 바로 얻어낼 수 없다. 1 2 3 let nums = [20, 10, 5,4,3,2,1]; nums.sort() // 결과 : [1, 10, 2, 20, 3, 4, 5] cs 따라서 내장되어 있는 compareFunction을 이용하..
Javascript / Execution context, this 1. Execution Context Javascript engine은 code가 실행되면 제일 먼저 Global memory를 생성한다. 이 Global memory에는 변수와 함수들의 이름과 값(주소)이 memory table 형태로 저장되는데, 이것을 execution context라고 부른다. Global execution context는 코드의 모든 것을 포함하는 전역 컨텍스트이며, 페이지가 종료될 때까지 유지된다. 이후 함수가 하나 호출될 때마다 local execution context가 생긴다. (단순 block 단위에서는 생기지 않고, 함수 단위에서만 생긴다.) execution context가 생성되면, context 안에 arguments, variable(변수 및 함수), scope..
Javascript / API, Server 기초 개념 1. Server Server는 프로그램의 사용자(Client)가 요청하는/요청할 데이터를 저장하고, 송·수신 하는 역할을 하는 것이다. 보통, Client는 서버에게 HTTP(URL) 형식으로 데이터를 요청하고 서버는 text, HTML, JSON 등의 형태로 Client의 요청에 응답해주게 된다. 단순히 데이터 요청, 응답만 하는 것이 아니라 client가 server에 데이터를 게시(post)할 수도 있다. 우리가 흔히 작성하는 Blog 등도 이런 방식으로 server와 통신한다고 생각하면 된다. HTTP 요청은 fetch API를 통해 할 수 있다. Javascript를 통한 날씨 정보 요청 예제를 살펴보자. 날씨 정보가 있는 날씨 API는 대표적인 사이트로 openweathermap.org에서 ..
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..