실전 압축 코딩

https://ljy1011.tistory.com/225 [React.js 3D 에니메이션 만들기(2)] 3D text geometry 생성 및 조명 설정 with react three fiberhttps://ljy1011.tistory.com/224 [React.js] generator(제네레이터) 를 활용해 3D 에니메이션 만들기! with react three fiber/ framer-motion / react포트폴리오 제작중, 3d text mesh의 역동적인 움직임을 중심으로 나를 표현ljy1011.tistory.com이어서. React Three Fiber와 Leva로 조명 제어하기 3D 웹 애플리케이션을 만들 때 조명은 씬의 분위기를 설정하는 중요한 요소 이다. 이번 포스팅에서는 React ..

https://ljy1011.tistory.com/224 [React.js] generator(제네레이터) 를 활용해 3D 에니메이션 만들기! with react three fiber/ framer-motion / react포트폴리오 제작중, 3d text mesh의 역동적인 움직임을 중심으로 나를 표현 하는 3d 에니메이션을 만들어 보고 싶다는 생각이 들었다. 그래서 three.js 관련된 라이브러리를 사용해 구현해 보기로 하ljy1011.tistory.com이어서. 이번에는 react-trhee-fiber 를 활용해 3d text geometry를 생성해 보도록 하겠다. 설치 라이브러리npm i three three-stdlib @react-three/fiber @react-three/drei @re..

포트폴리오 제작중, 3d text mesh의 역동적인 움직임을 중심으로 나를 표현 하는 3d 에니메이션을 만들어 보고 싶다는 생각이 들었다. 그래서 three.js 관련된 라이브러리를 사용해 구현해 보기로 하였다.  설치 라이브러리npm i three three-stdlib @react-three/fiber @react-three/drei @react-three/rapier framer-motion framer-motion-3d 1. three설명: WebGL 기반 3D 그래픽을 쉽게 구현할 수 있는 JavaScript 라이브러리.용도: 3D 모델링, 애니메이션, 조명, 텍스처 맵핑 등 3D 그래픽의 기본적인 빌딩 블록 제공.2. three-stdlib설명: Three.js의 추가 유틸리티 모음.용도: ..

react 로 만든 컴포넌트를 npm 사이트에 배포해 보자! (typescript 적용) https://www.npmjs.com/package/react-divided-progress-bar react-divided-progress-bar A progress-bar which has divided section based on React.js. Latest version: 0.1.7, last published: 4 hours ago. Start using react-divided-progress-bar in your project by running `npm i react-divided-progress-bar`. There are no other projects in the npm reg www.npm..

next.js에서 서버 컴포넌트에서 typeorm을 사용한 db접속을 구현 하고 있었다. db 접속, query 실행등은 정상적으로 작동했으나. 엄청난 수의 "Critical dependency: the request of a dependency is an expression" 에러 메시지가 발생했다... 보아하니 typeorm 패키지의 종속성 문제인듯 하였다. 애꿎은 package.json만 여러번 만지던중 typeorm github에서 이미 해당 issue가 report된 것을 확인하였다! https://github.com/typeorm/typeorm/issues/10047 Plenty of `Module not found: Can't resolve 'X' in` with new Next.js pro..

vue에서는 컴포넌트를 동적으로 사용할수 있는 기능이 있다. 객체를 생성해 프로퍼티의 value에 컴포넌트를 할당해 동적으로 컴포넌트를 사용하고자 했다. ... import Ex from "@/views/Ex.vue"; const el = { component: Ex } 이런식으로... 그런데 작동은 잘 되지만, warn이 엄청나게 나왔다! 원인을 대략 확인해 보니 경고 메시지 그대로, 반응성 객체로 만들어진 구성요소는 성능에 오버헤드를 초래 한다는 것이였다. 구글링 해본 결과 stack overflow에서 해결 방법을 찾았다. https://stackoverflow.com/questions/65716637/vue3-performance-warning-using-ref vue3 performance wa..

외부 js 파일에서 Vue앱의 route 접근하고 할때! 먼저 router를 import 한다. import router from '@/router' 여기서 router.options.routes 으로 route 정보를 확인 할 수 있다. 혹은 router.currentRoute 로 현재 경로 정보를 확인 할수 있다. 이 간단한걸 몰라서 여태껏 고생했다...

vue3 와 typescript로 개발중 'Object is possibly undefined' 에러가 발생했다. 딱 보아하니 'props로 땡겨온 변수가 undefined 일 수 있잖아' 라는 에러 같았다. 하지만 나는 해당 변수의 default 까지 선언을 해준 상황이라 절대 undefied 혹은 null 값이 될 수 없는 상황이였다.. 이를 해결하기 위해 해당 변수가 undefined 될 수 없다고 강제 하기로 했고, 느낌표(!) non-null 단어 연산자를 사용했다.사용법은 간단히 변수 옆에 !를 붙여주면 된다. 이는 확정 할당 단언(Definite Assignment Assertions) 이라고 한다. 변수에 값이 무조건 할당되어있다고 컴파일러에게 전달하여 값이 없어도 변수 또는 객체를 사용할..

https://next.vuetifyjs.com/en/api/v-text-field/ v-text-field API — Vuetify API for the v-text-field component. next.vuetifyjs.com vuetify의 v-form validate를 이용하여 유효성 검증을 구현하였다. v-text-filed의 rule과 v-form의 ref를 잡아주면 된다. template Login 로그인 v-form의 ref를 loginForm으로 잡아주었다. v-text-filed 에서 검증할 rule을 설정하면 된다. setup setup () { const username = ref('') const password = ref('') const loginForm = ref(null)..

vue에서 eslint 관련 이슈가 생겼다. 해결 방법 package.json 에서 extends: [ "plugin:vue/vue3-essential", "@vue/standard", ], 를 extends: ["eslint:recommended", "plugin:vue/recommended", ] 로 바꿔주면 된다.