JavaScript

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] 쿠키(Cookies)

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

    [javascript] 예외 처리

    어떠한 이유로 프로그램 실행 중 오류가 발생할 수 있는데 이 오류를 위한 적절한 대책을 세우는 것을 '예외 처리'라고 합니다. 프로그램 실행 중에 발생하는 경우이므로 사용자를 생각해 적절히 대응할 수 있는 방안을 마련해 두는 것입니다. 참고로 예외와 오류는 다른데 오류는 잘못된 문법이나 오타 등으로 인해 아예 프로그램이 실행되지 않는 경우를 말합니다. javascript에서는 예외를 처리하는 방법으로 try ~ catch ~ finally를 사용할 수 있습니다. try 안에는 실행할 구문을 작성하며 catch안에는 예외발생시 실행할 구문을 작성합니다. cliel.com 위 예제에서는 id가 myspan이라는 요소를 가져와 click이벤트에 span_msg메서드를 연결하고자 하는 시도를 하고 있습니다. 하..

    [javascript] 이벤트 처리

    이벤트는 사용자의 특정 행위나 문서 안에서 발생하는 각종 변화를 말합니다. 버튼을 누르고 input박스에 입력하는 등 상호작용에 필요한 모든 동작은 물론 아래 예제와 같이 문서의 로드가 완료되는 것도 하나의 이벤트에 해당합니다. 위 예제는 window객체에서 문서의 로드완료를 알리는 onload라는 이벤트 속성에 function이라는 이벤트 리스너(또는 이벤트 핸들러) 메서드를 연결한 것입니다. 이 외에 특정 요소에 다음과 같이 임의의 메서드를 이벤트에 연결할 수도 있습니다. 예제는 span요소의 클릭이벤트(onclick 속성)에 span_msg라는 메서드를 연결한 것입니다. 물론 요소는 클릭 이외에도 다른 다양한 이벤트를 연결할 수 있습니다. cliel.com 위와 같이 javascript를 통해 이벤..