당연한 개발자가 되자

Plugin이란? 기본적으로 Babel은 코드를 받아서 반환합니다. Babel 함수를 정의한다면 이런 모습이 될 것입니다. const babel = code => code; Babel은 'Parsing'과 'Printing'만 담당하고 'Transforming' 작업은 'Plugin'이 처리합니다. 커스텀 플러그인 Plugin을 직접 만들면서 동작의 원리를 살펴봅시다. 'my-babel-plugin.js'라는 파일을 만들어 봅시다.(출처: Babel 홈페이지 예제 코드) module.exports = function myBabelPlugin() { return { visitor: { Identifier(path) { const name = path.node.name; // Babel이 만든 AST Nod..

크로스 브라우징 고대 히브리 신화를 보면 하늘에 닿기 위해서 바벨탑을 쌓는 이야기가 있는데, 하늘높이 탑을 쌓고 있는 사람들을 본 신이 사람들이 사용하는 말을 다 바꿔버려서 사람들이 더이상 소통할 수 없게 되었고, 결국 바벨탑을 쌓는데 실패하고 말았다는 이야기가 있습니다. 그 이야기와 비슷하게, 브라우저 마다 사용하는 언어가 달라서 Frontend 코드는 일관적이지 못할 때가 많습니다. 스펙과 브라우저가 개선되고 있지만, 여전히 인터넷 익스플로러는 'Promise'를 이해하지 못합니다. 작년까지만 해도 사파리 최신 브라우저는 'Promise.protorype.finally' 메소드를 사용할 수 없었습니다. Frontend 개발에서 크로스 브라우징 이슈는 코드의 일관성을 해치고 초심자를 불안하게 만듭니다...

❓플러그인의 역할은? 로더가 파일 단위로 처리하는 반면 플러그인은 번들된 결과물을 처리합니다. 번들된 Javascript를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용합니다. ⚒️ 커스텀 플러그인 만들기 webpack 문서의 Writing a plugin을 보면 Class로 플러그인을 정의 하도록 합니다. 문서의 예제 코드를 보고 나만의 플러그인을 만들어봅시다. // my-webpack-plugin.js class MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap('My Plugin', stats => { console.log('MyPlugin: done'); }); }; }; module.exports = MyWebpackPlugin; 로..

❓로더의 역할은? Webpack은 모든 파일을 모듈로 바라봅니다. Javascript로 만든 모듈 뿐만 아니라 StyleSheet, Image, Font까지도 전부 모듈로 보기 때문에 import 구문을 사용하면 Javascript 코드 안으로 가져올 수 있습니다. 이것이 가능한 이유는 Webpack의 로더 덕분입니다. 로더는 Typescript 같은 다른 언어를 Javascript 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환합니다. 뿐만아니라 CSS 파일을 Javascript에서 직접 로딩할 수 있도록 해줍니다. 🔨 간단한 커스텀 로더 만들기 로더를 사용하기 전에 동작 원리를 이해하기 위해 로더를 직접 만들어 봅시다. my-webpack-loader.js 파일 생성 module..

❓엔트리와 아웃풋이란? Webpack은 여러개 파일을 하나의 파일로 합쳐주는 번들러(Bundler)입니다. 하나의 시작점(Entry Point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물로 만들어 냅니다. app.js부터 시작해 math.js 파일을 찾은 뒤에 하나의 파일로 만드는 방식입니다. 🔨 간단히 Webpack으로 번들링 작업을 해봅시다. 번들 작업을 하는 webpack 패키지와 webpack 터미넣 도구인 webpack-cli를 설치합니다. # -D 옵션은 development 패키지, 즉 개발용 패키지로 설치한다는 의미입니다. npm install -D webpack webpack-cli 설치가 완료되면 node_modules/.bin 폴더에 실행 가능한 명령어가 몇 개 생깁니다. w..

❓ Webpack은 왜 필요한가? 먼저 문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터입니다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 webpack 등장 배경을 설명하는데 용이할 것 같습니다. 1️⃣ 최초로 사용한 방식 먼저 아래의 두가지 js 파일이 있다고 가정합니다. math.js // 두개의 숫자를 인자값으로 받아서 더하는 함수 function sum (a, b) { return a + b; } app.js // math.js 파일의 sum 함수를 사용하는 js 파일 console.log(sum(1, 2)); 위의 코드들은 모두 하나의 HTML 파일 안에서 로딩해야만 실행됩니다. math.js가 로딩되면 app.js는 이름 공간에서 ‘sum’을 찾은 후 이..

Rendering을 최적화하기 위해서 반드시 알아야하는 것 기본적으로 React는 부모 Component에 있는 ‘state’가 state 변경함수에 의해서 변경되었다면 헤당 ‘state’를 사용하는 자식 Component는 물론이고 사용하지 않는 자식 Component까지도 전부 re-rendering된다는 사실을 반드시 숙지해야합니다. (re-rendering 된다는 것은 해당 Component에 있는 모든 함수, 변수, HTML 태그들이 다시 생성된다는 의미이기도 합니다.) re-rendering이 발생했을 때 ‘props’가 변경되었는지 매번 검사해서 변경되었을 때만 re-rendering 해주는 ‘memo()’라는 함수는 ‘props’에 대하여 얕은 비교( ‘=== or !==’ )를 합니다. ..

Rendering 성능을 향상시키는 방법은? Rendering은 React의 동작 방식에서 일반적으로 예상할 수 있는 부분이지만, rendering 작업이 때때로 낭비가 될 수 있다는 것도 사실입니다. 만약 Component의 rendering 출력이 변경되지 않았고, DOM이 해당 부분을 업데이트할 필요가가 없다면 해당 Component를 rendering 시키는 것은 시간낭비이고, 더 나아가서 애플리케이션의 성능에도 영향을 주기 때문에 사용자에게 나쁜 사용자 경험을 주게 될 수도 있습니다. React Component rendering 결과물은 항상 현재 props와 state의 상태를 기반으로 결정되어야 합니다. 따라서 props와 state가 변경되지 않았음을 미리 알고 있다면 rendering ..

❓Rendering(렌더링)이란 무엇인가? React에서 Rendering이란 Component가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 Component에게 요청하는 작업을 의미합니다. ⚙️Rendering의 프로세스는? Rendering이 일어나는 동안 React는 Component의 루트에서 시작해서 아래쪽으로 쭉 코드를 보면서 업데이트가 필요하다는 flag가 지정되어있는 component를 찾습니다. 만약 업데이트가 필요하다는 flag를 만난다면 Class Component의 경우에는 'classComponentInstance.render()'를 호출하고, Function Component의 경우에는 'FunctionComponent()'를 호출하고, Renderin..

Scroll Event(Feat. throttle) 기존에는 Scroll Event를 사용해서 구현했었지만 여러가지 문제들이 많아서 권장하지 않습니다. Intersection Observer API(권장) (Feat. React-query) Intersection Observer API 사용법 https://shin96bc.tistory.com/213 무한 스크롤 구현 예시 저는 여러 페이지에서 무한 스크롤을 사용하기 위해서 custom hook으로 분리했습니다. useIntersectionObserver.ts import {useCallback, useEffect, useRef} from "react"; // [Intersection Observer API custom hook] // observer를..