Tech Diary Tech Diary

'this' 키워드의 다양한 사용 본인을 담고 있는 오브젝트를 표현 함수를 포함하고 있는 오브젝트 (오브젝트 내 함수(메서드)에서 사용, arrow function 일 시 함수밖에 있는 this를 그대로 사용) window (전역에 선언, 함수 안에 선언(strict 모드에선 undefined)) -> 함수나 변수를 전역 공간에 만들면 window(global object)에서 보관하기 때문 constructor에서의 this 키워드 새로 생성되는 object(instance)를 의미 addEventListener의 function에서 사용 시 e.currentTarget ( e.currentTarget는? 이벤트가 동작하고 있는 HTML 요소 ) 본인을 담고 있는 오브젝트를 표현 let data = {..

$(document).ready 사용 제이쿼리에서 $(document).ready을 사용해서 로그인 요청 알람을 만들어보자. 로그인 페이지 로그인이 안 된 클라이언트가 로그인이 필요한 페이지에 들어가려고 하면 어떻게 해야할까? 서버 입장에서는 자동으로 로그인을 할 수 있는 페이지로 이동시켜줘서 클라이언트에게 로그인을 할 수 있게 도와줘야한다. 그런데 클라이언트에게 아무런 메세지 없이 바로 로그인 페이지로 이동하면, 클라이언트 입장에선 오류로 인식할 수도 있고 원하는 페이지가 로그인을 요구하는 페이지인건지 알 수 없다. 그러므로 로그인이 필요하다는 alert를 이용해 클라이언트가 이를 이해하고 로그인 할 수 있게 도와주자. $(document).ready 로그인이 필요한 페이지로 이동하자마자 바로 aler..

var, let, const 자바스크립트에서 변수를 선언할 때 사용하는 var, let, const의 차이를 알아보자. var var는 const와 다르게 값이 변할 수 있는 변수를 선언할 때 사용된다. const와의 차이는 변수이냐 상수이냐인데 let 과의 차이는 무엇일까? var는 function scope이고, let과 const는 block scope이다. if(true){ var num = 100; } console.log(num); // 100 출력 num += 200; console.log(num); // 300 출력 위의 예제를 확인해보자. 블록 안에 num이 선언되고 블록이 끝났기 때문에 num이 소멸될 것 같지만 var는 function scope이기 때문에 값을 출력한다. functi..

ES6의 함수 JavaScript ES6의 함수 기능과 추가된 것을 간단하게 알아본다. 타입 선언이 지원 x Function log(message){ console.log(message); } 위와 같이 메시지를 출력하는 함수를 만든다고 하자. 자바스크립트는 함수를 선언할 때 인자의 타입 선언이 지원되지 않는다. 그러므로, 위의 message라는 파라미터를 만들 때 함수의 인터페이스만 봐선 개발자가 어떤 타입을 원하고 선언했는지 알 수 없다. 이러한 타입 선언은 타입 스크립트로 넘어가야 지원된다. Default Parameters ES6로 넘어오며 파라미터에 초깃값을 줄 수 있는 Default Parameters가 추가되었다. Function testFunc(param1, param2){ console...

ajax로 Post 요청하기 ajax를 이용해서 서버에 Post 요청을 해보자. 로그인 페이지 UserName: Password: Email address: 회원가입 위와 같이 사용자 이름, 비밀번호, 이메일 주소를 전달하는 회원가입 페이지의 container가 있다고 하자. 원래는 method="post" 방식으로 서버에게 포스트 요청하지만, 여기선 ajax를 활용해서 요청해보자. 컨테이너 하단에 를 만들어주고 js 파일을 만든다. js 파일 let index = { init: function () { $("#btn-save").on("click", () => { this.save(); }); }, save: function () { let data = { username: $("#username")...

자바스크립트 자료구조 자바스크립트가 자료구조를 다루는 여러 가지 방법을 알아보자. 배열 (Array) 배열 안에는 모든 타입이 들어갈 수 있다.(배열 안에 배열, 객체 등등 ..) new Array()로 선언 가능하지만 보통 []로 선언한다. push 메서드를 통해 순차적으로 원소를 추가한다. cocat으로 배열을 합칠 수 있다. indexOf(원소)로 특정 값이 어느 인덱스에 있는지 확인한다. 원소가 배열 안에 없으면 -1을 출력하므로, 이를 통해 원소의 유무를 파악한다. join() 을 통해 문자열로 합칠 수 있다. let test = [1, 2, 3, 4]; console.log(test); // [ 1, 2, 3, 4 ] test.push(5); console.log(test); // [ 1, 2..

SetTimeout과 비동기 자바스크립트의 전역 객체인 window의 SetTimeout을 사용하면 비동기적인 실행 순서를 확인할 수 있다. setTimeout window.setTimeout(); setTimeout(); window는 자바스크립트의 전역 객체이므로, 생략이 가능하다. setTimeout은 두 개의 인자를 받는다. 첫 번째 인자는 함수, 두 번째는 setTimeout이 호출되고 난 이후 첫 번째 인자로 받은 함수가 실행될 시간(밀리 세컨드)를 받는다. 비동기적 실행 function innerFunc() { console.log("innerFunc 실행"); } console.log("프로그램 실행"); setTimeout(innerFunc, 2000); console.log("프로그램 ..

호이스팅 (Hoisting) 자바스크립트는 함수가 실행되기 전 함수 내의 필요한 변수값들을 미리 모아서 선언하는데, 이것을 호이스팅(Hoisting) 이라고 한다. 미리 선언된 함수를 사용 // 함수 선언문 function fristFunc() { innerFunction(); function innerFunction() { console.log("firstFunc innerFuncion!"); } } // 함수 호출 fristFunc(); 위의 자바스크립트 소스를 확인해보자. 함수의 선언이 끝나고, 마지막 줄 fristFunc(); 로 인해 firstFunc를 불러온다. fristFunc()가 순차적으로 실행한다면, 함수를 부르는 innerFunction();가 먼저 나오기 때문에 오류가 날 것 같지만..