전체 글97 [Next.js,TS,Three] 나의 3D캐릭터Three.js에 표출하기 - 개인기록 목차 사전 작업https://www.youtube.com/watch?v=1ZDjzJm3vPY&t=182s프로필용 캐릭터를만드는 방법은 위 유튜브에 적혀있다.언급된건 4개지만 사용하는건 PPM을제외한 아래 3개 사이트이다.Profile Pic Maker ⇢ https://pfpmaker.com/Ready Player Me ⇢ https://readyplayer.me/Blender ⇢ https://www.blender.org/download/Mixamo ⇢ https://www.mixamo.com/#/아바타 만들기위 유튜브를 참고해서 위 링크중 Ready Player Me 에서 아바타를 만들어서 .glb 형식으로 다운로드 해준다. Blender 다루기당시 blender 최신버전인 4.1버전을 다운로드하.. 2024. 5. 28. [React,TS]React.lazy와 Suspense로 코드 스플리팅 구현하기 목차 개요현대 웹 애플리케이션은 점점 더 복잡해지고, 초기 로딩 시간을 줄이는 것은 사용자 경험을 향상시키는 중요한 요소이다.React에서는 'React.lazy'와 'Suspense'를 통해 코드 스플리팅을 쉽게 구현할 수 있는 방법을 제공한다.이번 글에서는 'React.lazy'와 'Suspense'를 사용하여 동적 컴포넌트를 로드하는 방법을 알아보려고 한다. 코드 스플리팅이란?코드 스플리팅은 애플리케이션을 여러 개의 작은 청크(chunk)로 나누어, 필요한 순간에 해당 청크를 로드하는 기술이다.이를 통해 초기 로딩 시간을 줄이고, 사용자가 필요한 기능을 사용할 때만 관련 코드를 로드하여 성능을 최적화 할 수 있다. React.lazy'React.lazy'는 React에서 컴포넌트를 동적으로 임포.. 2024. 5. 28. [React,TS] 라우팅 코드 컨벤션 목차 라우팅 코드 컨벤션이 왜 필요한가?Next.js와 다르게 React는 라우팅을 직접 지정해줘야한다. 그래서 효율적인 코드 컨벤션으로 관리가 되면 좋기때문에 글을 남기려고 한다. 사용 버전"dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.97", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "eslint": "^8.57.. 2024. 5. 28. [React,TS] React프로젝트 TS세팅 하기 목차 설치 명령어npx create-react-app my-app --template typescript 2024. 5. 28. [React,TS] airbnb eslint prettier적용 목차 React + TS에서 airbnb형식 적용하기 설치방법npm install --save-dev eslint prettier eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import .eslintrc.json{ "extends": [ "airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "pl.. 2024. 5. 28. [React,Next] forwardRef사용하기 ( 개인기록 ) 목차 forwardRef는 무엇인가?'forwardRef'는 React에서 부모 컴포넌트가 자식 컴포넌트의 DOM 요소 또는 클래스 인스턴스에 'ref'를 전달할 수 있도록 해주는 고차 함수이다. 기본적으로 'ref'는 부모 컴포넌트가 자식 컴포넌트의 특정 DOM 요소에 접근할 수 있게 한다.하지만 일반적인 컴포넌트에서는 'ref'를 직접 전달할 수 없기 때문에 'forwardRef'를 사용하여 문제를 해결해야한다. 왜 'forwardRef'를 사용해야 하는가?React컴포넌트는 기본적으로 'ref'를 직접 전달받을 수 없다. 하지만 'forwaredRef'를 사용하면 부모 컴포넌트가 자식 컴포넌트의 특정 DOM 요소에 접근할 수 있게 된다. 이는 다음과 같은 경우에 유용하다.DOM 조작 : 특정 D.. 2024. 5. 27. [Next.js]웹 페이지 전환 효과를 주는 방법들 목차 웹 페이지 전환 효과를 주는 것들은 무엇이 있을까?Next.js에서 페이지 전환 효과를 구현하는 방법에는 여러 가지가 있다. 아래는 몇가지 대표적인 방법이다. Framer MotionFramer Motion은 React 애니메이션 라이브러리로, Next.js에서 페이지 전환 효과를 쉽게 구현할 수 있다.`AnimatePresence`와 `motion.div`를 사용하여 페이지 전환 애니메이션을 적용할 수 있다.// components/PageTransition.tsx'use client';import { usePathname } from 'next/navigation';import { AnimatePresence, motion } from 'framer-motion';import React from.. 2024. 5. 24. [Next.js]Next.js에서 framer-motion을 이용한 페이지 전환효과 추가하기 목차 framer-motion이란?https://github.com/framer/motion GitHub - framer/motion: Open source, production-ready animation and gesture library for ReactOpen source, production-ready animation and gesture library for React - framer/motiongithub.comFramer Motion은 React 애니메이션 라이브러리로, Next.js에서 페이지 전환 효과를 쉽게 구현할 수 있다.AnimatePresence와 motion.div를 사용하여 페이지 전환 애니메이션을 적용할 수 있다. 설치방법npm install framer-motion.. 2024. 5. 24. [Next.js, React] useState, useEffect 코드 컨벤션 목차 useState 상태 변수와 설정 함수의 명명상태 변수와 설정 함수는 의미 있는 이름을 사용한다.상태 변수는 단수형 명사, 설정 함수는 `set` 접두사를 사용한다.예 `const [count, setCount] = useState(0);`초기 값 설정상태 변수의 초기 값은 올바른 타입을 사용하여 명확하게 설정한다.예: `const [name, setName] = useState('');`상태 초기화 함수초기 상태를 계산하는 데 복잡한 로직이 필요하면 상태 초기화 함수를 사용한다.예: `const [value, setValue] = useState(() => computeInitialValue());`상태 그룹화관련된 상태 값은 객체로 그룹화하여 관리한다.const [formState, setFor.. 2024. 5. 23. TSX에서의 코드 컨벤션 목차 파일 및 폴더구조폴더 구조 : 컴포넌트는 기능별 또는 도메인 별로 폴더를 구성한다.src/ components/ Header/ Header.tsx Header.styles.ts Header.test.tsx Button/ Button.tsx Button.styles.ts Button.test.tsx pages/ Home/ Home.tsx Home.styles.ts Home.test.tsx 네이밍 컨벤션 파일명컴포넌트 파일은 PascalCase를 사용한다.`Header.tsx`, `Button.tsx`컴포넌트 명컴포넌트 이름도 PascalCase를 사용한다.`const MyComponent: Rea.. 2024. 5. 23. 이전 1 2 3 4 5 6 7 8 ··· 10 다음
