본문 바로가기

vue

 (11)
[React] Vue 개발자가 본 useEffect useEffect 는 Vue 의 watch / watchEffect  , onMounted, onUpdated, onUnmounted 를 를 결합한 것과 유사한 기능을 제공합니다. 1. vue 와의 비교 // React import { useEffect } from 'react' useEffect(() => { console.log('컴포넌트가 마운트되었습니다') return () => { console.log('컴포넌트가 언마운트됩니다') } }, []) // 빈 배열은 마운트와 언마운트 시에만 실행 useEffect(() => { console.log('데이터가 변경되었습니다') }, [someData]) // 마운트 된 이후 ,..
[React] React와 Vue(Composition API)의 ref 차이점 1. 기본 개념 React: useRef와 useState를 별도로 사용 Vue: ref가 참조와 상태 관리를 모두 처리  2. 사용법 React import { useRef, useState, useEffect } from 'react'; function MyComponent() { const inputRef = useRef(null); const [count, setCount] = useState(0); useEffect(() => { inputRef.current?.focus(); }, []); return ( Count: {count} setCount(count + 1)}>Increme..
[React] props children VS vue slot 1. react 의  props.children사용자 정의 컴포넌트 사용시 속성을 주지 않아도 항상 props 로 받을 수 있는 속성이다컴포넌트 합성: 컴포넌트가 다른 컴포넌트나 내용을 감싸서 컴포넌트를 만드는 것을 컴포넌트 합성이라고 하는데 부모 컴포넌트가 자식 요소를 알 수 없을 때 유용합니다.유연성: 컴포넌트를 더 유연하고 재사용 가능하게 만듭니다.다양한 타입: 문자열, 숫자, 엘리먼트, 배열 등 다양한 타입이 될 수 있습니다.   import classes from './Modal.module.css';function Modal({ children, onClose }) { return ( e.stopPropagation()}> {children} ..
[Vue] Pinia 의 활용법 1. 스토어 정의import { defineStore } from 'pinia'export const useUserStore = defineStore('user', { state: () => ({ name: '홍길동', age: 30 }), getters: { isAdult: (state) => state.age >= 18 }, actions: { incrementAge() { this.age++ } }}) 2. 컴포넌트에서 스토어 사용 이름: {{ userStore.name }} 나이: {{ userStore.age }} 성인 여부: {{ userStore.isAdult }} 나이 증가   3. 상태 변경직접 할당: userSto..
[Vue3] props drilling 중간 컴포넌트에서 props 선언 없이 하위로 전달하기 작업 진행 중에, props 정의나 provide inject 가 없는 상황인데하위 컴포넌트에서 props 를 받아 프로세스를 진행하는 코드를 보고 정리를 합니다.개인적으로는 협업이라면 상태관리 라이브러리(vuex, pinia ) 나 provide inject  를 사용하여코드 추적의 비용을 줄이는 게 더 낫다고 생각합니다. vue 에는 폴스루 속성이라는 게 있습니다.https://ko.vuejs.org/guide/components/attrs Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org예시에는 클래스이름, 스타일, id 의 속성이 하위 컴포넌트로 자동 상속되는 예시만 나와 있어서 미쳐 몰랐지만..A  => B => C 로 A 가 최상단(부..
[TroubleShooting / Vue3] 크롬 3CX 확장 프로그램으로 숫자 핸들링이 안되는 경우 작업중주민번호 뒤 7자리의 placeholer 0000000 이 입력값과 붙어서 나온다는 이슈가들어왔다.  하지만 내 화면엔 정상적으로 잘 나오는데....코드에는 이상이 없어서 다른 사이드 이펙트로 판단되어테스터와 이야기를 하는 도중 전화번호로 판단되면 클릭시 전화를 걸수 있게 해주는 3CX 확장 프로그램이테스터분 쪽에는 깔려있다고 한다.비활성화 하시고 테스트하면 되겠지만...혹시나 그게 안되는 경우도 있으실테니.. 이럴 땐 아래의 코드를 쓰면 된다const formatJuminNo(num) => num.split('').join('\u200B'),  각 숫자 사이에 폭 없는 공백 문자(U+200B)를 삽입해서 시각적으로는 변화가 없지만, 크롬 확장 프로그램이 연속된 숫자로 인식하지 못하게 하고 해당 ..
[Three.js] 1. vue 로 빨간 육각면체 만들기 화면에 무언가를 그리려면 4가지 요소가 필요합니다.1. 오브젝트를 포함한 scene2. 오브젝트3. 카메라4. 랜더러1. scene scene은 컨테이너와 같습니다. 그 안에 오브젝트, 조명, 카메라 등을 배치할 수 있으며, Three.js에 해당 장면을 렌더링하도록 요청합니다import { PerspectiveCamera, Scene, BoxGeometry, MeshBasicMaterial, Mesh, WebGLRenderer} from 'three'const scene = new Scene() 특징컨테이너: 씬은 다양한 3D 객체들(메쉬, 조명, 카메라 등)을 포함하는 컨테이너로서의 역할을 합니다.조직화: 씬 내에서 객체들은 계층적으로 조직될 수 있으며, 이는 복잡한 3D 환경을 효과적으로..
[TroubleShooting / Docker] Vue.js 프로젝트에서 Docker 환경에서의 핫 리로딩 몇번의 시도 끝에 301, 451ms 에서 10,491ms로 리로딩 시간 단축(이 정도면 콜드 리로딩이긴 하다...ㅠㅠ) 문제는 노드 모듈 때문이었다...1. Vue CLI 3.0 이상CHOKIDAR_USEPOLLING=true2. Vue CLI 5.0 이상 또는 Webpack 5 사용WATCHPACK_POLLING=true 사용 방법:1. Docker Compose를 사용하는 경우 docker-compose.yml 파일에 다음과 같이 추가: services: web: environment: - CHOKIDAR_USEPOLLING=true # 또는 WATCHPACK_POLLING=true volumes: - ./node/경로이름:/app:cached # 경로 뒤 :cac..

티스토리툴바