JavaScript
-
자바스크립트 - Clean Code(변수)JavaScript/클린 코드 2020. 10. 10. 15:33
들어가기에 앞서, 클린 코드에 대해서 포스팅하는 이유는 최근에 회사 인턴을 다시 하면서 다른 사람의 코드를 보고 이해해야 하는 경우가 많아졌다. 저도 동료 개발자와 협업하기 때문에 좋은 개발자가 되기 위해서는 코드가 정상적으로 작동하는 것과 더불어, Clean Code를 작성하는 능력 또한 필요하다는 생각이 들었다. 그래서 소프트웨어 방법론에 관한 책들 중 Robert C. Martin's의 책인 Clean Code에 있는 내용을 자바스크립트에 적용시킨 글을 가지고 정리된 내용을 토대로 기록하려고 한다. 🎈 참고! 구름EDU - 모두를 위한 맞춤형 IT교육 구름EDU는 모두를 위한 맞춤형 IT교육 플랫폼입니다. 개인/학교/기업 및 기관 별 최적화된 IT교육 솔루션을 경험해보세요. 기초부터 실무 프로그래밍..
-
자바스크립트 - async / await?JavaScript/동작원리 2020. 9. 19. 15:42
aysnc await이란? 콜백 함수나 프로미스처럼 비동기를 다루는 자바스크립트 패턴 중 하나이며 가장 최근에 나온 Es7문법이다. 프로미스랑은 조금 다른 사용법을 가지고 있으며 프로미스를 이용하는 아이라고 생각하면 된다. aysnc 키워드 예제를 통해 async 키워드부터 알아보자. // async 키워드가 없는 일반 함수 function myFunc(){ return 'func'; } // async 키워드가 있는 함수 async function myAsync(){ return 'async'; } console.log(myFunc()); console.log(myAsync()); 출력 화면 출력 결과를 보면 서로 다른 것을 확인할 수 있다. 첫 번째 myFunc() 함수는 생각했던 대로 func가 반..
-
자바스크립트 - PromiseJavaScript/동작원리 2020. 9. 6. 18:54
Promise란? 자바스크립트에서 비동기 동작을 다루는 하나의 패턴이며, 어떤 일의 진행 상태를 나타내는 객체로, 진행 "상태"와 "값"이라는 속성을 가지고 있는 것을 말한다. Promise가 생긴 이유 Promise 생기기 이전에는 비동기 처리를 콜백 함수나 ajax 메소드를 통해서 처리해왔다. jQuery ajax 메소드 비동기 처리 $.ajax("http://a.com/api/book", (result) =>{ console.log(result); }); 위의 예제는 ajax 메소드를 통해 서버에 응답을 보내고 응답이 왔을 때, 콜백 함수를 통해 result로 응답을 받아 처리하는 예제이다. setTimeout() 비동기 함수 setTimeout()은 비동기 동작을 하는 함수를 말한다. functi..
-
자바스크립트 - this?!JavaScript/기본 2020. 9. 3. 15:42
들어가기 전에, 먼저 대표적으로 JAVA 같은 객체지향 언어에서의 this는 클래스 인스턴스의 레퍼런스 변수를 말한다. 즉, 클래스(자세히는 인스턴스화 된 객체) 자기 자신을 뜻 한다는 의미이다. 하지만 자바스크립트에서 함수의 this 키워드는 다른 언어들과 비교하여 조금 다르게 동작한다. 다르게 동작하기 때문에 많이 헷갈리는 것 같다. 자바스크립트에서는 선언할 때 값이 결정되는 것이 있는데 그것을 클로져라고 하고, 반면에 호출하는 방법에 의해서 값이 결정되는 것이 있는데 그것을 바로 this라고 한다. 그 this를 낱낱이 파헤쳐보도록 하자. this는 대체 무엇인가? 할머니 : 나는 허리가 아프다. (나 === 👵) 아버지 : 나는 다리가 아프다. (나 === 👨) 어머니 : 나는 머리가 아프다. (..
-
자바스크립트 - 클로저(closure)란 무엇인가?JavaScript/기본 2020. 7. 25. 17:17
들어가기 전에, 렉시컬 스코프(Lexical Scope)를 먼저 알고 넘어가자. 참고! 자바스크립트 - 렉시컬 스코프(Lexical Scope) 들어가기에 앞서, Closure(클로져)를 이해하기 위해서는 반드시 렉시컬 스코프(Lexical Scope)를 이해해야 한다. 렉시컬 스코프란(Lexical Scope)란? 함수를 어디서 호출하는지가 아니라 어디에 선언하였� ljtaek2.tistory.com 클로저(closure)란 무엇인가? 클로저(closure)는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이라고 부르며, 내부 함수가 외부(enclosing) 함수 변수에 액세스(접근) 할 수 있는 자바스크립트의 기능을 말한다. 우선 예제를 먼저 보고 생각해보자..
-
자바스크립트 - 렉시컬 스코프(Lexical Scope)JavaScript/기본 2020. 7. 25. 12:27
들어가기에 앞서, Closure(클로져)를 이해하기 위해서는 반드시 렉시컬 스코프(Lexical Scope)를 이해해야 한다. 렉시컬 스코프란(Lexical Scope)란? 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말한다. 즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 점이다. 다른 말로, 정적 스코프(Static scope)라 부르기도 하다. 아래의 예시 코드가 어떻게 동작할지 생각해보자.
-
자바스크립트 - 동기(Synchronous)? 비동기(asynchronous)?JavaScript/동작원리 2020. 7. 21. 15:33
들어가기 전에, 필자는 자바스크립트를 처음 접하고, 오로지 문법적인 것에만 집중해서 공부를 했었다. 하지만 개발할 때 더 중요한 것은 자바스크립트가 어떻게 동작하는지를 먼저 알고 개발을 시작해야 한다는 것이다. 안 그러면 왜 오류가 나는지도 모르고 이유를 모르니 해결할 방법을 찾을 수도 없게 되는 상황을 만나게 될 것이다. (저는 직접 겪었기 때문에...) 제목처럼 자바스크립트가 동기인지 비동기인지 그것을 먼저 알아야만 한다. JavaScript는 동기식 언어이다. 자바스크립트는 한 번에 하나의 작업을 수행한다. 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다. 마치 음식점에 여러 사람들과 갔을 때, 키오스크를 이용하여 한 사람씩 결제하는 것과 유사하다. 이..
-
자바스크립트 - 스코프 체인(scope chain)란?JavaScript/기본 2020. 7. 20. 20:01
스코프 체인(scope chain)이란? 스코프 체인(Scope Chain)은 일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것을 말한다. 하지만 스코프 체인(scope chain)을 이해하기 위해서 먼저 자바스크립트의 실행 컨텍스트(Execution context)를 알아야 한다. 그렇다면 실행 컨텍스트란 무엇인가? 실행 컨텍스트(Execution context)는 우리가 작성한 코드가 실행되는 환경을 말하며, scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리를 말한다. 그리고 이 실행 컨텍스트에는 두 개의 실행 컨텍스트가..