JavaScript
-
[JavaScript] 배열(Array)과 이터러블(Iterable)Web/JavaScript 2021. 10. 19. 14:47
배열 (Array) 일반적인 자료구조에서의 배열은 '연속된 메모리 공간에 나열된 동일한 타입의 데이터(요소)들의 집합'을 이야기한다. 때문에 배열의 주소만 알고 있다면 해당 배열의 n번째 데이터는 어떤 값인지 O(1)의 속도로 (아주 빠르게) 알 수 있다. 자바스크립트의 배열은 이러한 배열의 특징을 흉내내고 있는 아주 특수한 객체다. const arr = { 0: 100, 1: 123, 2: 129, length: 3 } // arr[0] === 100 // arr[1] === 123 // arr.length === 3 위와 같이 생긴 객체의 프로퍼티에 접근하는 것은 일반적인 배열을 사용법과 똑같다는 것을 알 수 있다. 위와 같이 자바스크립트에서의 배열은 index를 key로 프로퍼티 값에 접근할 수 있..
-
[JavaScript] Event의 이해Web/JavaScript 2021. 8. 15. 19:23
Event 요? 이벤트라고 하면 말 그대로 브라우저 환경에서 '마우스 클릭'이나 '애니메이션이 끝남' 등 브라우저 위에서 발생하는(일어나는) 상황을 말한다. JavaScript를 이용한 웹 개발은 scroll, click, hover 등 수 많은 event에 의해 기능들이 동작하는 Event-Driven 개발이라고도 한다. 기본적으로 브라우저가 지원하는 이벤트들은 여기를 참고하면 좋겠다. Event 등록 이벤트를 등록 하는 방법은 두 가지가 있다. const $myBTN = document.querySelector(".my-button"); $myBTN.addEventListener("click", () => { console.log("버튼이 클릭되었습니다"); }); 1. 일반적으로 많이 사용하는 방법..
-
01. VanillaJS 프로젝트 배포 (feat. Pacel, AWS EC2, Nginx)Projects/우주 심리 테스트 2021. 6. 5. 17:55
2주정도 걸려서 제작 한 우주 여행 심리테스트 페이지 🙂 유플래닛-나만의 행성찾기[우주심리 테스트 mbti] 유플래닛만의 특별한 나만의 행성 찾기 mbti. 어서 나만의 행성을 찾으러 여행을 떠나볼까요? uplanet.me 최근 심리테스트, mbti 성향분석 등을 활용한 마케팅 웹 페이지가 많이 등장했다. 그리고 케이어스라는 친한 회사 대표님이 이와 같은 심리테스트 웹 페이지 제작을 의뢰해서 예전에 인상이 깊었던 the forest의 심리테스트가 떠올라 유사한 느낌으로 몰입가능한 심리테스트 페이지를 한번 만들어 보고자했다. VanillaJS 연습도 할 겸, 프론트엔드 개발자 지우님과 디자이너 한 분 이렇게 세명이서 프로젝트를 시작했다. 배포를 이렇게 하는게 맞나...? 당시에는 번들러라는 것의 개념을 모..
-
[JavaScript] 스코프(Scope)와 클로져(Closure)Web/JavaScript 2021. 5. 25. 14:28
스코프(Scope) 호이스팅을 설명하기 전에 스코프에 대한 설명을 먼저 했어야 했는데, 지금이라도 한번 정리 해 봐야겠다. 자바스크립트에서 스코프라는 단어를 많이 접해봤을 것이다. 스코프란 해당 변수에 접근 할 수 있는 범위를 일컫는 말인데, 자바스크립트에서는 Global(전역)과 Local(지역) 두 종류의 스코프가 있다. var name = 'hov'; function print() { var name = 'lee'; console.log(name); } print(); // 출력: lee console.log(name); // 출력: hov 위에서 보면 알 수 있듯, name이라는 동일한 이름을 가진 변수가 각각 독립적으로 불리는 것을 알 수 있다. print() 함수 안에 있는 변수(name)는 ..
-
[JavaScript] 자바스크립트 this의 모든 것Web/JavaScript 2021. 5. 15. 21:12
this란 무엇인가? C++, JAVA 등 다양한 프로그래밍 언어에서도 this가 존재하는데, 여기서 this는 객체 자신을 나타내는 포인터, 레퍼런스다. 하지만 자바스크립트에서 this는 함수의 호출 맥락(Context)를 의미한다. 즉 함수를 어떻게 호출하냐에 따라 this가 가리키는 대상이 달라질 수 있다는 것이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결 시켜주는 역할을 한다. console.log(this); // window function func1() { console.log(this); } func1(); // window 우선 브라우저의 개발자 도구에서 this를 출력 해보면 전역 객체인 window 객체를 출력한다. (node.js에서는 this를 출력하면..
-
[JavaScript] 실행 컨텍스트와 스코프 체인Web/JavaScript 2021. 5. 13. 21:33
실행 컨텍스트(Execution Context)란? context는 한국어로 문맥 이라는 뜻을 가진다. 문맥의 정확한 정의는 그럼 무엇일까? 문맥 어떤 주어진 언어표현이 나타나는 부분과 연관이 되는 언어적인 맥락 또는 환경. (네이버 사전) 즉 실행 컨텍스트는 자바스크립트 코드가 실행되기 위해서 필요한 맥락과 환경을 context라고 한다. 컨텍스트에는 세 가지 종류가 있다. Context의 종류 1. Global Execution Context (전역 컨텍스트) - 코드가 글로벌로 실행이 될 때의 환경 - 자바스크립트는 싱글 스레드 언어이기 때문에 전역 컨텍스트는 딱 하나만 존재 2. Functional Execution Context (함수 컨텍스트) - 함수가 호출이 되어 실행이 될 때 실행되고 있..