본문 바로가기

JavaScript35

[Javascript] Closure 1. 스코프 체인 Closure에 대해서 알아보기 전에, 스코프 체인에 대한 개념을 간단하게 짚고 넘어가겠습니다. 자바스크립트는 스크립트가 실행 될 때, 내부적으로 Global 객체를 생성합니다. 이 객체는 인스턴스화하거나 메소드 호출이 불가능한 객체로, 스크립트에서 글로벌 변수/함수를 관리하기 위해 내부적으로 자동 생성되는 객체입니다. 마찬가지로 로컬 변수 또한 글로벌 객체와 유사한 객체로 관리됩니다. 이를 Call 객체(Activation 객체)라고 부르는데, Call 객체는 Global 객체처럼 인스턴스화나 메소드 호출이 불가능하며, 함수가 호출 될 때마다 로컬 변수들을 관리하기 위한 자동 생성 객체입니다. 이렇게 여태까지 몰랐어도 문제가 없었고, 직접 사용할 수도 없는 자동 생성 객체를 왜 굳이 .. 2022. 1. 29.
[Javascript] function 명령과 Function 명령/함수 리터럴 study-repo를 만들면서 함수에 대한 내용들이 부족하다고 느끼게 되어 2~3개의 포스트에서 함수에 대한 내용을 다시 다뤄보려고 합니다. function 명령과 Function 명령/함수 리터럴은 작동시 동작에서 차이점을 보입니다. 이번 포스트에서는 이들이 어떤식으로 동작하는지 그 차이점을 분석해보려고 합니다. 1. function 명령 우선 function 명령에 대해 알아보겠습니다. function 명령에 의한 함수 선언을 다시 살펴보면 다음과 같습니다. function(인수, ...) { } 다음과 같은 코드를 생각해봅시다. 일반적인 프로그래밍 사고에 따르면 아래의 코드는 에러를 내보내야합니다. 왜냐하면 함수가 먼저 호출되고 그 이후에 선언/정의 되었기 때문입니다. 하지만 실행해보면 정삭적으로 .. 2022. 1. 14.
[Javascript] optional chainning ?. 1. optional channing 옵셔널 체이닝은 프로토타입 체인으로 묶인 객체들의 프로퍼티에 안전하게 접근할 수 있게 됩니다. 안전하게 접근한다는 말은 접근하려던 프로퍼티가 존재하지 않는다면 기존에는 그냥 오류를 뱉어버렸지만, 옵셔널 체이닝을 이용하면 존재하지 않아도 오류를 뱉지 않고 스크립트를 계속 실행하게 됩니다. 다음과 같은 코드에서는 당연하게도 결과로 TypeError를 뱉어냅니다. obj 객체 아래 name.address가 존재하지 않기 때문이죠. const obj = {}; console.log(obj.name.address); 이렇게 에러를 뱉는 순간 스크립트를 정지하게 됩니다. 하지만 실제 상황에서는 이런경우에도 에러는 따로 처리하고 스크립트 읽기를 계속해야합니다. 사용자가 사용하다 .. 2021. 11. 24.
[Javascript] Fetch API Ajax 통신을 이용할 때 지난 포스트에서 다룬 XMLHttpRequest, jQuery, Fetch 등을 사용합니다. 이 중 XHR 방식은 사용법이나 가독성면을 위협하고, 제이쿼리는 사용하지 않는 경향이 있기 때문에 Fetch를 사실상의 표준으로 채택하고 있습니다. 1. Fetch API 지난번에 비동기 통신을 다루는 객체인 XMLHttpRequest 객체를 알아보았습니다. 하지만 사용법이 조금 복잡하고 가독성도 썩 좋다고는 하지는 못한다고 할 수 있습니다. 그래서 이런 문제점을 해결하기위해 ES6부터 통신을 위한 Fetch API를 채택했습니다. Fetch는 브라우저에 내장되어있기 때문에 따로 라이브러리의 설치같은 과정 없이도 이용할 수 있다는 장점이 있습니다. Fetch는 네트워크의 Request와.. 2021. 10. 18.
[Javascript] XMLHttpRequest 이 객체를 사용하는 이유나 Ajax 등에 대해선 아래 포스트를 참조해주세요. 2021.10.15 - [Programming/CS] - Ajax Ajax 해외 축구를 많이 보던 저에게 단어 자체는 Ajax라는 단어는 익숙한 단어였습니다. 아약스라는 축구팀이 있기도 하고 그리스 신화에도 아약스라는 인물이 등장하기 때문에 처음 이 단어를 들을 bamtory29.tistory.com 1.XMLHttpRequest 비동기 통신을 관리하는 XMLHttpRequest 객체를 이용하면 자바스크립트로 서버와의 통신을 어느정도 제어할 수 있습니다. 이름에 XML과 HTTP가 들어가긴 하지만 이 두가지만 통신하는 것이 아니고 객체의 프로퍼티들을 통해서 JSON 문자열이나 일반 Text, HTML 문자열까지도 통신할 수 있습.. 2021. 10. 17.
[Javascript] 모듈 Module ES2015가 등장하면서 자바스크립트에서도 모듈 기능을 지원하기 시작했습니다. 1. 모듈 모듈이란 특정 기능을 가진 함수나 변수들을 모아둔 것을 말합니다. 예를 들면 수학적 계산을 하는 함수들을 모아둔다 던가, 문자열과 관련한 다양한 기능들을 모아두고 모듈이라고 할 수 있습니다. 이렇게 비슷한 기능을 가진 함수와 변수들을 모아두었기 때문에 한 프로그램에서 뿐만이 아니라 다른 프로그램에서도 이용할 수 있는 기능의 모임이 될 수도 있습니다. 그렇기에 모듈은 함수처럼 하나당 한 파일을 만들기 보다는 비슷한 기능끼리 여러개를 모아서 하나의 파일을 구성합니다. 2. 모듈 만들어보기 간단하게 덧셈, 뺄셈을 하는 모듈을 만들어보겠습니다. 우선 html 파일인데, 다음은 모듈입니다. 간단하게 덧셈만을 하는 모듈을 만들.. 2021. 10. 5.
300x250