http://kdhyo.kr Mapstival Best Travel with a map Start kdhyo.kr 첫 프로젝트로 축제사이트를 만들었을 당시 nodejs와 자바스크립트에 대한 어떻게 만지는지에 대해서만 배운 후 바로 만들었던 작품이었다. 그 당시에 축제 API를 불러오는 과정에서 비동기방식으로 처리를 해야된다는 이야기를 듣고, 어떻게 불러오고, 어떻게 비동기 방식으로 처리해야되는지 감이 안오는 상태에서 이것저것 검색을 해보았을 때 promise와 axios 그리고 async await에 대한 단어들을 알게 되었고 그것들을 실제 적용을 하였다. 적용을 하고 보니 정상적으로 api들이 가져와진걸 보고 "아 비동기처리 했다!" 라고 생각을 했다. 그 당시엔 비동기 처리가 뭔지.. 우리 사이트에 ..
프로트타입은 자바스크립트에서 어쩌면? 가장 핵심적인 내용이라고도 볼 수 있습니다. '함수는 객체다.' 라는 말을 들어보셨을 겁니다. function a(x, y) { return x - y; } a.add = "No add"; console.log(a.add); 이런 식으로 add를 추가시켜서 Key/Value 를 가질 수 있습니다. 추가를 시킬 수도 있지만 기존에 있던 것들도 사용할 수 있습니다. 평소에도 많이 보셨던 a.name, a.length 등 이렇게 사용할 수 있는게 바로 함수가 객체이고 자바스크립트가 프로트타입 방식이기 때문입니다. 예제와 이미지를 통해 설명을 하면 이해하기 더 쉽겠지만 이번 포스팅에선 간단하게 글로만 제가 이해한 것을 바탕으로 적어만 두고, 나중에 한번 수정할 예정입니다. ..
ECMAScript2015에서 let과 const가 등장한 이후로 개발자들이 var 대신 let, const를 주로 활용하고 있습니다. 자바스크립트의 장점이자 어찌보면 단점이라고도 생각되는 유연성을 let과 const가 그 단점을 보안해주는 역할을 합니다. 이제 var와의 차이점을 하나씩 알아보겠습니다. var : function-scoped let, const : block-scoped var는 함수를 기준으로 스코프가 생성이 되며, let과 const는 블록을 기준으로 스코프가 생성됩니다. if(true){ var a = 2; } console.log(a) if(true){ let a = 2; } console.log(a) 위에 var로 선언한 a변수는 정상적으로 콘솔에 나타나는 반면, let으로 선..
클로저(closure) 자바스크립트에서 클로저의 정의는 정확히 내려지지 않았습니다. 그래서 사람들마다 책마다 블로그마다 클로저의 정의를 말하는게 조금씩 다릅니다. 제가 공부하면서 생각한 정의는 이런 느낌입니다. '이미 생명주기가 끝난 함수의 변수를 참조할 수 있도록 해주는 현상' function outer () { let a = 0; function inner () { return ++a } return inner; } const func = outer(); console.log(func()); console.log(func()); console.log(func()); 위 코드를 실행하면 결과는 1 2 3 이 나오게 됩니다. 이걸 이해하려면 일단 '실행 컨텍스트'를 이해하셔야 합니다. func에서 out..
스코프는 우리 말로 번역을 하면 '범위'라는 뜻이다. 자바스크립트에서 스코프는 '접근할 수 있는 범위'라고 생각하면 된다. 아래 예제들을 보면서 이해하는게 가장 쉬울 거라 생각한다. const a = "Hello"; function b() { console.log(a); } b() 위처럼 b함수를 실행하게 되면 b함수에 a라는 변수가 없지만 전역에 있는 a라는 변수를 가져와 "Hello"를 출력 할 수 있게된다. 아래 코드는 어떨까? const a = "Hello"; function b() { console.log(a); const a = "bye"; } b() 여기서의 콘솔에는 어떤게 찍힐까? 바로 'undefined'가 출력되게 된다. 위 코드를 이해하지 못했다면 호이스팅 에 대한 포스팅을 읽고오는 ..
실행 컨텍스트(Execution Context) ECMAScript에서 실행컨텍스트의 정의를 이렇게 말한다. '실행 가능한 코드를 형상화하고 구분하는 추상적인 개념' 좀 더 쉽게 설명을 하자면 이렇다. '함수가 실행될 때 그 함수의 대한 환경 정보들을 모아 메모리에 저장' 실행 컨텍스트는 호이스팅, 스코프, this, 클로저, 함수 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 그러므로 실행 컨텍스트는 확실하게 이해하고 넘어가는 것이 좋다. 콜스택(Call Stack) 자바스크립트 엔진은 실행되는 코드들을 순차적으로 스택에 쌓아 위에서부터 하나씩 처리를 하는 LIFO(Laast In First Out)방식으로 함수들을 실행하게 된다. 실행 컨텍스트의 종류 Global Execution Conte..
Hoist - 들어올리다. 호이스트(Hist)는 건축/건설에서 사물을 끌어올릴 때 쓰이는 도구를 부르는 말이기도 하다. javascript에서의 호이스팅은 선언된 모든 변수와 함수들을 그 스코프 안에서 최상단으로 끌어올리는 것을 의미한다. 간단한 예를 들어서 보여주는게 이해하기 가장 쉬울 것 같다. var a = 2; consol.log(a); 결과 : 2 consol.log(a); var a = 2; 결과 : undefined 위처럼 변수선언은 최상단으로 올리기 때문에 a가 아래에서 선언이 되었어도 위콘솔에서는 undefined를 가지게 된다. '함수 선언식' 함수 또한 통째로 위로 호이스팅을 시키기 때문에 아래에서 선언을 해도 위로 끌어올리게 된다. a(); function a() { console...
최근 js를 기초부터 바닐라js부터 다지자는 생각으로 공부 중이었다. 그러던 와중 예전부터 궁금했지만 지나치던 것들을 하나하나 이해하면서 블로그에 올리면서 정리하잔 생각이 들었다. 그런 생각을 하던 중에 발견한 한 사진을 보고 찾아보기 시작했다. 대학교나 그 전부터 C, C++, JAVA 등 다른 언어들도 기초(?)정도를 공부했던 난 JavaScript에서 '==='란 등호를 보고 저게뭐지..?란 생각을 했었고, 사람들에게 물어보면 "그냥 '=='보다 '==='가 더 정확하니까 '==='를 쓰는게 좋아"라고 막연하게 알려주곤 했다. 물론 나도 그렇게만 받아드렸다. 그래서 한 번 오늘 찾아보고 이해하게 되어 정리를 해본다. MDN에서는 이렇게 설명해주었다. JavaScript는 엄격한 비교와 형변환 비교 ..
