v8 엔진에서 사용중인 컴파일 방식. JIT + interpreter 의 장점을 합친 방식이다. 현재 v8엔진에서는 소스코드 파싱 -> AST생성 -> Ignition 컴파일러로 byte code(중간언어) 컴파일 이후 실행한다. 실행 중 런타임 프로파일러를 통해 사용 빈도(반복횟수 등)를 측정한다. 이에 따라 최적화가 필요한 코드(자주 반복 사용되는)를 TurboFan으로 보낸다. TurboFan에서는 컴파일을 통해 최적화 작업을 진행한다. (실제 엔진에서 터보팬이 추력을 더해주면서 동시에 배출공기를 통해 냉각 효과를 가져온다는 점을 생각하면 네이밍이 기가막히다) Sneak peek into Javascript V8 Engine Ever since I started my programming journ..

작년 12월 연말의 어느 날. 꽤나 한가한 일정을 보내던 나는 평소 눈엣가시처럼 여기던 자체 서비스 리팩토링/최적화를 하고 싶다는 의견을 대표에게 피력했고, 1주일의 스프린트를 할당받아 레거시 코드에 대한 최적화 및 리팩토링을 진행했다. 길지 않은 시간동안 부족한 실력으로 해내려다 보니 부족한 점이 많았지만, 나름 뿌듯한 1주일의 기억으로 아직도 남아있다. 언젠간 써야지 써야지 해놓고 기록만 해뒀던 내용을 이제야 꺼내본다. 문제점 큰 문제가 3개가 있었다. 1. 번들 사이즈 무식하게 큼. 당시 자사의 서비스 웹은 CRA를 통해 제작된 페이지로, 최적화따윈 되지 않은 통짜 CSR 그 자체였다. 청크파일 용량이 총 1.8mb에 달했는데, 네트워크 환경이 느린 곳에서는 페이지 로드가 심각할 정도로 느렸다. 아..

enzyme 환경에서 비동기 처리 후 state변경에 대응하는 과정에서 너무 고통을 받다 보니, waitFor expectation을 지원하는 testing-library를 써야겠다는 생각이 들었다. 전환하고 나니 테스트도 원할해지고, 직관적으로 사용할 수 있는 것 같아 만족스럽다. Introduction | Testing Library React Native Testing Library is a testing library for React Native inspired testing-library.com enzyme 다 썰어버리고 심플하게 간다 testHelper/utils.tsx import React from "react"; import { fireEvent as fe, FireEventFuncti..

RN의 SafeAreaView 컴포넌트는 최신 IOS 기기에서 발생하는 노치 영역 및 홈 버튼 영역(?)에 대한 영역 보장을 해주는 컴포넌트이다. 즉 달리 말하면 SafeAreaView 컴포넌트가 위치한 영역을 기준으로 노치영역과 홈 버튼 영역에 대한 보장이 이뤄진다고 할 수 있다. 따라서 IOS에서 상단이나 하단 영역에 대한 SafeArea 보장을 받기 원한다면 SafeAreaView를 사용해 원하는 영역을 Wrapping 하면 되는데, 다른 컴포넌트를 Wrapping 해서 사용하는 것 외에 export function Navigation() { return ( ); } 이런 식으로 사용해서 상단 노치영역만 확보하거나 하는 일이 가능하다. 이런 식의 스킬이 필요한 상황은 어떤 상황일까? 1. SafeA..

한국 시간으로 10월 27일, Next12의 발표가 있었다. 이 영상 썸네일은.... 저번 Next conf와 동일하게 1시부터 시작을 했고, 저번의 경험으로 일찍 끝난다는걸 알고 있었기 때문에 보고 잤다. 2021 Next.js Conf 후기 Next.js Conf A special edition of Next.js Conf, presented by Vercel (creators of Next.js) and Google Chrome. Let's make the web. Faster. nextjs.org 한국 시각으로 오늘인 16일 오전 1시에 Next.js의 앞.. nookpi.tistory.com Nextjs 자랑타임이 지나가고, 핵심 내용만 보도록 하자. 1. URL import (alpha) 말 ..

jest를 사용한 테스트 코드는 생각보다 쉽고 재밌었는데, 환경 구축이 엄청 빡셌다 ㅠ path alias 적용 1. tsconfig.json에 절대경로 추가 "baseUrl": ".", "paths": { "@src/*": ["src/*"] }, 2. tsconfig-paths 설치 babel-plugin-module-resolver 설치 3. babel.config.js - plugins에 module-resolver 설정 추가 [ "module-resolver", { root: ["."], extensions: [".ts", ".tsx", ".jsx", ".js", ".json"], alias: { "@src": "./src", }, }, ], 4. webpack.config.js 내 alias 추..