개발 블로그

Tailwind CSS 활용 - Clxs

clsx 라이브러리clsx는 조건부로 className 문자열을 생성하는 작은(239B) 유틸리티입니다.기존 classnames 라이브러리보다 더 작고 빠르며, 같은 기능을 제공하는 대체제입니다.    설치 및 사용법 [ 설치 ]npm install --save clsx   [ 사용법 ] ✅ 기본 사용법 (문자열 조합)import clsx from 'clsx';// 여러 개의 class를 조건부로 추가clsx('foo', true && 'bar', 'baz'); // 결과: 'foo bar baz'  ✅ 객체를 이용한 class 조건 추가clsx({ foo: true, bar: false, baz: true });// 결과: 'foo baz' (false 값은 무시됨)   ✅ 배열을 사용한 class 조..

Package Manager : 패키지 매니저는 패키지를 설치, 업데이트, 수정, 삭제하는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴입니다.   패키지는 코드의 배포를 위해 사용되는 코드의 묶음으로 다음 3가지 정보를 가지고 있는 코드의 배포 단위입니다.컴파일한 소프트웨어의 binary환경 설정 configuration에 관련된 정보의존 dependency 에 관련된 정보 JavaScript의 package manager로는 대표적으로 npm, pnpm, yarn이 있습니다.Yarn Plug'n'Play는 Yarn의 최신 releases의 기본 설치 전략입니다.기존의 node_modules 설치 또는 pnpm 스타일의 symlink-based 기반 방식등으로 대체할 수도 있지만,많은 개선 사항으..

Supabase는 오픈 소스 서비스로, Firebase의 대안으로 사용할 수 있는 serverless DB 솔루션 입니다.PostgreSQL을 DB engine으로 사용하고 있어 복잡한 쿼리 작업도 용이하게 사용할 수 있습니다.   주요 기능실시간 데이터베이스 (Real-time Database)PostgreSQL의 데이터 변경 사항(삽입, 수정, 삭제 등)을 실시간으로 감지하여 클라이언트에 전달합니다.실시간 기능은 웹소켓(WebSocket)을 통해 동작합니다.인증(Authentication)사용자 등록, 로그인, 소셜 로그인(Google, Facebook 등) 같은 인증 기능을 지원합니다.Role-Based Access Control(RBAC) 및 JWT 토큰 기반 인증 제공.스토리지(Storage)파..

useOptimistic (state, updateFn): 사용자가 폼을 제출할 때(네트워크 요청과 같은 백그라운드 작업이 완료되기 전),  서버의 응답을 기다리는 대신 UI를 기대하는 결과로 즉시 업데이트하여 유저에게 보여주고 싶을 때 사용한다.   const [optimisticState, addOptimistic] = useOptimistic(state, updateFn);  useOptimistic은 비동기 작업이 진행 중일 때 다른 상태를 보여줄 수 있게 해주는 React hook입니다.현재 상태와 작업의 입력을 취하는 함수를 제공하고, 작업이 대기 중일 때 사용할 상태를 반환합니다. 이 상태는 “낙관적” 상태라고 불리는데, 실제로 작업을 완료하는 데 시간이 걸리더라도사용자에게 즉시 작업의 결..

useRef useRef는 useState와 동일하게 컴포넌트 내부에서 렌더링이 일어나도 변경 가능한 상태값을 저장할 수 있습니다.하지만 useState와 구별되는 큰 차이점이 있습니다.useRef는 반환값인 객체 내부에 있는 current로 값에 접근 또는 변경할 수 있다.useRef는 그 값이 변하더라도 렌더링을 발생시키지 않는다. 렌더링에 영향을 미치지 않는 고정값을 관리하기 위해서 useRef를 사용한다면,그냥 함수 외부에서 값을 선언하여 관리해도 되지않을까? 생각이 들 수 있습니다.let value = 0;const Component = ()=> { const handleClick = ()=> { value += 1 }} 이와 같은 방식의 단점은렌더링 되기 전부터 value라는 값이..

React의 대표 hooks - useState 리액트 함수 컴포넌트에서 가장 중요한 개념은 바로 훅입니다.훅은 클래스 컴포넌트에서만 가능했던 state, ref등의 리액트의 핵심적인 기능을 함수에서도 가능하게 만들었고,무엇보다 클래스 컴포넌트보다 간결하게 작성할 수 있어 훅이 등장한 이후로 대부분의 React 코드는 함수 컴포넌트로 작성되고 있습니다.이러한 hook중 가장 대표적인 useState에 대해서 상세하게 알아보려합니다.      1. useState는 Closure를 통해 상태관리를 한다. React의 가장 기본적인 훅은 당연 useState 일것입니다.useState는 함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅입니다.  만약 useState를 사용하지 않..

리액트 렌더링렌더링이란 단어는 많이 듣고 사용하지만, 명확히 개념을 설명하기는 어려워 정리를 해보려고합니다.브라우저에서의 렌더링은 HTML과 CSS리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정을 말하고,리엑트에서의 렌더링은 브라우저의 렌더링에 필요한 DOM tree를 만드는 과정을 말합니다.좀 더 상세하게 말하자면 React application tree안에있는 모든 컴포넌트들이 자신의 props와 state를 가지고어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정을 말합니다.    re-rendering 리엑트에서 렌더링은 유저가 처음 application에 진입하면 최초 렌더링이 발생합니다. (root component 호출)import Imag..

리엑트의 생명주기 / 라이프 사이클생명주기 메서드가 실행되는 시점은 크게 3가지로 나눌 수 있습니다. mount : 컴포넌트가 마운팅(생성)되는 시점update : 이미 생성된 컴포넌트의 내용이 변경(업데이트)되는 시점unmount : 컴포넌트가 더 이상 존재하지 않는 시점    1. class component의 Life cycle  render()render는 React Class Component의 유일한 필수값으로 쓰입니다.이 함수는 컴포넌트가 UI를 렌더링하기 위해서 쓰이고, mount와 update 과정에서 일어납니다. render() 함수는 항상 순수해야하며, 부수 효과가 없어야 한다는 것이 특징입니다. (no side effects)순수해야 한다는 것은 입력값이 있으면 항상 똑같은 결과물을..

Next.js Caching 참고) unstable_cache는 archive 되었고 이를 대신하는 실험중인 기능입니다. This API is currently experimental and subject to change. use cache는 캐시할 컴포넌트, 함수 또는 파일을 지정합니다. 파일 상단에 사용하여 파일의 모든 함수를 캐시할 수 있음을 나타내거나 함수 상단에 인라인으로 사용하여 함수를 캐시할 수 있는 것으로 표시할 수 있습니다. 이것은 실험적인 Next.js 기능이며, use client나 use server와 같은 native React 기능이 아닙니다.   Next.config.ts 파일에서 dynamicIO 플래그를 사용하여 use cache 지시어에 대한 지원을 활성화할 수 있습니다..

Virtual DOM  가상돔  React의 대표적인 특징 중의 하나는 virtual DOM이 있다는 것입니다.가상 DOM을 이해하기에 앞서 DOM과 browser의 rendering과정부터 알아야 합니다. DOM (Document Object Model) : HTML 문서 구조를 계층구조의 객체로 표현HTML로 구성된 웹 페이지와 프로그래밍 언어(ex. JavaScript)를 연결시켜 주는 역할  브라우저의 렌더링과정은 아래와 같습니다.브라우저가 사용자가 요청한 주소를 방문해 HTML파일을 다운로드한다.서버로부터 html 문서를 전달받으면, 브라우저 엔진은 위에서 아래로 순차적으로 파싱 하며 태그와 속성들을 DOM tree형태로 메모리에 저장한다.2번 과정에서 css 링크나 스타일 태그를 만나면 CSS..