Multi Developer SuHo

리액트에서 메모이제이션과 메모이제이션으로 사용되는 훅중 useMemo와 고차컴포넌트에 대해 알아보도록 하겠습니다. 📑목차1. 메모이제이션1-1. 메모이제이션이란?1-2. 왜 메모이제이션이 필요한가?1-3. 렌더링과 불필요 리렌더 개념 정리2. memo2-1. memo 란?2-2. memo 문법3. useMemo3-1. useMemo란?3-2. useMemo 문법3-3. useMemo를 언제사용할까?4. React.memo VS useMemo4-1. 이 둘의 차이점5. HOC5-1. HOC란?5-2. HOC 특징서론현대 React 애플리케이션에서 퍼포먼스 최적화의 핵심은 “불필요한 리렌더를 얼마나 줄이느냐”에 달려 있습니다. 이 글은 그 출발점인 메모이제이션의 개념을 정리하고, React가 얕은 비교와..

안녕하세요~ 저번에는 Redux로 상태관리를 했었습니다. 이번에는 Zustand라는 React 생태계에서 사용하는 상태 관리 라이브러리 입니다. Zustand가 무엇이고 이런 라이브러리를 어떻게 사용하는지 간략하게 살펴보도록 하겠습니다. 목차1. Zustand1-1. Zustand 란?1-2. Redux 등 다른 상태 라이브러리와 차이점2. 왜 Zustnad를 사용할까?2-1. 주요 장점2-2. 가벼운 러닝커브3. 설치 및 기본 사용방법3-1. npm 기준 설치 방법3-2. 간단한 카운터 예제4. Zustand의 핵심 개념4-1. Store 생성4-2. Selector 및 구독서론React로 프로젝트를 하다 보면, 컴포넌트 간 상태 공유가 점점 복잡해지는 순간이 옵니다. 이럴 때 많은 개발자들이 Redu..

Tailwind CSS에 대해 알아보도록 하겠습니다. 기존에는 styled-components 라이브러리로 스타일 구성을 작성했지만, 이번에는 Tailwind CSS가 무엇이고, 왜 사용하는지, 사용방법을 알아보는 과정을 설명드리겠습니다. 목차1. Tailwind CSS1-1. Tailwind CSS란?1-2. Utility-first 접근 방식이란?1-3. Tailwind CSS를 왜 사용할까?1-4. Tailwind CSS의 장단점1-5. Tailwind CSS 설치 방법1-6. 기본 문법과 사용 방법1-7. 반응형 디자인과 Variants 서론 현대 웹 개발에서 디자인과 스타일링은 빠른 제작 속도와 일관성을 동시에 요구합니다. 하지만 기존의 CSS나 CSS 프레임워크는 커스터마이징의 한계, 불필요한..

Next.js 에서 동적 라우팅과 중첩 라우팅에 대해 설명하도록 하겠습니다. 동적 라우팅과 중첩 라우팅이 무엇이고, 이 둘의 차이점과 어떻게 라우팅 처리를 해야하는지 살펴보도록 하겠습니다. 목차1. Next.js 라우팅 시스템 이해하기1-1. app/ 디렉토리 기반 라우팅의 기본 개념1-2. 폴더 구조가 URL 구조를 결정한다는 원리1-3. 정적 라우팅과 파일 이름 기반의 자동 라우팅 방식2. 동적 라우팅 2-1. 동적 라우팅이란?2-2. 사용 방법2-3. 활용 예시3. 중첩 라우팅3-1. 중첩 라우팅이란?3-2. 사용 방법3-3. 활용 예시서론Next.js는 React 기반의 프레임워크 중에서도 가장 빠르고 직관적인 라우팅 시스템을 제공하는데요, 특히 Next.js 13 버전이후, App Router..

Next.js 를 사용하기전 렌더링 구조를 이해해야 사용할 수 있습니다. 서버 컴포넌트와 클라이언트 컴포넌트, 프리렌더링이 무엇이고, 하이드레이션에 대한 개념을 학습해보도록 하겠습니다.목차1. Next.js 13이후 렌더링 방식 개요1-1. 서버 컴포넌트란?1-2. 서버 컴포넌트 용도1-3. 클라이언트 컴포넌트란?1-4. 클라이언트 컴포넌트 용도1-5. 서버와 클라이언트 컴포넌트의 조합2. 프리렌더링(Pre-rendering)2-1. 프리렌더링이란?2-2. 프리렌더링 동작 방식3. 하이드레이션(Hydration)3-1. 하이드레이션이란?3-2. 하이드레이션 흐름서론Next.js는 React 기반의 강력한 프레임워크로, 꾸준히 발전해오고 있습니다. 특히 Next.js 13버전부터 도입된 App Router..

안녕하세요 리액트를 학습하고 난뒤 Next.js에 대해 알아볼려고합니다. Next.js가 무엇이고, 많은 개발자분들이 왜 Next.js를 선호하는지 그 이유에 대해 알아보면서 기본 개념을 갖춰보도록 하겠습니다. 📑목차1. Next.js1-1. Next.js란?1-2. Next.js를 왜 사용해야 할까?2. Next.js의 주요 기능2-1. 파일 기반 라우팅2-2. 서버 사이드 렌더링(SSR)2-3. 정적 사이트 렌더링(SSG)2-4. 증분 정적 재생성 (ISR)2-5. API 라우트3. 설치 및 프로젝트 생성 방법서론먼저 이 글을 포스팅할때 저는 이런 생각을 하게 되었습니다. "Next.js는 무엇이고, 현대사회에서 많은 개발자분들이 선호하는 프레임워크인 Next.js를 왜 사용할까? 라는 의구심이 들..

ERC-4337(계정 추상화)에 대해 집중적으로 알아볼텐데요 먼저 userOperation에 대한 개념과 주요 필드 속성들을 통해 이해하는 시간을 가져보도록 하겠습니다. 코드보다 이론 중심으로 설명할테니 참고해주시면 됩니다! 📑목차1. userOperation1-1. userOperation이란?1-2. userOperation 구조1-3. sender1-4. nonce1-5. initCode1-6. callData1-7. callGasLimit 1-8. verificationGasLimit 1-9. preVerificationGas 1-10. maxFeePerGas 1-11. maxPriorityFeePerGas 1-12. paymasterAndData 1-13. signature서론 요즘 이더리움 ..

계정 추상화에 대해 알아보도록 하겠습니다. 📑목차1. 계정 추상화(ERC-4337)1-1. 계정 추상화란?1-2. 계정 추상화의 배경1-3. 계정 추성화의 목적과 특징1-4. 기존 트래잭션 및 서명 구조의 차이2. EIP-2771 가스 리스 대납 트랜잭션(메타 트랜잭션)2-1. EIP-2771 이란2-2. 메타 트랜잭션이란2-3. 새로운 트랜잭션 풀 생성 (UserOperation)2-4. Gas Paymaster 역할3. UserOperation3-1. UserOperation이란?3-2. EIP-2718 미래형 트랜잭션 유형과의 연계3-3. 기존 트랜잭션과의 호환성 이유 3-4. UserOps의 트랜잭션 풀 동작 방식4. Bundler4-1. Bundler란?4-2. Bundler의 다중 서명 검증..

솔리디티에서 프록시 패턴에 대해 알아보도록 하겠습니다~~📑목차1. 프록시 패턴1-1. 프록시 패턴이란?1-2. 프록시 패턴 목적1-3. 프록시 패턴 동작 과정1-4. 프록시 컨트랙트 카운터 구현1-5. fallback 함수1-6. delegatecall2. inline assembly2-1. inline assembly란?2-2. inline assembly 목적3. assembly3-1. assembly란?서론"프록시 패턴" 단어만 들었을때도 어렵게 느껴지시죠? 당연히 어려운게 맞습니다. 저도 이 내용을 이해하는데 어려움을 느꼈고, 설명이 부족한 점 양해부탁드립니다.. "패턴" 만 들어가도 이제는 감이 오시나요? 디자인 패턴중에 하나인 "프록시 패턴"을 솔리디티에서 설명해보고자 합니다.본론1. 프록..

안녕하세요~ 이번에 알아볼 내용은 DAO와 팩토리 패턴등 다양한 패턴들을 알아보겠습니다.📑목차1. DAO1-1. DAO란?1-2. DAO의 등장배경1-3. DAO의 특징1-4. DAO의 진행2. The DAO 사건2-1. The DAO 사건이란?2-2. The DAO 사건의 취약점3. Checks-effects-interactions 패턴3-1. Checks-effects-interactions 패턴이란?3-2. Checks-effects-interactions 패턴 예시 코드3-3. Checks-effects-interactions 목적4. 뮤택스 패턴4-1. 뮤택스 패턴이란?4-2. 뮤택스 패턴 예시 코드5. 조건 논리 제어자5-1. modifier5-2. modifier 사용 코드6. 팩토리 패턴..