FrontEnd 이상혁

얼마 전 친구가 이런 블로그를 나한테 추천해 줬다 Brimstone: ES2025JavaScript engine written in Rust제목을 풀이해 본 즉, "Brimstone: Rust로 작성된 ES2025 엔진"이다.Brimstone이 뭘까?위에서 설명했듯, Brimstone은 Rust로 구성된 js엔진이다. Brimstone은 Rust로 처음부터 작성된 JavaScript 엔진으로, JavaScript 언어에 대한 완벽한 지원을 목표로 합니다.Brimstone - github - READMD.md 특징1. 완전한 Rust로 작성된 엔진 엔진 전체가 Rust로 작성되어 C/C++ 라이브러리 링크 없이 Rust 프로젝트에 쉽게 임베드할 수 있습니다. 이는 메모리 안전성과 단순성을 제공합니다. 2...

hydrate웹페이지를 렌더링 할 때,React와 같은 라이브러리는 번들된 js를 가져와 DOM을 생성한다. 이러한 방식은 처음엔 좋게 느껴졌으나, 초기 렌더링 속도 하락과 SEO의 한계등,단점들이 드러났다. 그래서 개발자들은 SSR이라는 것을 고안해 냈다. SSR은 서버단에서 정적 페이지를 렌더링 하고 js파일도 번들링 한 후에 클라이언트로 보내주는 방식인데,문제는 js파일이 오기 전 DOM에서는 사용자와 인터렉션이 일어나지 않는 메마른 상태이다. 그래서 이 메마른 DOM에 수분을 보충시켜 html과 js의 상태를 일치시켜 브라우저에 렌더링 하는 방법을 고안해 냈는데,이를 hydration(수분 보충)이라고 한다. 동작 과정1. SSRSSR은 서버에서 정적 페이지를 `renderToString`을 이용..

리엑트 렌더링 하는 단계는 총 2개가 존재한다 Render Phase와 Commit Phase라고 하는데오늘은 이것에 대하여 공부해봤다React의 렌더링렌더링이라고 하는 것은 사용자 화면에 콘텐츠를 그려내는 것을 의미하는데,화면에 그려지기까지 위에서 설명한 Render Phase와 Commit Phase가 있다 Render Phase는 렌더링할 것을 파익하고, Commit Phase는 적용하는 단계이다Trigger Phase트리거 페이즈는 렌더링이 발생된 원인을 정의하는 페이즈다 정식 개념은 아니고, 렌더 페이즈와 커밋 페이즈를 조금더 보충 설명해주기 위해 사용하는 개념이다예를 들면 useState나 부모의 props의 변경, 초기렌더링이 트리거 페이즈에 속한다 트리거 페이즈에도 초기렌더링과 리렌더링으로..

내가 예전에 작성한 블로그웹페이지 베포과정속 "build"에서 한번 다룬적이 있다 하지만 그때에는 저 블로그의 이름 그대로 베포에 대한 과정에 대해 설명하는 자리였기에 간단하게번들러와 트랜스파일링이 뭔지, 그 결과는 뭔지 간단히 서술했다 이번에는 해당 과정에 대해서 조금더 공부해봤다번들러번들러를 설명하기 전에 번들이 뭔지, 그리고 왜 필요한지에 대해 설명하겠다번들(bundle): 여러 파일을 하나로 결합 번들이란 말그대로 여러 파일을 하나로 결합한 덩어리다 우리가 만든 애플리캐이션의 여러 파일들을 하나로 묶어 파일 요청 수를 줄이고, 브라우저가 아닌 환경에서 개발된 코드를 브라우저가 이해할 수 있는 형태로 변환하며, 최신 자바스크립트 문법이나 모듈화된 코드를 사용할 수 있게 해준다번들러의 등장 배경초기의..

이 책은 자바스크립트 코딩의 기술 중제3장, 특수한 컬렉션을 이용해 코드 명료성을 극대화하라를 정독한 후에 작성하였다들어가기이 챕터의 주제는 제목처럼 특수한 컬렉션을 사용해서 코드의 명료성 향상 하는 것이다 컬렉션이란 언어가 제공하는 값을 담을 수 있는 형태라고 이해하면 된다 js의 대표적인 컬렉션으론 Array, Type Array,Key - Value 형태의 Object, Map, Set등이 존재한다 이번 챕텨에선 키 - 값 형태의 컬렉션인 Object와 Map, Set에 대해 알아볼 것이다객체를 이용해 정적인 키-값을 탐색하라값을 연속적으로 저장할 수 있는 컬렉션을 Array(배열)이라고 한다 많은 언어에서 배열을 지원하지만, js의 배열의 특징은 유연함이다하지만 유연하다고 해서 항상 배열을 사용..

들어가며이번에 내 친구가 이런 링크를 보내줬다 이걸 보고 웹에서는 기울기를 감지하는 방법이 없을까?라는 궁금증으로 시작하게 되었다DeviceOrientationEventDOE는 라우저가 제공하는 이벤트 객체로,우리가 eventlistener로 등록하면 기기에서 기울기 값을 받아 반환해 준다작동원리우리 기기 안에 있는 하드웨어로 값을 받아온다 가져오는 하드웨어는 앞뒤 기울기를 감지하는 가속도계와,기기의 회전각을 가져오는 자이로스코프가 있다 기기가 움직이면 기기 내의 하드웨어가 원시데이터를 기기의 os로 보낸다 그러면 os는 그 원시데이터를 각각의 정제된 데이터로 변환을 한다 그 후 OS는 브라우저에 정제된 데이터를 보내고,브라우저는 이를 바탕으로 js event 객체를 생성합니다 위 과정이 끝나면 이제 j..

이제까지는 약간 shadcn의 대한 이해가 두루뭉실했는데, 최근에 이를 활용한 프로젝트를 보니 이해가 단번에 되어서 shadcn을 주제로 블로그 글을 적어보았다Shadcn 세련된 디자인과 뛰어난 접근성을 갖춘 컴포넌트 모음, 그리고 코드 배포 플랫폼.선호하는 프레임워크와 호환되며, 오픈소스로 자유롭게 사용할 수 있습니다. shadcn/ui란 Radix UI 및 Tailwind CSS를 사용하여 구축된 복사하여 붙여 넣을 수 있는 재사용 가능한 컴포넌트의 모음이다 shadcn/ui는 기존의 컴포넌트 라이브러리(예: MUI, Chakra UI 등)와는 다른 접근 방식을 제공한다라이브러리를 설치해서 사용하는 것이 아니라, 직접 컴포넌트를 복사해서 프로젝트 안에 구성하게 된다 그래서 공식문서를 보면 컴포넌트 ..

오늘의 주제는 react hook form에 대해서 공부해 봤다 내가 프로젝트를 하는데 폼 작성하는 기능이 주를 이루는 프로젝트라이번기회에 react hook form을 사용하자고 결정하고 자세하게 배워봤다React Hook FormPerformant, flexible and extensible forms with easy-to-use validation.유효성 검사를 쉽게 할 수 있는, 성능이 우수하고 유연하며 확장 가능한 form을 제공하는 라이브러리이다. npm install react-hook-form react hook form은 React에서 폼을 쉽게 다룰 수 있도록 도와주는 라이브러리이다 여기서 폼이란 html태그중 하나인 form을 의미하는 것으로html에서 사용자가 값을 입력하고 제출할..

react에서, 2020년 12월에 server component를 소개했다 그 후 next.js에서 server component를 적극 도입 & 확장했다이에 따라 next.js에서는 client component와 server component, 2가지 형식으로 사용할 수 있다 하지만 client component는 알고 있었지만 server component는 언제 사용해야할지 몰랐다Before Server component...먼저 서버 컴포넌트가 있기전, react의 컴포넌트가 브라우저에서 어떻게 렌더링 되는지 한번 알아보자React문법으로 코드작성babel을 만나 vanilla js 코드로 변환js기반 element로 변환(vitual dom)현재 dom과 vitual dom을 비교비교 후 u..

이번에 공부한 기술은 Tanstack-Query이다 원래 React에 최적화된 fetching 라이브러리였지만Vue, Solid, Svelte 등 다양한 프레임워크까지 기능이 확장되어 React-Query라는 이름대신tanstack이라는 이름으로 다른 라이브러리와 함께 묶였다 사용방법//npmnpm install @tanstack//yarnyarn add @tanstack/react-query//pnpmpnpm add @tanstack/react-query설치 후 최상위 컴포넌트를 provider로 감싼다 내가 이번에 공부하고 사용한 기능은 useQuery와 use-mutation이다useQueryuseQuery는 서버에서 데이터를 fetch 하는 데 사용된다import { useQuery..