Psychogrammer

🌕 Front/🌱 Vanilla JS 검색 결과

해당 글 20건

모듈 시스템을 알아보자. 모듈은 동기적 호출일까? Require vs Import

모듈?관련된 코드들을 하나의 코드 단위로 캡슐화한 하나의 파일을 말한다.  CommonJS (CJS)Require 키워드를 사용한 모듈 시스템을 말한다.Node.js와 구버전의 브라우저에서 주로 사용한다.module.exports와 exports 두 가지 방법으로 모듈을 내보낼 수 있다 예시1. module.exports// arithmetic.jsclass Arithmetic { constructor(a, b) { this.a = a; this.b = b; } add() {return this.a + this.b;} subtract() {return this.a - this.b;}}; module.exports = Arithmetic;// main.jsco..

🌕 Front/🌱 Vanilla JS 2024. 10. 26. 17:34

브라우저 내의 자바스크립트 동작 원리

1. JavaScript Runtime 구성 요소브라우저 내의 JavaScript *런타임은 크게 JavaScript 엔진과 웹 API로 구성되어있다. 그리고 여기에 테스크 큐와 이벤트 루프라는 개념 또한 존재한다. 이를 통해 싱글 쓰레드 기반의 프로그래밍 언어라 불리는 JavaScript도 비동기적으로 코드를 실행시킬 수 있게 된다. *런타임: 프로그래밍 언어로 작성된 코드가 구동되는 환경 2. JavaScript 엔진JavaScript 코드를 읽고, 해석, 실행을 담당하는 인터프리터이다. 쓰레드 하나로만 동작하기 때문에 스택 영역도 단 하나만 사용하게 된다. 이로 인해 하나의 함수가 실행이 끝나기 전에는 다른 함수가 실행될 수 없는 "Run to Completion" 특성을 가지게 된다.JavaScr..

🌕 Front/🌱 Vanilla JS 2024. 5. 5. 17:09

자바스크립트 this바운딩에 대해 알아보자

대전제this는 함수를 호출할 때 결정된다.함수를 함수로서 호출할 경우에는 this가 지정되지 않는다.this에는 호출한 주체에 대한 정보가 담긴다. 실행 컨텍스트를 활성화할 당시에 this가 지정되지 않은 경우 this는 전역 객체를 바라본다.function func1() { console.log(this);}obj ={ func1:func1,}func1(); // Windowobj.func1() // obj 메서드는 객체의 메서드로서 호출할 경우에만 메서드로 동작하고, 그렇지 않으면 함수로 동작한다.this 바인딩에 관해서는 함수를 실행하는 당시의 주변 환경(메서드 내부인지, 함수 내부인지)는 중요하지 않다.오직 해당 함수를 호출하는 대상, 앞에 점 또는 대괄호 표기가 있는지 없는지가 관건..

🌕 Front/🌱 Vanilla JS 2024. 4. 20. 23:30

AJAX란 무엇이고, 비동기 통신 API fetch, axios는 어떻게 쓰이는가

AJAX란? JavaScript를 이용한 비동기 통신 클라이언트와 서버간에 XML, JSON 데이터를 주고받는 기술이다. AJAX는 기술 자체를 뜻하기 보단, HTML, XHTML, CSS, JavaScript, DOM, XML, XSLT, XMLHttpRequest 오브젝트들이 조합한 기술의 총칭을 일컫는다. XMLHttpRequest 객체를 이용해서, 페이지 새로고침 없이 페이지의 일부만을 위한 데이터를 로드하는 기법이다. AJAX(Asynchronous JavaScript and XML)의 X는 XML을 뜻하지만, JSON이 더 가볍고, 자바스크립트의 오브젝트로 쉽게 변환된다는 점 때문에 XML 보다 많이 사용된다. AJAX를 사용하는 이유 화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페..

🌕 Front/🌱 Vanilla JS 2022. 2. 12. 20:51

[호이스팅] TDZ, var, const, let, window 바인딩 여부

호이스팅(hoisting) 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다. 따라서 var로 선언할 시 초기화 값, undefined가 나오는 것과 다르게, const와 let은 초기화 값이 없기 때문에 오류를 출력한다. Temporal Dead Zone 변수가 현재 스코프 내에서 선언됐지만, 아직 초기화되지 않은 상태를 말한다. let 또는 const 키워드를 사용하여 변수를 선언했을 때 나오는 개념. TDZ는 변수가 선언된 지점부터 초기화되기 전까지, 해당 변수를 사용할 수 없게 한다. TDZ에 빠진 예시..

🌕 Front/🌱 Vanilla JS 2022. 2. 4. 10:23

스코프: 크롬 디버거로 보기, 블록스코프, 함수스코프, 렉시컬스코프

스코프란, 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정하는 것이다. 식별자에 대한 유효범위라고도 간단히 말한다. 크롬 디버거로 보는 스코프 var globalVariable1 = 1; const globalVariable2 = 2; const outerConst = function () { console.log(); }; var outerVar = function () { console.log(); }; function outerFunc2() { console.log(); } function outerFunc1() { let outerVariable = 999; function innerFunc() { const in..

🌕 Front/🌱 Vanilla JS 2022. 2. 3. 13:09

원시 데이터 타입과 래퍼 객체: 원시 타입이 메소드를 갖는 이유

123.123.toFixed(2) // 123.12 "hello".charAt(4) // 'o' 래퍼 객체는원시값(문자열, 숫자 등)을 마치 객체처럼 다룰 수 있게 하여, 원시값에서도 메서드를 호출할 수 있다. 래퍼 객체 변환 과정 1. 원시타입에 해당하는 객체가 생성된다. 2. 이 객체의 메서드가 호출된다. 3. 메서드 처리 후 이 객체는 소멸된다. 4. 원래의 원시타입만 남는다. 래퍼 객체를 사용하는 이유 문자열이나 숫자와 같은 원시값을 다루어야 하는 작업이 많은데, 메서드를 사용하면 작업을 수월하게 할 수 있을 것 같지만, 메서드를 사용하는 객체는 무겁고, 원시값은 가능한 한 빠르고 가벼워야 한다. 그래서 원시 타입을 유지하되, 메서드를 호출할 때만 잠깐 객체를 생성한 후 다시 삭제한다.

🌕 Front/🌱 Vanilla JS 2022. 2. 2. 16:41

[native code]: 넌 누구냐, 코드를 내놓거라!

위와 같은 생성자 함수들의 내부코드를 보고 싶어, 크롬 개발자 모드에서 확인했다. 하지만 native code라고만 나오고 더 이상의 정보를 알 수 없었다. You don't know Js라는 책에서 언급한 내용인지, 구글링 검색을 하면 죄다 책 내용을 요약한 블로그 내용밖에 없었고, 빠르게 밑그림만 확인하고 싶었는데 지엽적인 지식만 나열되어 있어, 다른 소스를 찾았다. 위의 내용을 간단히 정리하자. native code는 Window, Document, Function와 같은 내장객체들은 자바스크립트로 구현되어있지 않고, C와 C++같은 컴파일러 언어로 코딩되어 있기 때문에 안의 코드들을 볼 수 없다. 때문에 binary code를 보여줘봤자, 읽을 수도 없고 사용할 수도 없기때문에 [native co..

🌕 Front/🌱 Vanilla JS 2022. 1. 30. 18:46

[DOM]: 이벤트 버블링을 이용해 하위 요소 전체 다루기(e.target, e.currentTarget)

옵션들을 forEach로 반복시켜서 이벤트를 주는 방식이 아닌 event.target으로 옵션들의 부모요소 ul을 참조해 이벤트를 위임시키면 반복문을 쓰지않고도 옵션들에 이벤트를 줄 수 있다. 옵션이 많아지면 반복문이 돌아갈때 성능이슈도 있으니 탁월한 방법이다. li 부모 태그인 ul태그에 한 번반 이벤트리스너하면 된다. 부모ul태그에 한번만 등록해놓고 자식 li클릭시(버블링은 기본값) 버블링을 활용하면 하나의 이벤트리스너로 li 요소들 전체를 다룰수있다. 단 모든 이벤트가 버블링이 발생하는건아니다. click은 버블링이 기본으로 발생한다. const billboard = document.querySelector('billboard'); const ul = document.querySelector('ul..

🌕 Front/🌱 Vanilla JS 2022. 1. 27. 21:37

[DOM] Javascript로 html을 조작해보자

DOM 어렵게 생각하지마 OM은 Object Model, 객체 지향 모델을 뜻한다. 뭔가를 객체로 표현하는 방법을 말한다. 나아가 Documnet가 추가된 "D"OM은 웹 페이지의 내용을 객체로 표현하는 형식을 말한다. Brower가 추가된 "B"OM은 웹 브라우저 자체를 객체로 표현하는 형식을 말한다. 이 둘의 객체들로부터 제공되는 DOM API, BOM API를 통해 JavaScript가 웹 페이지/브라우저를 쉽게 제어 및 조작할 수 있다. DOM HTML문서의 구조와 내용을 객체 타입으로 변환시켜 웹 페이지에 객체지향적 접근을 가능하게 했다. 날 것 그대로의 Document를 Object로 만들면(=DOM), 구조, 내용, 스타일의 요소들을 구조적으로 접근할 수 있게 된다. DOM은 프로그래밍 언어..

🌕 Front/🌱 Vanilla JS 2022. 1. 17. 15:58

프로토타입: 자바스크립트의 핵심 철학 (정리)

자바스크립트는 프로토타입 기반 OOP 언어다. 자바스크립트는 분류 위주 클래스 방식의 언어인 JAVA에서 객체를 바라보는 관점과 완전히 다르다. 특히 문맥(context)을 매우 강조하는 철학적 근거에서 만들어져 렉시컬 스코프에 의한 호이스팅과 실행 문맥에 의한 복잡한 this가 필연적으로 발생할 수밖에 없었다. 비트겐슈타인의 두 가지 이론 1. 의미사용이론: 단어의 의미는 ‘상황과 맥락에 의해서 결정된다'. 단어의 ‘진정한 본래의 의미'란 존재하지 않는다. 2. 가족유사성이론: 프로토타입 언어에서는 정의로 부터 분류하지 않는다. 가장 좋은 보기(prototype, exemplar)로부터 범주화된다. 의미사용이론 어휘적 범위(lexical scope): 의미사용이론에 따르면 단어의 의미는 그 어휘적인, ..

🌕 Front/🌱 Vanilla JS 2022. 1. 11. 23:34

불변값과 가변값을 나누는 기준은 뭘까?

0. 미리보는 결론 불변값과 가변값은 데이터 영역의 메모리를 변경할 수 있는가에 따라 나뉜다. 기본형 데이터 타입의 값을 변경할 때는 데이터 영역의 메모리를 변경하지 않고(불변성) 변수의 값만 재할당하는 반면, 참조형 데이터 타입의 값은 묶음을 가리키는 주솟값을 가지며 이 주소에 있는 값은 데이터 영역에 위치하여 객체 내부 변수들의 주솟값을 참조하고 있기 때문에, 프로퍼티 변경 시 데이터 영역의 메모리를 변경하여 값을 변경하는 것처럼 보인다.(가변성) 1. 변수에 값을 할당하는 과정 - 데이터 영역 메모리의 값을 직접 바꾸지 않는다. - 값을 재할당함으로써 데이터를 변경한다. 1) 바꾸고자 하는 값을 검색한다. 2-1) 값이 존재하면, 그 데이터의 주솟값을 할당한다 2-2) 값이 존재하지 않다면, 새로 ..

🌕 Front/🌱 Vanilla JS 2022. 1. 7. 21:37

스크립트(script) 추가/제거하는 버튼 만들기

script를 실행하고 싶은 이름을 배열에 적으면, 버튼이 생성되며, 누르면 해당 js파일이 실행된다. index.html에서 script파일을 수동으로 일일이 바꿔야하는 수고를 덜었다. const fileList = ['class', 'promise'] const hasScript = (fileName) => { const currentScripts = document.head.getElementsByTagName('script') for(scriptElem of currentScripts){ if(scriptElem.src.includes(fileName)){ return true } } return false } const removeScript = (fileName) => { const curre..

🌕 Front/🌱 Vanilla JS 2021. 11. 22. 11:55

[Iterable VS Enumerable] 깔끔하게 정리하고 갑시다

한 방 정리 뜻함수뜻타입예시Iterable반복 가능한for (value of arr)순회하면서 값에 접근할 수 있는가 iterator 객체가 있는 데이터 타입Array, map, set,nodeList, StringEnumerable열거 가능한  for ( key in obj)객체의 key에 접근할 수 있는가객체 타입Object   예제로 살펴보자// 배열 예시let arr = ['Junha', 'Rany', 'Leo']arr.hobit = 'Prodo'// 객체 예시let obj = { firstKey: ['Nunu','Garen'], secondKey:['Yumi','Galio','Ryze'], thirdKey:['Minsu','heejung']}obj.fourthKey = 'Junha' ..

🌕 Front/🌱 Vanilla JS 2021. 11. 19. 12:07

arguments 객체: function안에 있는 너, 누가 선언했니?

arguments객체: 실행 컨텍스트 생성 시점에 만들어지다 arguments 객체는 실행 컨텍스트 생성 시점에 함께 만드는 정보 중 하나다. 지정한 매개변수의 개수와 무관하게 호출 시 인자가 모두 arguments 정보에 담긴다. 이러한 특성 덕에 함수의 자율성을 높이는 측면에서 자주 사용한다. arguments는 유사배열 객체이기 때문에 배열처럼 활용하기 위해선 별도의 처리가 필요하다. 또 함수 내부에서 매개변수의 값을 바꾸면 arguments의 값도 바뀌는데, 이는 전달된 인자를 모두 저장한 데이터라는 본래의 개념과 달라지게 된다. 이 때문에 ES6에서는 나머지 파라미터(rest parameter aka ...)가 등장하여 argumetns를 대체하고 있다. 1. 인자 개수와 무관하게, 유연하게 처..

🌕 Front/🌱 Vanilla JS 2021. 11. 18. 23:19

[addEventListener] 콜백함수에게 인자를 주는 방법

EventTarget.addEventListener() target.addEventListener(type, listener[, options]); 소개 1. EventTarget의 메서드이다. 2. 주어진 이벤트 유형에, EventListener를 구현한 함수를 이벤트 처리기 목록에 추가해 작동한다. 3. EventTarget은 보통 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다. 매개변수 1) type - 반응할 이벤트 유형을 나타내는 대소문자 구분 문자열. ex) 'click' 2) listener - 지정된 타입의 이벤트가 발생했을 때, callback함수가 작동한다. - 콜백함수의 첫 번째 인자는 '이..

🌕 Front/🌱 Vanilla JS 2021. 11. 17. 11:35

key에 접근하는 2가지 방법. obj.key, obj['key']

1. 객체의 property에 접근하는 두 가지 방법cosnt obj = { name: 'junha'}obj.name obj['name']// 'junha' 2. object.key 방법의 문제점하이픈(-)이 들어간 property에 접근할 수 없다.obj.a-b// (obj.a) - bobj['b-c']// obj의 key 'a-b'에 접근  var a = { "a" : 1, "b-c": 2, "0d" : 3, // 선언 자체는 가능 "d0" : 4, 2: 5}console.log(a.a) // 1console.log(a.b-c) // ReferenceError: c is not definedconsole.log(a.0d) // SyntaxError: Invalid or unexpected..

🌕 Front/🌱 Vanilla JS 2021. 8. 3. 16:58

Window 객체

Window 객체 브라우저의 요소들과 자바스크립트 엔진, 모든 변수를 담고 있다. 모든 객체를 포함하고 있는 전역객체(글로벌객체)이다. const really = 'Really?' really; // 'Really?' // 전역변수, 어디에서나 사용가능하다. window.really // undefined let과 const 키워드로 선언한 변수는 블록 스코프이기 때문에 window 객체 내부의 블록에서 선언된 것으로 평가되어 전역 객체의 프로퍼티로 활용할 수 없다. window의 메소드 & 프로퍼티 window.open(); window.close(); open메서드는 호출주체를 사용하지 않으면 전역객체로 받아들이기 때문에 window는 생략할 수 있다. 하지만 다른 함수와 헷갈릴 수 있기 때문에 wi..

🌕 Front/🌱 Vanilla JS 2021. 2. 23. 14:44

ES(ECMAScript) VS JS(JavaScripit) 차이점

세 줄 요약 1. Javascript는 프로그래밍 언어로써 하나의 개별된 대명사로 쓰인다. 2. ECMAScript는 표준화된 JavaScript를 말하며, 언어의 사양(Specification)을 뜻한다. 3. ES6, ECMAScripit6는 ECMA에서 2015년 6월 발행한 표준화한 범용 프로그래밍 언어 버전을 말한다. More About ECMAScript ECMA, (유럽 컴퓨터 제조업체 협회)는 기술 표준을 만드는 조직으로, 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구다. ECMA 스크립트는 ECMA 인터내셔널에서 발행한 표준이다. 여기에는 범용 스크립팅 언어에 대한 사양이 포함되어 있다.ECMA 스크립트 규격을 준수하는 범용 스크립팅 언어다. 기본적으로 스크립팅 언어를 사용하는 방..

🌕 Front/🌱 Vanilla JS 2021. 2. 13. 11:40

[JSON] 데이터 주고 받을 때 쓰는 표현 방법, 그럼 XML, BSON은?

JavaScript Object Notation데이터 표현 방법, 데이터 교환 포맷이다. 주로 데이터를 주고 받을 때 사용한다.서버와 클라이언트간 비동기 통신에 많이 사용한다.데이터를 저장하거나 전송할 때 많이 사용한다.key, value 쌍으로 이루어진다.특정 언어에 종속되지 않는다.XML의 불필요한 태그, 많은 용량, 나쁜 가독성 때문에 JSON이 대부분 대체되었다.eXtensible Markup Language: 데이터를 설명하는 태그를 마음대로 정의할 수 있다.data 표현에 집중한 HTML과 달리, data 전달에 집중한 언어다.  JSON 구조{ "squadName": "Super hero squad", "homeTown": "Metro City", "formed": 2016, "act..

🌕 Front/🌱 Vanilla JS 2021. 1. 27. 08:51