분류 전체보기
-
JavaScript Visualized: Generators and Iteratorset cetera/TIL 2021. 11. 27. 18:37
■ Generators and Iterators 일반 함수는 호출하면 바로 완료까지 실행되는 'run-to-completion' 모델. 제너레이터 함수(function*)는 함수 실행 중간중간에 yield 키워드로 pause가 가능. 제너레이터 함수는 iterator인 제너레이터 객체를 반환. (사실 iterator이면서 iterable이다.) iterator이므로 next 메서드를 가진다. next 메서드를 호출하여 값을 직접 출력해보면 value와 done 프로퍼티를 가진 객체(iterator result)가 반환된다. value는 yield(혹은 return) 해주는 값들과 동일하고, done은 yield가 아닌 return일 때만 true를 가지는 boolean 값. yield 키워드가 나오면 제..
-
Javascript Visualized: Prototypal Inheritanceet cetera/TIL 2021. 11. 27. 18:34
■ Prototypal Inheritance 우리가 생성자 함수를 만들면 생성자 함수 뿐만 아니라, prototype이라는 별도의 객체가 하나 더 생성된다. 이 prototype이라는 객체는 기본적으로 원본 생성자 함수를 참조하는 'constructor' 프로퍼티를 가지고 있다. constructor 프로퍼티는 기본적으로 non-enumerable, 즉 객체 프로퍼티에 접근하려할 때 표시되지 않는다. Object.keys에도 non-enumerable 프로퍼티는 반환되지 않음. __proto__는 prototype 객체를 참조한다. 생성자의 각 인스턴스들은 생성자의 prototype에 접근할 수 있고, 그것이 prototypal inheritance이다. 간단한 예를 들자면, Dog라는 객체의 인스턴스인..
-
Javascript Visualized: Javascript Engineet cetera/TIL 2021. 11. 27. 18:29
■ Javascript Engine HTML 파서는 source(src)가 있는 script 태그를 만나게 된다. 이 때, source의 코드는 네트워크, 캐시, 서비스 워커 등을 통해 로드된다. 날아오는 응답은 요청된 script가 바이트 스트림으로 변환된 형태. 바이트 스트림이 다운되면서, 바이트 스트림 디코더가 이를 디코딩(해석)한다. 바이트 스트림 디코더는 해석된 바이트 스트림으로부터 토큰을 생성한다. 자바스크립트 엔진은 두 개의 파서를 사용한다. parser와 pre-parser. parser는 지금 바로 사용되는 코드를, pre-parser는 나중에 필요한 코드를 각각 다룸으로써 지금 당장 사용되지 않는 코드를 파싱하는 것을 최대한 피하기 위함. (버튼을 클릭했을 때 동작하는 함수같은 것들은,..
-
Javascript Visualized: Event Loop, Hoisting, Scope Chainet cetera/TIL 2021. 11. 27. 18:26
■ Event Loop setTimeout(() => { ... }, 1000)은 Web API 쓰레드에서 1000ms 타이머 실행이 끝난 후에 바로 실행되는 게 아니다. 1000ms 후에 단순히 setTimeout의 콜백 함수가 task queue에 추가되는 것 뿐이다. task queue는 대기열이므로 해당 콜백 함수는 대기열이 끝나고 자신의 차례가 될 때까지 기다려야한다. call stack이 비어있으면 task queue에 있던 콜백 함수들이 하나씩 event loop에 의해 call stack으로 이동한다. ✨♻️ JavaScript Visualized: Event Loop Oh boi the event loop. It’s one of those things that every JavaScrip..
-
🎨 곧 나올 CSS 기능들Web/CSS 2021. 11. 27. 15:43
요 동영상을 유튜브에서 보고 나서, 궁금해서 슥 찾아봤는데 위 영상에 나와있는 CSS 기능들은 대부분 드래프트(FPWD, WD) 단계에 위치해 있는 기능들인 듯. 보통 '표준'이라고 불릴만한 것들은 REC 단계부터이고, CR 단계만 돼도 W3C에서 everyday use, 즉 일상적인 사용을 권장하는 수준이라고 한다. 영상에서도 말하듯이, 점점 컴포넌트 기반으로 코드를 짜는 것이 대세가 되면서 그에 맞는 CSS 기능들이 적절하게 추가되고 있는 것이 아닌가 생각. 1. Cascade Layers 원래 CSS 코드의 우선순위를 결정하는 간접적인 요인들이 몇 가지 존재했었다. 더 나중에 선언할수록, CSS 선택자가 더 구체적으로 명시되어 있을수록 우선순위가 높다던가 하는 것들. @layer 를 사용하면 lay..
-
2021년 11월 셋째 주 기록Diary 2021. 11. 18. 04:55
1. 자바스크립트에서 객체 리터럴보다 JSON.parse로 객체를 선언하는 것이 더 빠르다. (약 1.7배) 자바스크립트 엔진이 해석하기에 객체 리터럴보다 JSON이 훨씬 더 간단하기 때문이라고 함. 객체 리터럴의 프로퍼티 값으로는 숫자, 문자열, 불리언, 객체, 배열 등 다양한 리터럴이 올 수 있다. 반면 JSON.parse는 그저 단일 문자열 인수를 갖는 함수일 뿐이므로 훨씬 경우의 수가 간단. 또한 자바스크립트 파서가 객체 리터럴에 사용되는 '{' 를 마주하면 생각해야 하는 경우의 수가 꽤 많다. 반면 JSON.parse의 문자열 안에서는 '객체의 시작'이냐, '유효하지 않은 JSON'이냐만 생각하면 된다. 즉, JSON보다 자바스크립트 문맥을 해석하는 게 훨씬 민감하고 까다롭다. 하지만 객체 리터..
-
EC2로 Next.js 앱 배포하기Web/Build and Deploy 2021. 10. 6. 20:13
사실 글 자체는 Next.js에 크게 초점이 맞춰져 있지는 않다. EC2를 이용해서 앱을 배포하는 것이 메인 주제이지만, 굳이 'Next.js 앱' 이라고 덧붙인 이유는 Next.js는 별도의 서버 로직을 작성할 필요가 없기 때문이다. 물론 Customizing을 원한다면 직접 서버 로직을 작성해서 EC2에다 배포해도 되긴 하지만, 대부분의 경우에는 Next.js에서 기본으로 제공해주는 서버 로직을 사용해주는 것이 좋다고 한다. 서버 로직을 직접 작성하면, Next.js의 기본 서버 로직이 갖고 있는 성능 최적화의 이점이 사라지기 때문. 1. EC2 콘솔에 접속해서 인스턴스 시작 버튼 누르기 2. Amazon Machine Image(AMI) 선택하기 AMI는 인스턴스를 시작하는 데에 필요한 정보를 제공..
-
CRA를 Next.js로 마이그레이션하기Web/React 2021. 10. 6. 02:39
서버 사이드 렌더링(SSR)을 언젠가 한 번쯤 해봐야겠다고 생각하곤 있었는데, 막상 프로젝트 진행하고 미션 진행하고 하다보니 딱히 시도해 볼만한 시간이 안났다. 사실 핑계이긴 하다.. 쉴 시간 줄여서 공부하면 되긴 하니깐. 반성... 그러던 중 때 마침 미션으로 SSR 관련 미션이 나와서 Next.js를 아주 가볍게 이용하여 SSR을 살짝 맛볼 수 있게 됐다. 서버 사이드 렌더링 중에서도 Next.js, 그 중에서도 CRA에서 Next.js로 마이그레이션 하는 방식으로 아주 가볍게 도입만 해 본 셈이지만, SSR을 깊게 공부할 수 있는 발판이 될 수 있지 않을까 생각한다. 1. 설치 CRA의 불필요한 dependency들을 제거한다. npm uninstall react-scripts react-route..