실전 압축 코딩

React에서 상태를 관리할 때 항상 setState를 직접 호출해야 값이 변경된다.React는 불변성(immutability)을 기본 철학으로 삼고 있으며, 명시적으로 상태를 변경하는 구조가 핵심 이기 때문이다.하지만 Vue.js를 써본 사람이라면, Vue(3)의 ref()나 reactive()처럼 값을 직접 변경하면 반응적으로 UI가 갱신되는 구조가 더 직관적이고 편리하게 느껴질 수도 있다. 예를 들어, Vue(3)에서는 아래처럼 쓸 수 있다.const state = reactive({ count: 0 });state.count++; // 자동으로 반응!   React에서도 이런 방식으로 상태를 관리해보고 싶다는 생각이 들어,Proxy 객체를 활용해 Vue처럼 동작하는 useReactive 훅을 구현..

https://leetcode.com/problems/decode-string/description/?envType=study-plan-v2&envId=leetcode-75 간만에 올리는 알고리즘 포스팅 이번 문제는 leetcode의 394. Decode String 이다. 문제를 보자마자 기존에 접했던 괄호 채우기 stack 유형을 떠올렸다. 그런데 디테일한 로직을 짜려고 하니 머리가 너무 아팠다. 공간 지각 능력이 좀 부족해서  이런 문제를 풀때는 시물레이션을 돌리면서 차근 차근 로직을 세워 푸는것이 좋다.  로직을 세워 보자! 우선 for loop으로 문자열 s를 순회해 주자. 순회 시, 문자열 s의 character 마다 분기처리를 해주어야 한다. 1. digit은 괄호 [] 안에 들어갈 문자열의..

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