Front/JavaScript6 VanilaJS로 SPA 개발해보기 (No Framework) 프레임워크 없이 순수 바닐라JS로 SPA(Single Page Application)을 개발해보자. 포스팅 된 프로젝트는 아래 깃헙(github)에서 확인하실 수 있습니다. https://github.com/awesome-sh/vanila-spa GitHub - awesome-sh/vanila-spa: Vanila JS Single Page Application (No Framework) Vanila JS Single Page Application (No Framework). Contribute to awesome-sh/vanila-spa development by creating an account on GitHub. github.com 주요 기능 SPA의 주요 특징 중 하나가 Routing 처리라고 .. 2022. 2. 15. 트리 쉐이킹 (Tree Shaking) 이란 무엇인가 트리 쉐이킹 (Tree Shaking) 사용하지 않는 코드를 제거하는 방식을 말한다. (Rollup, Webpack에서도 찾아볼 수 있다) 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 Tree-shaking 이라고 명명하였다고 한다. 트리 쉐이킹을 적용할 지점을 찾아보자 사용하는 모듈로부터 전체를 Import 하지 않고 사용하는 기능만 {} 부분적으로 Import 한다. import utils from 'utils-lib' let count = 0; const handlePlus = (a) => { count += a }; utils.parseResult(handlePlus(5)); // '현재까지 누적된 카운트는 : (a)' 누적값 앞뒤로 스트링 메시지가 감싸져 리턴값을 돌려주는 utils.p.. 2022. 1. 12. 이벤트 루프 (Event Loop) 정확히 알기 (2) 지난 포스팅에서는 이벤트루프에 대해 간략하게 알아보았다. 2021.10.15 - [Front/JavaScript] - 이벤트 루프 (Event Loop) 정확히 알기 (1) 이벤트 루프 (Event Loop) 정확히 알기 (1) 자바스크립트의 특징 중 하나는 '단일 스레드' 기반의 언어입니다. 스레드가 하나라는것은 한번에 하나의 작업만 처리할 수 있다는 말이기도 한데 실제로 브라우저에서 자바스크립트가 사용되 sihus.tistory.com 이번 포스팅에서는 이벤트루프의 동작에 대해 더 살펴보고자 한다. 지난 포스팅에서 이벤트루프란 '단일 호출 스택'을 사용하는 자바스크립트 엔진과 상호 연동하기 위해 사용하는 장치' 라고 설명하였다. 그럼 어떻게 엔진과 상호연동하는지 알아보자. 지난 포스팅에서 확인한 브라.. 2021. 10. 17. 이벤트 루프 (Event Loop) 정확히 알기 (1) 자바스크립트의 특징 중 하나는 '단일 스레드' 기반의 언어입니다. 스레드가 하나라는것은 한번에 하나의 작업만 처리할 수 있다는 말이기도 한데 실제로 브라우저에서 자바스크립트가 사용되는 환경을 보면 마치 동시에 처리되고 있는 것처럼 보이게 되는데 (동시성) 어떻게 하나의 작업만을 할 수 있는 단일 스레드인데 '어떻게 동시성'을 지원하는 것일까에 대한 고민으로부터 이 포스팅을 정리해보려고 합니다. 브라우저 환경을 그림으로 표현 (https://meetup.toast.com/posts/89) 위 이미지에서 보면 비동기 호출을 위해서는 자바스크립트 엔진이 아닌 Web APIs 영역에서 이루어 진다고 표현되어 있다. 이벤트루프, 태스크 큐도 엔진 외부에 위치해 있는 것을 볼 수 있다. http://stackove.. 2021. 10. 15. [Javascript] 호이스팅(Hoisting)에 대해 정리 실무에서 프론트 프레임워크로 도배된 프로젝트들만 하다보니 자바스크립트의 기본 특성들을 다시 리마인드하고자 포스팅을 하게되었습니다. 그 중에서도 호이스팅(Hoisting) 특성에 대해 정리해보려 합니다. 호이스팅은 Javascript라는 언어의 특성을 가장 잘 보여주는 특성 중 하나입니다. 정의 Hoist의 사전적 정의는 '끌어올리기'라는 뜻을 가지고 있습니다. 자바스크립트에서 끌어올려지는 것은 변수이며, var 키워드로 선언된 모든 변수선언은 호이스트 됩니다. 호이스트란 변수의 정의가 정의된 범위에 따라 '선언'과 '할당'으로 분리되는 것을 말합니다. 1) 변수가함수 내에서 정의되었을 경우, 선언이 함수 스코프안에 최상위로 이동합니다. 2) 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 이동합.. 2021. 10. 7. [JavaScript] Generator Function 이해하기 Generator Function GeneratorFunction GeneratorFunction 생성자는 새로운 generator function 객체를 생성한다. JavaScript 에서 모든 generator function 은 실제로 GeneratorFunction object 이다. developer.mozilla.org Generator Function을 처음 알게 된건, Redux-saga를 통해 알에 되었다 모양은 function* 이렇게 function 선언 다음에 * 가 붙은 모양이다. function* generatorTest() { yeild console.log(5); yeild console.log(10); } 일반 함수는 함수를 호출하면 Funtion안에 선언된 로직들이 일괄 .. 2020. 5. 25. 이전 1 다음
