본문 바로가기

JavaScript17

[Javascript] Iterable (이터러블) 📍 Intro Iterate 는 '반복하다' 는 사전적 의미를 가지고 있는 용어로, 프로그래밍에서는 주로 '반복 가능한 객체' 를 의미한다. 자바스크립트에만 존재하는 개념은 아니지만, 자바스크립트의 이터러블 개념을 학습하면 다른 프로그래밍 용어에도 쉽게 적용할 수 있다. ✨ ES6 에 추가된 Iterable ECMAScript 는 자바스크립트를 표준화하고 토대를 구성하기 위해 만들어진 표준화된 스크립트 프로그래밍 언어이며, ES6은 6번째 ECMAScript 버전을 의미한다. ES6 은 2015년에 제정되었는데, 이전까지 문제가 되었던 많은 부분들이 해결되고 기능이 대거 추가되어 자바스크립트의 가독성과 유지보수성을 향상했다. ES6에는 기존에 없었던 Scope, parameter handling, 구조분.. 2021. 10. 13.
[Javascript] 실행 컨텍스트 (Execution Context) 와 소스코드 이전에 Javascript 에서의 this 를 다뤘던 글에서 잠깐 "실행 컨텍스트"를 언급했었다. Javascript 에는 (그리고 아마 대부분의 프로그래밍 언어에는) 실행 컨텍스트라는 개념이 존재하는데, 이를 잘 이해하기 위해서는 우선 "소스코드" 의 개념부터 이해해야 한다. ✨ 소스코드 ECMAScript 는 소스코드를 4가지 타입으로 구분한다. 소스코드는 타입마다 실행 컨텍스트를 생성하는 과정과 관리 내용이 다르며, 이를 간략히 요양한 내용은 다음과 같다. 📍 전역 코드 (Global code) : 전역에 존재하는 코드 (함수, 클래스의 내부 코드 미포함) 1. 전역 스코프 (최상위 스코프) 생성 2. 전역 객체와 연결 3. var 키워드로 선언된 전역 변수 + 선언된 전역 함수를 전역 객체의 프로.. 2021. 9. 28.
[NodeJS] Node 의 this 란? (+ 화살표 함수의 this) ✨ console.log(this) 의 결과 이전에 정리해두었던 자바스크립트(이하 JS)의 this 에서 주의사항으로 언급했듯, 브라우저에서 실행되는 JS 의 this 와 node 에서 실행되는 JS 의 this 는 다르다. [Javascript] Javascript 의 this 란? ❗ 주의: Node 에서의 this 는 조금 다릅니다. 이 글에서 다루는 내용은 브라우저에서 작동하는 JS 에서의 this 입니다. Javascript 의 this 는 자주 등장하지만, 정확히 알기 힘든 개념이다. 이번 글에서 haeunyah.tistory.com 브라우저의 전역객체는 window 이다. 따라서 전역 scope 에서 console.log(this) 를 입력할 경우 window 가 뜨는 것이 맞다. conso.. 2021. 9. 10.
[Javascript] Javascript 의 this 란? ❗ 주의: Node 에서의 this 는 조금 다릅니다. 이 글에서 다루는 내용은 브라우저에서 작동하는 JS 에서의 this 입니다. Javascript 의 this 는 자주 등장하지만, 정확히 알기 힘든 개념이다. 이번 글에서는 this 의 기초 작동 방식과 바인딩에 대해 설명하고자 한다. this 의 개념에 접근하기 전, 먼저 알아두어야 하는 실행 컨텍스트와 프로퍼티 & 메서드부터 살펴보자. ✨ Javascript 에서의 실행 컨텍스트 이전 글에서 잠깐 언급했지만, Javascript 는 컴파일 언어가 아닌 인터프리터 언어이다. 인터프리터 언어로 작성된 코드는 실행 즉시 인터프리터가 코드를 한줄씩 읽어내려가며 실행한다. 이 때 인터프리터는 코드 해석을 조금이라도 편하게 하기 위해 코드를 작은 조각으로 .. 2021. 9. 7.
[Javascript] 이벤트 루프 (Event Loop) 란? ✨ JS, Event Loop, Single Thread NodeJs 의 single/multi thread 여부를 정리하다보니 Js 의 Event Loop 개념을 조금 더 확실히 알아두어야겠다는 생각이 들었다. [NodeJS] NodeJS 는 Single Thread 일까? Multi Thread 일까? ✨ 고민이 시작된 계기 JS 기초를 학습하던 당시에는 스레드와 프로세스의 기본 개념을 학습해두기만 하고, 구체적으로 살펴보지 못했었다. 웹개발 교육과정이 끝나갈 무렵, 실시간 줌 강의에서 haeunyah.tistory.com 자바스크립트는 싱글스레드 언어이다. 하지만 이전 글에서도 볼 수 있었듯, 멀티스레드처럼 동시에 여러 태스크의 작동이 가능하다. 이 특징은 브라우저 런타임 환경에서도 동일하다. 왜일.. 2021. 9. 7.
[NodeJS] NodeJS 는 Single Thread 일까? Multi Thread 일까? ✨ 고민이 시작된 계기 JS 기초를 학습하던 당시에는 스레드와 프로세스의 기본 개념을 학습해두기만 하고, 구체적으로 살펴보지 못했었다. 웹개발 교육과정이 끝나갈 무렵, 실시간 줌 강의에서 크루분께 "JS 는 싱글 스레드일까요?" 라는 질문을 들었고, 내 대답은 당연히 "yes" 였는데, 의외로 "No" 라는 반응도 많았다. 다들 조금씩 다르게 알고 있는 이유가 궁금해서 구글링을 해 보니, 헷갈릴만한 이유가 있다는 생각이 들었다. 이번 글에서는 JS, 그리고 NodeJS 가 과연 Single Threaded 인지 Multi Threaded 인지 훝어보도록 하겠다. ✨ 프로세스와 스레드 (Process & Thread) 프로세스와 스레드는 이전 글에서 이미 한 번 다룬 적이 있으니, 간단히만 짚고 넘어가겠다.. 2021. 9. 6.
[Javascript] 구조분해 할당 ✨ 구조분해 할당(Destructuring)이란? 배열이나 객체의 속성을 해체하여 값을 개별 변수에 담을 수 있게 해주는 표현식이다. Python 등의 언어에도 동일한 기능이 존재한다. // 구조분해 할당 : 배열 let [a, b] = [1, 2] console.log(a) // 1 console.log(b) // 2 let x = [1, 2, 3, 4, 5]; let [y, z] = x; console.log(y); // 1 console.log(z); // 2 // 구조분해 할당 : 객체 let {a, b} = {a: 4, b: 10} console.log(a) // 4 console.log(b) // 10 let {x} = {x: 10} let {y} = {y: 20} let z = {x, y} .. 2021. 6. 5.
[Javascript] JSON ✨ JSON 이란? Javascript Object Notation 의 약자로, XML (Extensible Markup Language) 이나 YAML 과 같은 데이터 형식 (객체) 중 하나이다. 용량이 작고 직관적으로 읽고 쓸 수 있다는 장점 덕분에 대부분의 웹 API 나 Configuration 파일에 활용된다. Javascript 와의 호환성도 높으며, 대부분의 프로그래밍 언어에 JSON 데이터를 파싱할 수 있는 내외장 모듈이 존재한다. (ex: python 의 json 모듈) XML vs JSON // xml Tove Jani Reminder Don't forget me this weekend! // JSON { "squadName": "Super hero squad", "homeTown": ".. 2021. 6. 5.
[Javascript] ExpressJS (Intro) ✨ Express란? Nodejs 를 위한 웹 서버 프레임워크이다. ✨ 기본 사용 안내 설치: npm install express 서버 연결: const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { res.send('Hello World!') }) // '/' 로 라우팅 되지 않는 url 에 대한 get 요청에 대해서는 전부 404 에러가 반환된다 app.listen(port, () => { console.log(Example app listening at http://localhost:${port}) }) 웹 앱 뼈대 구성 : npx express-generator ✨ 라우.. 2021. 6. 5.