FrontEnd 이상혁

이제까지는 약간 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데이터 가져오기윈도우 크기감지페이지 스크롤 추적로컬 스..

React의 SPA(Single Page Application) 특성상 페이지를 하나의 페이지에 전부 담고 필요할 때 동적으로 화면을 바꿔가며 보여준다 React-Router-Dom은 이런 페이지 전환을 빠르고 부드럽게 하기 위해 사용한다React-Router-Dom그냥 a태그 쓰지 왜 이런 거 쓰냐고 할 수 있지만a태그를 쓰면 전환될 때 깜빡이며 전환이 된다 이렇게 깜빡이는 현상을 개선하고자 routing을 한다 Router의 종류Hash Routerurl에 해쉬(#) 값을 이용하는 라우터주소에 # 이 붙는다검색엔진이 읽지를 못한다별도의 서버 설정을 하지 않더라도 새로고침 시 오류가 발생하지 않는다. 이는 해시 라우터가 해쉬(#) 뒤의 값은 브라우저에서만 관리하고(라우팅 하는 사실을 서버가 모름) 서버..

내가 FrontEnd공부를 하면서 "프런트엔드 좀 한다!" 하는 놈들 특징이뭔가 이상한 것들을 쓴다.React, Ajax, TypeScript등등그중에서 가장 많이 들리는 건 React이다 아니 javascript로도 충분히 나의 정보를 표현할 수 있는데 굳이 번거로운 라이브러리를 사용하는 이유가 뭘까? 오늘은 React에 관한 글이다 React가 뭔데?React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.  React는 facebook에서 제공해 주는 프런트엔드 라이브러리라고 볼 수 있습니다.싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다. 즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는..