Autumnn Dev

포트폴리오 사이트를 업데이트하던 중 3D 그래픽적인 요소를 넣으면 좋을 것 같다는 생각이 들었다.먼저 간단한 도형을 구현하는 것부터 시작해보자 1. 프로젝트 설정 및 기본 코드먼저 three.js를 React와 TypeScript 환경에서 사용하는 기본적인 방법을 알아보자. TypeScript에서는 three.js의 객체에 적절한 타입을 설정해줘야 한다. useRef와 useEffect 훅을 사용해 three.js 객체를 안전하게 다룰 수 있다.프로젝트 설치프로젝트를 시작하려면 three.js와 react-three-fiber 패키지를 설치해야 한다.다음 명령어를 터미널에 입력하여 설치하자:npm install three @react-three/fiber이 명령어는 three.js와 react-three..

더보기React는 선언적 UI 개발을 위한 강력한 도구를 제공하며, 그 중 핵심적인 역할을 하는 것이 바로 Hook입니다. Hook은 상태와 사이드 이펙트를 관리하는 기능을 제공하며, 함수형 컴포넌트에서 이러한 기능을 사용할 수 있게 해줍니다. 1. Hook의 규칙React에서 Hook을 사용할 때는 몇 가지 규칙이 있습니다. 이 규칙들을 잘 이해하고 따르면, React 애플리케이션을 더욱 효율적으로 작성할 수 있습니다.1.1. 최상위 레벨에서만 호출Hook은 컴포넌트 함수의 최상위 레벨에서만 호출해야 합니다. 조건문이나 반복문, 중첩된 함수 안에서는 호출할 수 없습니다. 이 규칙을 지키는 이유는 React가 Hook의 호출 순서를 추적하기 위함입니다.1.2. 리액트 함수 컴포넌트에서만 사용Hook은 리..

아직도 나에겐 많이 어려운 리액트..공부해도 끝이 없는 것 같다..  컴포넌트 생명주기마운트(DOM에 추가) -> 업데이트(새로운 props/state) -> 언마운트(DOM에서 제거)리액트16 +) 에러(에러 발생 시 실행)  라이프 사이클 이벤트 실행 순서constructor()를 포함한 라이프 사이클 실행 순서는 아래와 같다.constructor() : 엘리먼트를 생성하여 기본 state와 prop을 설정할 때 실행된다.componentWillMount() : 컴포넌트를 DOM에 삽입하기 전 실행render()componentDidMount() : DOM에 삽입되어 렌더링이 완료된 후 실행componentWillReceiveProps(nextProps) : 컴포넌트가 props를 받기 직전 실행sh..

javascript가 아닌 타입스크립트로 포트폴리오 웹을 제작하던 중 라이브러리를 사용하려고 했으나, 에러가 났다. 해당 라이브러리는 타입스크립트를 지원하지 않아 나타나는 에러였는데, 구글링해보니 node_modules 안에 파일을 만들어 declare한다고 하는데 파일이 잘 보이지 않아서 더 간단해보이는 다른 방법을 이용했다. 다른 방법으로는 react-app-env.d.ts에 declare module "react-fullpage";을 추가해주면 됐는데, 나의 경우는 vite를 사용했기 때문에 vite-env.d.ts 파일에 해당 코드를 추가해줬다. 이게 코드 한 줄만 넣은거라 될까 했는데 되네..?