실전 압축 코딩

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의 추가 유틸리티 모음.용도: ..

Next.js 에서.glsl 확장자 shader 파일을 import 해보기 next.config.js 에서 webpack loader 설정next.config.js에서 webpack 로더 설정을 커스터마이징하려면 next에서 제공하는 webpack 함수 를 확장하여 사용할 수 있다.next.config.js 파일 내에서 module.rules에 새로운 로더 설정을 추가하는 방식으로 원하는 파일 형식에 대해 로더를 설정 하면 된다. /** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: false, webpack: (config, options) => { config.module.rules.push( //..

과거에 배포했던 npm package를 번들링 한뒤 배포해 보기로 했다. https://ljy1011.tistory.com/182 React 컴포넌트 Npm에 배포하기 (with TS)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, lljy1011.tistory.comhttps://ljy1011.tistory.com/203 [NPM에 배포한 React Package 개선..

보호되어 있는 글입니다.

https://www.ibm.com/kr-ko/topics/content-delivery-networks CDN(Content Delivery Network)이란? | IBMCDN(Content Delivery Network)은 웹사이트 및 모바일 앱의 성능을 최적화하여 고객 만족도를 높입니다.www.ibm.com CDN은 웹사이트의 원래 서버와 달리 사용자에게 더 가까이에 있는 서버로부터 컨텐츠를 배포하는 방식으로, 웹 퍼블리셔가 더 빠르고 우수한 품질의 성능을 사용자에게 제공하도록 지원합니다. CDN의 이점웹 퍼블리셔는 CDN을 통해 로딩 시간을 단축하고 대역폭 사용량을 줄이는 것을 비롯하여 여러 이점을 누릴 수 있습니다.웹 퍼블리셔를 위한 연결 기능 및 확장성 강화: CDN은 사이트 사용자의 컨텐츠..

api 요청 후 요청을 취소할 상황이 생길시... api 호출 후 응답시간이 길 경우, response 너무 늦게와 의도치 않는 사이드 이펙트를 초래할 경우가 있다. 이럴 경우 api 호출을 중단 해야 하는데, 그런 상황에 사용하는것이 AbortController이다. https://developer.mozilla.org/ko/docs/Web/API/AbortController AbortController - Web API | MDNAbortController 인터페이스는 하나 이상의 웹 요청을 취소할 수 있게 해준다.developer.mozilla.org 사용법// AbortController 생성const controller = new AbortController();abortBtn.addEventL..

intersection 과 union type의 개념이 항상 헷갈리다가 모처럼 정리해보기로 했다. 우선 결론 부터 말하자면, intersection ( & ): 두 가지 type 을 전부 만족시켜야 한다. interface의 extends 키워드와 같은 효과를 지닌다.union ( | ): 두 가지 type중 한가지만 만족시켜도 된다! ( 물론 둘 다 만족시켜도 된다.) type a = { a_one: string a_two: string}type b = { b_one: number b_two: number}// 가능const _c: a | b = { a_one: "_a", a_two: "_aa",} // 불가능const c: a & b = { a_one: "_a"..

https://www.typescriptlang.org/ko/docs/handbook/utility-types.html Documentation - Utility TypesTypes which are globally included in TypeScriptwww.typescriptlang.org type key = "a" | "b" | "c"type value = { sub: string}interface Todo { title: string; description: string; completed: boolean;} const c: Record = { a : { sub: "a" }, b : { sub: "b" }, c: { s..