On a couch

* 컨퍼런스 영상 시청 및 리뷰 스터디를 위한 인증글입니다. 강의 영상 : https://www.youtube.com/watch?v=mee1QbvaO10 강의 노트 CommonJS 모듈 시스템의 등장 javascript에 ‘모듈’이라는 개념이 없었을 때 라이브러리를 import 하려면, 스크립트 태그를 이용해서 해당 라이브러리의 전역을 참조해야 했다. ‘commonjs’라는 모듈 시스템이 등장해, script 사용으로 인해 발생하는 비효율을 해결하고자 했다. 함수 호출 한 번으로 모듈을 가져올 수 있게 되어 함수를 가져오거나 외부에 노출하는 동작이 쉬워짐. // export exports.add = function (){ ... } // improt const {add} = require('./add.j..

레퍼런스 [Redux] 리덕스의 내부 파헤치기 replaceReducer on @reduxjs/toolkit 설명 / 정의 react 페이지의 크기가 커지면서, 모든 페이지를 한 번들로 가져오기 부담스러워 코드 분할을 하였다. 그러다보니 마찬가지로 redux store도 처음부터 모든 state를 들고 있을 것이 아니라, 해당 state가 필요한 곳에서만 동적으로 추가하도록 변경할 필요가 생겼다. 그래서 선배와 이것저것 뒤지다가 발견한 코드가 이것이다. const staticReducers = { counter: counterReducerSlice, }; export const store = configureStore({ reducer: staticReducers, middleware: getDefaul..

레퍼런스 [리액트] 코드 분할(코드 스플리팅) - React lazy, Suspense, Loadable Components React Suspense 소개 (feat. React v18) Speed Up Your React Apps With Code Splitting 코드 분할이 필요한 이유 브라우저에서 자바스크립트를 실행할 때, 각 기능에 대한 스크립트를 전부 읽어온다. 이 스크립트가 많아지면 네트워크 비용도 높아지고 병목현상이 생기게 된다. 따라서 자바스크립트로 작성된 모듈(js+css+img 등 dependancy가 있는 자원들 모두)을 하나의 번들파일로 만들고 tree-shaking, minify 등의 작업을 통해 사이즈를 줄이는 노력을 한다. 단, 하나의 번들파일로 압축한다고 하더라도 만약 앱..

레퍼런스 ESModule을 동적으로 import 하기 Speed Up Your React Apps With Code Splitting 설명 / 정의 대부분의 경우에는 파일 상단에 필요한 모듈들을 static하게 import하는 것이 일반적이지만, 때때로 이를 필요에 따라 조건부로 불러올 수도 있다. dynamic import라고 불리며, 이는 ES2020(ES11)에 포함된 기능이다. // test.js export const sum = (a, b) => a + b // 상단에서 정적으로 import 하는 경우 import { sum } from './test' // 하단에서 동적으로 import 하는 경우 const sum = await import('./test') // default와 그 외 함수들..

회사에서 AWS 서비스를 잔뜩 연동해 사용하는데, 개념을 몰라 과정 파악이 어려웠다. 개념을 문서로 정리한 글을 못 찾아, 목마른 자가 우물을 파는 심정으로 정리해 보았다. 내용 추가 / 수정 환영합니다 :) 기본 개념 IoT 디바이스 - 클라우드 or 디바이스 - 디바이스의 통신을 용이하게 하는 기술이다. 이제는 칫솔, 진공 청소기, 자동차 및 기계와 같은 일상적인 디바이스가 센서를 사용하여 데이터를 수집하고 사용자에게 지능적으로 응답할 수 있다. 이러한 스마트 객체는 자동으로 인터넷과 데이터를 주고받을 수 있다. 이러한 모든 "보이지 않는 컴퓨팅 디바이스" 및 이와 관련된 기술을 사물 인터넷이라고 총칭한다. AWS IoT 개요 디바이스 연결과 관리 : 요건에 가장 잘 맞는 프로토콜(HTTP, MQTT..

watch 모드 tsc app.ts --watch또는 tsc app.ts -w 를 입력하면 해당 파일이 관찰 모드로 진입한다. ctrl+c로 저장할 때마다 컴파일이 실행된다. 단점은 특정 파일을 지정해야 한다는 것이다. 규모가 큰 프로젝트에서는 많이 사용하지 않는다. 전체 프로젝트 or 다수의 파일 컴파일하기 index.html에 다수의 js파일(ts로 컴파일하면 생길 파일)을 src로 걸어 두면, 그 중 한 가지만 변경사항이 생기더라도 전부 리컴파일한다. tsc --init 을 입력하면 tsconfig.json 파일이 생기면서 현재 프로젝트 폴더에 들어있는 모든 ts 파일을 컴파일 대상으로 본다. tsc -w 또는 —watch를 입력하면 관찰 모드로 확인하고, 변경 사항이 적용되어야 하는 모든 ts파일..

섹션1 메모 강의 프로젝트 설정 타입스크립트 컴파일러 설치 : npm install -g typescript 이후의 명령어는 tsc 폴더를 만들고 npm init 으로 package.json 생성, tsc init으로 ts 설정 npm install --save-dev lite-server 로 dev dependency에 ‘lite-server’ 설치 package.json 내부 scripts에 "start": "lite-server" 로 명령어 설정 후 실행 tsc app.js 로 작성한 ts코드 js로 컴파일하여 터미널과 브라우저에서 결과 확인 가능 *nodemon으로 워칭하는 법 https://colinch4.github.io/2020-12-03/README.typescript-개발환경구성/ 섹션2..

callback 함수 부분을 읽다가 promise를 설명하면서 generator 함수를 사용하는 것을 보았다. 써 본 적이 없어 낯설었는데, 스터디원 한 분이 좋은 자료를 찾아주셨다! https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36 💡🎁 JavaScript Visualized: Generators and Iterators ES6 introduced something cool called generator functions 🎉 Whenever I ask people about generator func... dev.to 개념 generator 함수는 ES6에서 소개되었다. 일반 함수가 run-to-completion..

Point 1 실행 컨텍스트 객체에는 3가지가 담긴다 1. VariableEnvironment : 생성 당시의 모습 2. LexicalEnvironment : 생성 후의 변화 반영 3. ThisBinding : this 식별자가 바라볼 객체 LexicalEnvironment는 두 가지 정보를 담는다. (1) EnvironmentRecord : 현재 컨텍스트 내의 매개변수명, 변수의 식별자, 선언한 함수의 함수명 수집 => 호이스팅과 연관됨 (2) outerEnvironmentReference : 상위 컨텍스트의 EnvironmentReconr => 스코프와 연관됨 Point 2 호이스팅이란 EnvironmentRecord가 식별자를 수집해 미리 알고 있는 것을 '끌어올린다고 표현'한 개념이다. Envir..

Point 1. 변수는 변경 가능한 데이터가 담길 수 있는 공간이고, 식별자는 그 변수의 이름이다. 원시형 데이터타입도 결국 '데이터가 저장되어 있는 주솟값'을 참조한다. (한 단계) 참조형 데이터타입은 ''데이터가 저장되어 있는 주솟값' 을 참조하는 배열/객체의 주솟값'을 참조한다. (두 단계) 보통 초심자들에게는 여기서 한 단계씩을 빼고 설명해주느라 약간의 부정확성이 생긴다고 한다. Point 2. 깊은 복사 : 배열/객체의 껍데기와 내부 데이터의 주솟값이 모두 달라지는 복사 얕은 복사 : 배열/객체의 껍데기만 새 주솟값을 갖고, 내부 데이터의 주솟값은 여전히 예전의 것을 공유하는 복사 참조형 데이터를 복사하는 메서드는 보통 current depth에서만 주솟값을 교체하므로, 깊은 복사를 하고 싶다면..