김기지의 코딩노트

Raycaster마우스 오버 효과를 주기 위해서는 Raycaster를 사용한다.여러 개체 중 마우스로 선택(마우스가 3d 공간의 객체 위에서 작동하는)하는 기능을 도와준다. 애니메이션 효과를 부드럽게 주기 위해 GSAP를 CDN 형식으로 불러온다.// index.html 마우스 오버 효과를 적용할 모델을 Group으로 묶어준다. (현재 외부 gltf 모델을 가져오고 있기 때문에 직접적으로 애니메이션 효과를 줄 수 없음)const objGroup = new THREE.Group();const loader = new GLTFLoader();loader.load("../../src/textures/shiba/scene.gltf", (gltf) => { const model = gltf.scene; obj..

외부 모델 파일을 다운로드 받을때 gltf 형식으로 받아야 사용할 수 있다.https://sketchfab.com/feed Log in to your Sketchfab account sketchfab.com GLTF 포맷의 모델을 로드하기 위해 GLTFLoader를 불러온다.import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; load 함수의 두번째 인자인 콜백함수는 인자로 model을 받는다.이 함수는 경로에 지정한 모델이 불러와졌을때 실행되는 콜백 함수로 gltf 파라미터를 찍어보면 scene에 모델이 들어있다.Group이 경로에 해당하는 외부 모델이다.이 모델을 가져와 scene에 추가한다.const loader = new GLTF..

🔦 LightsScene에 빛이 없는 경우 검게 보이기 때문에 어떤 Mesh가 있는지 알 수 없다.조명을 사용해 물체에 빛을 비춰준다. 1. AmbientLight(자연광)모든 Mesh를 대상으로 전역적으로 빛을 발산한다.방향성이 없기 때문에 그림자가 생기지 않는다.const ambientLight = new THREE.AmbientLight(color,intensity);scene.add(ambientLight);color: 빛의 색상intensity: 빛의 강도 2. DirectionalLight(직사광)햇빛과 같은 방향성 광원으로 모든 점에서 일정한 방향으로 광을 발산하므로 그림자가 생긴다.(기본 위치는 0, 1, 0)빛과 물체 간의 거리에 상관없이 동일한 빛의 효과를 준다.const direct..

나도 멋들어진 포폴 하나 만들고 싶다...그럼 3D 모델 하나 넣어봐Three.js웹 페이지에 3D 객체를 렌더링하도록 도와주는 자바스크립트 3D 라이브러리WebGL을 기반으로 동작하고 3D 모델링과 렌더링, 애니메이션 등을 구현할 수 있다.스크롤, 클릭, 키보드 입력 등의 이벤트를 통해 오브젝트와 인터렉션을 표현할 수 있으며, 물체의 광원, 그림자, 텍스쳐 등 여러 요소를 표현할 수 있다. WebGL은 뭔데?웹 브라우저 상에 2D 및 3D 그래픽을 표현하기 위한 자바스크립트 API로 점, 선, 삼각형만을 이용 ⚙️ 설치Three.js를 설치하는 방법은 여러가지가 있다. 1. npmnpm 명령어를 이용해 Three.js 설치# three.jsnpm install --save three# vitenpm ..

현재 진행중인 Next.js 프로젝트에서 데이터 패칭 연결 중 문제가 발생했다.각 페이지에서 공통적으로 사용해야 하는 데이터가 존재한다는 것!!!!지저분한 코드를 작성하다 상태 관리 라이브러리를 사용하기로 결정했고 이번 기회에 배워보고 싶었던 "zustand"를 선택했다. 🐾 설치하기# NPMnpm install zustand  🐾 스토어 생성하기create 함수를 사용해 스토어를 생성한다.// 공식 문서 예제import { create } from 'zustand'const useStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBea..

기존 자바스크립트로 작성된 코드를 타입스크립트로 마이그레이션을 진행했다. typescript 환경 eslint를 추가하기 위해 명령어를 입력하자 오류가 발생했다.[eslint] Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Class extends value undefined is not a constructor or nullERROR in [eslint] Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Class extends value undefined is not a constructor or null @typescript-eslint..

🐻 ZustandZustand는 React를 위한 상태 관리 라이브러리이다.Zustand는 상태 관리를 위해 React의 Context API와 함께 사용되며, Redux보다 훨씬 간단하고 직관적이다.Zustand는 상태를 관리하기 위해 React 컴포넌트 트리 내에서 사용되는 상태 컨테이너를 제공하며,useState와 useReducer를 사용하거나 더 간단한 API를 제공해 상태를 업데이트하고 구독하는 방법을 단순화한다.  Zustand의 특징1. 간결함과 유연성상태 관리를 위한 간단한 API를 제공하여 복잡한 설정이나 보일러플레이트 코드 없이 쉽게 통합할 수 있다.  2. React Hooks와의 통합React Hooks를 기반으로 한 상태 관리를 제공하여, 상태를 정의하고 사용하는 것이 매우 직..

프로젝트 4개를 하면서 ESLint와 Prettier는 항상 학원에서 하라는 대로만 사용해왔다.별 생각 없이 사용하던 나날이 계속되고 면접을 준비하면서도 이에 대한 내용은 미처 생각하지 못했다. 그래서 반성을 담아 작성하는ESLint와 Prettier에 대해 알아보기!!!!!    🌊 ESLint코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구 -> 코드 퀄리티를 보장하도록 도와준다! ESLint를 사용하면 프로젝트에서 코드를 작성하는 방식을 일관성이 있는 방식으로 구현할 수 있도록 도와준다.ESLint는 처음부터 유용하게 사용할 수 있는 스타일 가이드를 제공하지만 개발자가 자신의 스타일 가이드를 작성할 수 있다.  { "parser": "@typescript-eslint/parser..

🌴 React Query (현 TanStack Query)서버의 데이터 가져오기/업데이트, 캐싱, 에러 처리 등을 쉽게 할 수 있도록 돕는 라이브러리서버에서 가져온 값을 담는 객체, 에러가 발생했을 때 에러 정보를 담는 객체, 데이터 가져오기/업데이트 중임을 나타내는 등 각종 유틸 기능을 제공한다.동일한 요청을 동시에 여러번 해도 한번만 요청을 보내 최적화하기 때문에 비동기 작업을 좀 더 효율적이고 간단하게 처리할 수 있게 한다.   cursor에 따라 postId 변경하기http.get("/api/postRecommends", ({ request }) => { const url = new URL(request.url); // cursor의 기본값은 0 const cursor = par..

MSWMock Service Worker서비스 워커를 사용해 네트워크 호출을 가로채는 API 모킹(mocking)라이브러리백엔드 API인 척하면서 프론트엔드의 요청에 가짜 데이터를 응답한다. 요청에 대한 응답을 직접 MSW로 만들어 백엔드에서 API를 주기 전에 어떤 형식의 데이터가 들어올 것인지 미리 코드를 작성할 수 있다.따라서 백엔드 개발자와 미리 회의를 통해 데이터의 정확한 형식을 맞춰 놓는 것이 좋은 방법이다.  - MSW 세팅하기MSW 초기 세팅npx msw init public/ --savepublic폴더에 msw를 세팅한다. 강의에서는 위 코드로 실행하는데 나는 오류가 발생해서 뒤의 --save를 제외하고 입력했다.  MSW 설치npm install msw@latest --save-dev ..