Web/Javascript

[javascript] 모듈(module)

Javascript에서 var변수를 선언하거나 함수를 정의하면 global에 등록되어서 window를 통해 곧바로 호출할 수 있습니다. 이게 문제가 될 수 있는건 중복되는 이름으로 변수나 함수가 선언되면 충돌을 일으킬 수 있다는 것입니다. 예를 들어 다음과 같이 a.js와 b.js에 공통적으로 add()라는 함수가 정의된 경우 function add(x, y) { return x + y; }; 중복되는 이름이 존재하기에 오류를 일으키게 됩니다. 이 문제를 해결하려면 각 js파일을 html페이지에서 모듈로 추가해야 합니다. 이렇게 하면 어떤 모듈에서 외부로 노출할 함수를 다음과 같이 export해야만 사용할 수 있게 됩니다. 그래서 a.js파일에 있는 add()함수를 아래와 같이 했다면 export def..

[javascript] Promise와 async/await

Promise는 어떠한 처리를 하되 당장 결과를 반환하지 않고 원할 때 결과를 갸져 올 수 있는 객체입니다. var promise = new Promise((resolve, reject) => { if (true) { resolve('true'); } else { reject('false'); } }); //다른코드 promise.then((result) => { console.log(result); }) .catch((result) => { console.log(result); }); Promise를 위와 같이 정의해 두면 Promise 내부 코드는 즉시 실행됩니다. 그런 후 필요에 따라 다른 처리를 하고 이후에 then이나 catch를 붙여서 처리결과를 가져오는 형태인데 비동기 처리와 유사합니다. 만..

[javascript] 클래스(Class)

Javascript에서도 Class는 Prototype을 사용하던 이전방식에서 벗어나 좀 더 깔끔하게 코드가 만들어질 수 있도록 해줍니다. class Car { constructor(speed) { this.speed = speed; } currentSpeed() { return this.speed; } stop() { this.speed = 0; } static acc(speed) { return this.speed + speed; } }; var car = new Car(100); car.stop(); 기존에는 prototype을 통해 함수를 정의하고 직접 속성에 메서드를 할당하는 방식을 따랐지만 필요한 함수는 함수그대로 정의하고 정적 함수의 경우 static을 붙여주는 것만으로 끝낼 수 있습니다. ..

[javascript] 호출스택과 이벤트루프

javascript의 실행은 아래 구조로 간략하게 설명될 수 있습니다. 호출 스택은 javascript안에서 어떤 함수가 실행될 때 들어가는 부분이며 백그라운드는 타이며, 콜백등이 비동기 작업을 위해 대기하는 부분, 태스크 큐는 백그라운드 종료 후 호출되어야 할 콜백 함수들이 보내지는 부분입니다. function myfunc() { alert('aaa'); }; 위와 같은 함수가 호출된다면 호출스택에 myfunc()가 들어가고 그 안에서 다시 alert() 함수가 호출되므로 myfunc() 위에 alert() 함수가 쌓이게 됩니다. 이러한 구조 때문에 스택이 됩니다. 호출 스택은 LIFO구조이므로 alert() 함수 호출이 완료되면 호출 스택에서 사라지고 뒤이어 myfunc() 함수로 사라 잡니다. se..

[javascript] 스코프(Scope)와 호이스팅(Hosting)

1. 스코프 스코프는 변수의 선언 형태에 따라 전역 스코프와 함수 스코프로 나뉘게 됩니다. 전역 스코프는 함수의 외부에서 선언된 변수이며 지역 스코프는 함수 안에서 선언된 변수입니다. var global = 1; function myfunc() { var local = 2; console.log(local); console.log(global); } myfunc(); 예제를 보면 당연한 얘기지만 global변수는 어떤 함수에서든지 접근할 수 있으며 myfunc() 함수안에서 선언된 local은 myfunc() 함수를 벗어나게 되면 접근할 수 없게 됩니다. 그런데 만약 myfunc() 함수안에서 gloabl변수를 선언하게 되면 외부에 선언된 global은 무시되고 함수 내부에 선언된 global변수를 사용..

[Javascript] 웹브라우저 저장소

저장소라는 기능은 마치 애플리케이션을 만들 때 데이터베이스를 이용하는 것처럼 사용자 브라우저의 저장소에 데이터를 저장하는 곳을 말합니다. 다른 일반적인 방법으로는 쿠키라는 것을 이용할 수 있지만 그것과는 좀 다른 것입니다. 참고로 이 기능은 HTML5부터 지원하는 기능이므로 웹브라우저가 HTML5를 지원해야 합니다. 웹 브라우저가 저장소를 지원하는지의 여부는 window객체를 통해 확인할 수 있습니다. 예제에서는 localStorage를 통해서 로컬저장소 지원 여부를 확인해 보았습니다. 저장소는 로컬 저장소와 세션 자장소는 2가지가 존재하는데 로컬 저장소는 명시적으로 데이터를 삭제하지 않는 이상 계속 남아있게 할 수 있으나 세션 저장소는 웹브라우저가 종료될 때까지만 데이터를 저장할 수 있는 특징이 있습니..

[javascript] 쿠키(Cookies)

쿠키는 키와 값을 가질 수 있는 데이터로서 클라이언트 즉, 사용자의 웹브라우저에 저장 가능한 데이터입니다. 대부분의 경우 클라이언트 단에서 어떤 정보를 일정 시간 동안 저장하고자 하는 경우에 많이 사용됩니다. 예를 들어 어떤 웹사이트의 로그인에서는 사용자 아이디를 기억하는 기능이 있습니다. 사이트로 로그인할 때마다 매번 동일한 아이디를 입력해야 하는 불편함을 덜어주기 위해서입니다. 사이트마다 다를 수 있겠지만 이러한 기능을 구현하기에 쿠기가 많이 활용됩니다. 1. 쿠키 생성 쿠키는 다음과 같은 방법으로 생성할 수 있습니다. var date = new Date(); date.setDate(date.getDate() + 7); var _cookie = 'tmpdata=1234;expires=' + date...

[javascript / jQuery] 크로스 도메인

웹브라우저는 보안을 위해 현재 도메인에서 다른 도메인으로의 요청을 원칙적으로 차단하고 있습니다. 따라서 다음과 같은 시도를 하게 되면 브라우저는 크로스 도메인 관련 오류를 내뿜게 됩니다. 위 문제를 해결하기 위한 방법으로는 대략 2가지 정도를 알아보고자 합니다. 1. JSONP JSONP(JSON with Padding)는 다른 도메인에 요청을 보낼 때 callback매개변수를 보내면 응답을 보낼 때 JSON형태의 결과를 callback매개변수로 보낸 함수명으로 감싸 반환받는 형태를 의미합니다. 우선 예제작성을 위해 JSONP형태의 응답을 반환하는 서버를 만듭니다. public class HomeController : Controller { // GET: Home public ActionResult In..