Profile
Three.js practice
Chocobe
FE Blog
jest
"node:fs" 테스트 하기
작성일:
node 모듈중 File System 기능, "fs" 를 테스트하는 방법에 대해 정리합니다.
Read More
All Categories
Javascript
Javascript 에 대한 보강할 부분들을 정리합니다.
React
React 를 사용하며 마주친 이슈나 생각을 정리하고자 합니다.
Nextjs
SSR 과 CSR 을 자유롭게 사용할 수 있는 Nextjs 에 대한 정리입니다.
Jest
Jest 를 사용한 유닛 테스트 관련 정리입니다.
Three.js
3D 웹페이지 개발을 위한 Three.js 스터디 포스팅 입니다.
LLMOps
LLMOps 를 통해 AI 와 가까워지기 위한 정리입니다.
Monrepo
Monroepo 에 대한 정리입니다.
All Blog Posts
javascript
AWS S3 를 사용한 PDF 뷰어 구현시, Metadata 설정
작성일:
AWS S3 에 업로드한 PDF 파일이 렌더링되지 않고 다운로드 되는 이슈에 대한 정리 입니다.
Read More
javascript
구조 분해 할당의 기본값 지정, null 은 사용 불가!
작성일:
구조 분해 할당의 기본값 설정은 Nullish(undefined 와 null) 가 아닌, 오직 undefined 일 때만 적용됩니다.
Read More
jest
"jest.fn()" 으로 함수 테스트하기
작성일:
컴포넌트 props 로 넘겨주는 함수를 테스트하는 방법으로 "jest.fn()" 사용방법에 대한 정리 입니다.
Read More
jest
"styled-components" 로 구현한 컴포넌트 테스트하기
작성일:
"styled-components" 를 사용한 컴포넌트를 테스트하기 위한 환경설정에 대해 알아봅니다.
Read More
jest
Nextjs 의 useRouter mock 정의하기
작성일:
Nextjs 의 useRouter 를 사용하는 컴포넌트를 테스트하기 위한 방법을 정리합니다.
Read More
llmops
LLMOps 와 친해지기 1 - 용어 정리
작성일:
AI 학습 모델인 Large Language Model 에 대한 정리입니다.
Read More
monorepo
Yarn workspace 를 사용하여 Monorepo 구성하기
작성일:
Monorepo 에 대한 정리와 Yarn workspace 를 사용하여 Monorepo 를 구성합니다.
Read More
nextjs
.DS_Store not found 에러
작성일:
Nextjs 빌드 시, .DS_Store 파일을 찾을 수 없다는 에러를 마주하게 되었습니다.
Read More
nextjs
Nextjs 프로젝트의 유닛 테스트
작성일:
유닛 테스트를 위해 Jest 와 @testing-library 설치 및 설정에 대한 정리 입니다.
Read More
react
Custom Hook 으로 분리하며 발생한 실수
작성일:
Custom Hook 으로 분리한 useEffect 가 여러번 호출 케이스 중 한가지를 정리합니다.
Read More
threejs
Particle 좌표를 사용한 애니메이션 구현
작성일:
각 Particle 의 좌표값을 변경하여, 흘러가는 애니메이션을 만드는 방법을 정리하고자 합니다.
Read More
threejs
Particle 로 반딧불이 표현하기
작성일:
3D 환경에서 반딧불이나 별을 표현할 때 Particle 을 활용합니다. 매우 많은 입자들로 표현하는 Particle 을 어떻게 구현하는지 정리하고자 합니다.
Read More
threejs
Material 의 map, bumpMap, normalMap
작성일:
Material 의 표현 방식과 울퉁불퉁한 재질을 처리하는 방식을 정리합니다.
Read More
threejs
click 이벤트에 animation 연동하기
작성일:
특정 버튼을 click 했을 때 animation 을 실행하는 방법을 정리합니다.
Read More
threejs
Model 에 Click Event 적용하기 (추가: ToneMapping, light.shadow.camera)
작성일:
Canvas 에 렌더링된 Model 에 Click 인터렉션을 적용 해봅니다.
Read More
threejs
(Issue) 조명이 어둡게 보이는 현상
작성일:
강좌의 결과물에 비해 실습 결과물의 밝기가 어둡게 렌더링되는 현상이 발생하였습니다. 현상 원인과 해결 방법에 대해 정리하고자 합니다.
Read More
threejs
키보드를 사용하여 카메라 이동 인터렉션 만들기
작성일:
키보드 입력에 대한 event listener 를 사용하여 카메라를 이동할 수 있는 인터렉션을 구현해 봅니다.
Read More
threejs
canvas 크기 설정 및 material 렌더링 side 설정
작성일:
사용자 모니터 대응을 위한 WebGLRenderer 설정과 material 의 렌더링 side 설정에 대해 정리합니다.
Read More
threejs
Model 에 Animation 효과 적용하기
작성일:
Model 파일인 .gltf, .glb 에 Animation 을 적용하는 방법에 대해 정리합니다.
Read More
threejs
Model (.gltf, .glb) 객체 구조파악 및 그림자 적용
작성일:
Three.js 환경에 불러온 Model 객체의 주요 구성요소를 파악하고, 속성값을 변경하여 그림자를 만들어 봅니다.
Read More
threejs
모델 파일을 Three.js 에 렌더링하기
작성일:
.gltf 또는 .glb 확장자인 모델 파일을 Three.js 에 불러오고 렌더링하는 방법을 정리합니다.
Read More
threejs
배경화면 및 환경조명 설정하기
작성일:
360도 이미지 확장자인 .hdr 파일을 사용하여 배경화면을 설정하고, 배경화면에 의한 환경조명 설정에 대한 정리입니다.
Read More
threejs
그림자 표현하기
작성일:
그림자 설정방법과 특징에 대해 정리합니다.
Read More
threejs
평평한 바닥(땅) 만들기 (Plane Mesh)
작성일:
바닥을 표현하기 위해 Plane Mesh 를 생성합니다.
Read More
threejs
조명 종류와 설정
작성일:
조명 종류와 설정 방법에 대해 정리합니다.
Read More
threejs
카메라 설정 (PerspectiveCamera)
작성일:
Three.js 의 카메라인 PerspectiveCamera 설정에 대한 포스팅입니다.
Read More
threejs
Three.js 설치 및 실행
작성일:
Three.js 를 사용하기 위한 설치와 첫번째 화면을 그려봅니다.
Read More