Front18 코드분할(Code Spliting) / 동적로딩(React.Lazy, Suspense) / 에러바운더리(Error Boundary) 프로젝트가 빌드업됨에 따라 많은 로직들과 Import 라이브러리들이 증가하게 마련이고 우리는 렌더링 최적화를 고민해야하는 시점과 마주하게 된다. 백엔드에서 진행할 수 있는 API 최적화와 별게로 프론트엔드에서도 최적화 할 수 있는 만큼은 진행하는 것이 더 좋은 사용자 경험을 제공한다. 하지만 웹서비스라는 것은 사용자가 어느정도 페이지 로딩이 지연되어도 알게모르게 이해하고 넘어가는 유저들이 많다. 이 정도 기다림 쯤이야.. (본인 포함...) 하지만 그 기다림에도 한계가 분명 있기 때문에 우리들은 개선을 해야한다. 프론트엔드 성능 측정 도구로 크롬 Lighthouse를 통해 성능지표를 확인한다. SSR 방식이 아닌 서비스는 번들링 된 자바스크립트 파일의 분할을 권고한다. 리액트에서는 Lazy, Suspen.. 2022. 9. 28. [번역] useMemo, useCallback 제대로 알기 리액트 개발을 하다보면 useMemo, useCallback 이 두 가지 훅 사용에 대한 혼란을 겪을때가 있다. 이 포스팅은 이 훅들에 대해 정확히 알아 이 혼란을 줄이기 위해 번역하였다. 썸네일 제너레이터 - Thumbnail Generator useMemo useMemo의 기능은 렌더링 사이에서 계산된 값을 기억 하는 것이다. 리액트가 하는 주된 일은 UI를 어플리케이션 상태와 동기화 하는 것이고 이를 수행하는데 사용하는 도구가 리렌더링 이다. 각 리렌더링은 상태를 기반으로 하여 주어진 순간에 어플리케이션의 UI가 어떻게 보여야 하는지에 대한 스냅샷(*) 찍는다. *스냅샷 : 사진으로 비유하자면 각 사진은 모든 상태 변수에 대해 특정 값이 주어졌을 때, 사물이 어떻게 보이는지 포착하는 것 각 리렌더링.. 2022. 9. 23. 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. [Next.js] getStaticProps, getServerSideProps SG / SSR의 개념 SG : Static Generation SSR : Server Side Rendering Next는 브라우저 렌더링 시, 기본적으로 Pre-rendering(사전렌더링)을 한다 Pre-rendering이란, 각 페이지들을 사전에 미리 HTML 문서로 생성하여 가지고 있는 것이다. 이 말을 리액트와 비교해 보자면 아래와 같다. 리액트에서 CSR 방식은 번들링 된 JS 가 클라이언트 단에서 모든 렌더링을 담당했다. 하지만, Next의 Pre-rendering 시스템에서는 `빌드타임(Build Time)` 에서 해당하는 페이지 별로 각각의 HTML 문서를 미리 생성해서 가지고 있다가 서버로 해당페이지에 대한 요청이 들어올 때 알맞은 페이지를 반환해준다. No Pre-Rendering,.. 2022. 1. 19. 트리 쉐이킹 (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. Hydrate 이해하기 Hydrate Server Side 단에서 렌더링 된, 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤 클라이언트 단에서 HTML 코드와 JS 코드를 서로 매칭시키는 과정 1. Write site in React 2. Create build for production using ReactDOMServer, a server-side React API to generate HTML from React. 3. On Initial Load HTML generated from the server is displayed 4. ReactDOM.hydrate(), hydrates the HTML page rendered from the server with JavaScript 이 과정을 이해하기 위해 Reac.. 2021. 10. 20. 이벤트 루프 (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. Flux Design Pattern 이해하기 (+ 단방향, 양방향 데이터 바인딩) MVC 디자인 패턴이 아닌 Redux의 주개념이자, 리액트를 사용하면서 컴포넌트끼리 데이터를 교류할 때, 글로벌 이벤트 시스템을 설정하는 방법인 Flux 디자인패턴에 대해 알아보고 왜 facebook에서 react와 함께 MVC가 아닌 Flux를 적용하게 되었는지 알아보자 MVC의 한계와 Flux의 등장 개발자라면 한번쯤은 MVC(Model-View-Controller) 디자인 패턴을 사용하여 개발을 해봤을 것이다 그만큼 이 패턴은 어플리케이션 개발에 있어 널리 사용되는 디자인 패턴인데 대채 어떤 부분의 문제가 있길래 Facebook은 Flux라는 디자인패턴을 정의하게 되었을까? 한계 컨트롤러는 모델의 데이터를 조회하거나 업데이트 하는 역할을 하며 모델의 변화는 뷰에 반영된다. 또한 사용자는 뷰를 통해 .. 2021. 10. 11. [Javascript] 호이스팅(Hoisting)에 대해 정리 실무에서 프론트 프레임워크로 도배된 프로젝트들만 하다보니 자바스크립트의 기본 특성들을 다시 리마인드하고자 포스팅을 하게되었습니다. 그 중에서도 호이스팅(Hoisting) 특성에 대해 정리해보려 합니다. 호이스팅은 Javascript라는 언어의 특성을 가장 잘 보여주는 특성 중 하나입니다. 정의 Hoist의 사전적 정의는 '끌어올리기'라는 뜻을 가지고 있습니다. 자바스크립트에서 끌어올려지는 것은 변수이며, var 키워드로 선언된 모든 변수선언은 호이스트 됩니다. 호이스트란 변수의 정의가 정의된 범위에 따라 '선언'과 '할당'으로 분리되는 것을 말합니다. 1) 변수가함수 내에서 정의되었을 경우, 선언이 함수 스코프안에 최상위로 이동합니다. 2) 함수 바깥에서 정의되었을 경우, 전역 컨텍스트의 최상위로 이동합.. 2021. 10. 7. 이전 1 2 다음
