FrontEnd 이상혁

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): 여러 파일을 하나로 결합 번들이란 말그대로 여러 파일을 하나로 결합한 덩어리다 우리가 만든 애플리캐이션의 여러 파일들을 하나로 묶어 파일 요청 수를 줄이고, 브라우저가 아닌 환경에서 개발된 코드를 브라우저가 이해할 수 있는 형태로 변환하며, 최신 자바스크립트 문법이나 모듈화된 코드를 사용할 수 있게 해준다번들러의 등장 배경초기의..

이제까지는 약간 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..

내가 프로젝트의 기능 중 하나가 모집글을 올리는 것인데 그걸 마크다운을 활용하여 올리게 하자고 의견이 나왔다React-Markdownreact-markdown은 react에서 마크다운 문법을 렌더링 할 수 있게 만드는 React의 라이브러리다 Markdown 형식으로 작성된 텍스트를 HTML로 변환하고, React 컴포넌트로 렌더링 할 수 있도록 해준다그리고 우리는 추가적으로 rehype-raw도 활용해 볼 것이다npm install react-markdown rehype-raw 사용하는 방법은 태그로 안의 요소를 묶어주면 된다 그래서 간단하게 입출력 코드를 작성해 보면import React, { useState } from "react";import ReactMarkdown from "react-ma..

내가 이 글을 작성할 때 그냥 좀 많이 해탈해 있었다 그 상태에서 TIL뭐적을지 고민하다가 문뜩 친구가 적은 vitual dom관련 블로그를 기억해 냈다- 실제 DOM이 아닌 JS 객체 형태로 메모리에 저장되어 있다 자 생각을 해보자※JS 객체  JS객체니까  console.log든 뭐든 해서 출력할 수 있지 않을까? 그래서 해봤다import React, { useState } from "react";const App = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; const element = ( Count: {count} Count 증..

우리가 웹페이지를 사용할 때 브라우저 창에는 웹페이지의 이름이 출력된다 그러나 페이지가 이동됨에 따라바뀌기도 한다React HelmetReact Helmet은 React 애플리케이션에서 HTML import { Routes, Route } from "react-router-dom";import Select from "./pages/Select";import Home from "./pages/Home";import Basic from "./pages/Basic";import { Helmet } from "react-helmet";function App() { return ( React-Helmet } /> } />..

우리는 함수형 컴포넌트에서의 생태와 생명주기 관련 기능을 사용하기 위해서 hook을 사용한다 useState나 useEffect 등이 대표적인데우리가 api와 통신할 때마다 이런 훅들을 사용하면 코드가 길어지고 가독성도 떨어지고 같거나 비슷한 로직이 반복되어 작성이 됩니다 이러한 과정을 줄이기 위해 커스텀 훅을 사용한다Custom Hook 커스텀 훅(Custom Hook)은 React에서 기존 훅(Hook)들의기능을 조합하거나 확장하여 반복적으로사용할 수 있는 코드를 모듈화 한 기능입니다 쉽게 말해, 컴포넌트 로직을 재사용하기 위해 사용하는 함수이다왜 사용할까?위에서 설명한 것처럼 반복되는 로직을 줄이기 위해서 사용한다 여기서 반복되는 로직이란 api데이터 가져오기윈도우 크기감지페이지 스크롤 추적로컬 스..