김기지의 코딩노트

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 ..

2025년 정기 기사 1회 정보처리기사 필기를 보고 왔다. 공부기간은 대략 1달?전부터 조금씩 강의를 들어가면서 이론만 정리했다. 본인=비전공자이지만 프론트엔드 국비 이전에 풀스택 강의(파이썬 찍먹)를 들은 적은 있음 + 최근 프로젝트에 데이터베이스(Supabase)연동 등으로 쌩 노베이스는 아님 강의는 이기적 절대족보 강의를 듣고 핵심 요약서는 시나공 홈페이지에 올라온 파일만 봤는데(시나공 강의는 너무 많아서 절대족보 강의로 갈아탐) 두 개를 비교하면서 거를건 거르고 가져갈 것만 구분할 수 있어서 오히려 좋았음! 시험 이틀 전에 후기를 보니까 5과목에서 신유형 문제가 저엉---말 많이 출제되었다고 해서 걱정을 많이 했는데내가 푼 문제 중에서는 1, 2과목에서 오히려 신유형이 몰빵되있는 느낌,,,(나한테..

사용자 페이지에 접속 시 사용자가 작성한 Comments와 좋아요를 누른 Liked Place를 표시한다.각각의 데이터는 모두 페이지네이션을 사용해 표시했다. Comments 페이지네이션comments 데이터를 가져올 때 offset(from)에서 시작해 offset(from+to)에서 끝나는 방식으로 쿼리 결과를 제한한다.from및 to 값은 0부터 시작하며 이 범위 내의 레코드만 반환한다.이때 쿼리 순서를 존중하며 order 절이 없으면 범위가 예상치 못하게 동작할 수 있다.export const getCommentsById = async(user_id:string,page:number=1, pageSize:number = 10)=>{ const supabase =await createServ..

Supabase에서 사용자 인증을구현하는 방식에는 2가지가 있다.Implicit flow브라우저 단에서 로그인을 진행 → 서버가 필요 없음(supabase가 역할을 대신해주기 때문)클라이언트 안에 액세스 토큰과 리프레시 토큰을 보관하기 때문에 한계점이 존재!!(보안상 이슈 등) PKCE flowimplicit flow의 한계점을 극복하기 위해 도입된 인증 방법Authorization Code Flow를 사용할 때 코드 교환 과정의 보안을 강화하기 위해 OAuth 2.1에서 필수적으로 사용하도록 지정되어 있음 프로젝트에서 Supabase Auth의 구글과 카카오 provider를 사용해 소셜 로그인을 구현했다.// supabase/clientexport const createSupabaseBrowserCl..

현재 진행중인 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..

http 패키지를 사용해 API 호출한다. 🐾 http 패키지 설치하기pub.dev ⇦ Node.js의 npm과 비슷한 Dart, Flutter 공식 패키지 보관소https://pub.dev/ The official repository for Dart and Flutter packages.Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.pub.devhttp를 검색한 후 설치한다. 설치 방법 중 pubspec.yaml파일에 코드를 작성하는 방법을 사용했다.pubspec.yaml프로젝트에 대한 설정을 하는..