괴발개발 성장기

자바스크립트 프로젝트의 테스트 프레임워크를 선택할 때, Jest는 오랫동안 부동의 표준이었습니다. 하지만 최근 Vite의 부상과 함께 등장한 Vitest가 빠른 속도와 간편한 설정으로 개발자들의 주목을 받으며 강력한 경쟁자로 떠오르고 있습니다. 두 프레임워크의 주요 차이점을 비교하여 어떤 상황에 어느 것을 선택하는 것이 유리한지 알아보겠습니다. 핵심 차이점 요약 ## 속도와 성능: Vitest의 압도적인 우위 Vitest의 가장 큰 장점은 압도적인 속도입니다. 이는 Vite 개발 서버를 그대로 활용하여 Vite 개발 서버를 그대로 활용하여 **네이티브 ES 모듈(ESM)**을 사용하기 때문입니다. Jest가 테스트를 실행하기 전에 코드를 Babel로 변환하는 과정을 거치는 것과 달리, Vitest는 ..

# 배경다른 서비스는 로컬에 다 돌아갔다. 하지만 1개의 서비스만 run를 하면 종료가 됐다.근데 이게 맥이 업데이트해서 변경이 되어서 다시 작성한다. # 에러 메시지listen tcp :7000: bind: address already in use # 원인맥북에서 이미 7000 포트를 사용하고 있어서 run을 할 때마다 바로 꺼지는 거였다.  # 해결방법1)  시스템 환경설정 - 일반을 들어간다.2) AirDrop 및 Handoff에 들어간다.3)  AirPlay 수신 모드를 비활성화한다.  해결방법 끝!

# 배경깃허브에 있는걸 깃랩으로 옮기면서 기존에 있는 곳에서 연결을 끊고 싶었다  # 리모트 확인하기git remote -v 리모트명을 확인할 수 있다. # 삭제 방법git remote rm [리모트명] 예시로리모트명이 origin이면git remote rm origin 제거한 후에 리모트 확인을 하면 나타나지 않는다. 그럼 리모트 연결이 삭제 된 것이다.

배경실무에서 적용할 때에는 클릭을 하면 무언가가 나오게 해야 효과적이라고 생각이 들었다.그래서 이벤트를 적용시켜봤다. 상황구를 클릭하면 육면체로 변경하고육면체를 클릭하면 구로 변경된다. const Sphere = ({onClick}) => { return ( );};  - Sphere 컴포넌트에 onClick이라는 props를 받아들입니다.- Sphere 컴포넌트는 핑크색 육면체이다. const Circle = ({ onClick }) => { const circleRef = useRef(); ..

배경 지구는 도니까 3D 물체도 움직이게 만들고 싶었다. 고양이가 아니라 구형을 자동으로 돌려보자! 저번에 만들어 놓은 Circle 함수에 움직일 수 있게 코드를 넣어보자 2024.03.10 - [Study/React] - [Three.js] 캔버스안에 구형(공모양)을 3D로 만들어보자 [Three.js] 캔버스안에 구형(공모양)을 3D로 만들어보자 # 이전글 2024.02.21 - [Study/자바스크립트] - [Three.js] 캔버스안에 구형(공모양)을 넣어 보자 [Three.js] 캔버스안에 구형(공모양)을 넣어 보자 # 배경 회사 스터디로 진행을 하게 되었다. 동료가 Three.js를 pink1016.tistory.com 전체 코드 const Circle = () => { const circle..

# 배경 Three.js 를 공부하다가 느낀 건데 디자인을 많이 생각해야한다는 것을 느꼈다. 백엔드 개발자인 내가 3D 모델을 만드는게 의미가 있나라는 생각이 들었다. 만약 내가 Three.js 사용한다면 디자이너가 만들어 준 3D 모델에 이벤트를 넣어주는 것이 내가 해야할 역할이라고 생각했다. # 3D 모델 가져오는 방법 1) 아래 사이트를 가서 회원가입 후에 로그인 한다. https://sketchfab.com/ Sketchfab - The best 3D viewer on the web With a community of over one million creators, we are the world’s largest platform to publish, share, and discover 3D con..

3D 물체를 마우스로 움직이게 할 수 있다. 그걸 하기 위해서 코드를 작성해봤다. 이 코드를 넣으면 마우스나 터치 입력을 사용하여 3D를 자유롭게 회전하고 이동할 수 있습니다. # 코드 const Sphere = () => { return ( ); }; 코드를 작성하면 아래 동영상처럼 3D 물체가 자유롭게 움직인다. # 참조 이슈 https://github.com/YooGenie/react-study/issues/47 3D 물체를 마우스로 움직이게 한다 · Issue #47 · YooGenie/react-study github.com

# 배경 지난 번에는 구형을 만들어봤다. 조금 아쉬워서 정육면체 만들어 봤다. # 정육면체 만들기 const Sphere = () => { return ( ); }; 위에 코드를 캔버스에 넣으면 const Model = () => { return ( ); }; 아래 그림처럼 나타난다. 정육면체를 만들었습니다. 그럼 직육면체도 만들수 있습니다. # 직육면체를 만든 방법 x, y, z 축이다. 숫자만 다르게 해주면 직육면체가 된다. 다음에는 마우스으로 3D 물체를 움직이게 만드는 방법을 해보겠습니다.

# 이전글 2024.02.21 - [Study/자바스크립트] - [Three.js] 캔버스안에 구형(공모양)을 넣어 보자 [Three.js] 캔버스안에 구형(공모양)을 넣어 보자 # 배경 회사 스터디로 진행을 하게 되었다. 동료가 Three.js를 제안했다. 이때 Three.js 기술을 처음 알았다. 이건 리액트에 Three.js를 작용시켜보겠습니다. # 설치 방법 yarn add three or npm install three # 캔 pink1016.tistory.com 이전 글에서는 그냥 원으로만 보였다. 입체적으로 보이게 하기 위해서 빛을 줘야한다. # 3D 구형 만들기 const Circle = () => { return ( ); }; ambientLight : 주변 광 추가 directional..

# 배경 회사 스터디로 진행을 하게 되었다. 동료가 Three.js를 제안했다. 이때 Three.js 기술을 처음 알았다. 이건 리액트에 Three.js를 작용시켜보겠습니다. # 설치 방법 yarn add three or npm install three # 캔버스를 만들어보자 페이지 하나를 만들어서 거기 캔버스를 만들었다. 도화지라고 생각하면 된다. import {Canvas} from "@react-three/fiber"; const Model = () => { return ( ); } export default Model; 빨강색이 캔버스이다. # 캔버스안에 구형(공모양)을 띄어보자 npm install three @react-three/fiber @react-three/drei or yarn add..