아무거나

Props? Emit? 그리고 Vuex, Eventbus Vue 에서 컴포넌트간 통신은 props 와 emit 을 통하여 전달한다. 먼저 비교하기전에 props 와 emit 에 대해 모르는 사람들이 있을 수 있으니 간단하게 정리하자면 아래와 같다. props: 상위 컴포넌트의 데이터를 하위 컴포넌트에 전달하는 특성이며 하위 컴포넌트에서 전달받기 위해서는 props 를 명시적으로 선언해야 한다. emit: 최상위 컴포넌트가 하나 이상인 경우, 이벤트를 직접 컴포넌트에 할당하는 것을 의미 앞서 말했듯이 props 와 emit 이 많아지면 관리가 복잡해져 사이드 이펙트가 발생할 확률이 높아지므로 이러한 문제점을 해결하기 위하여 주로 상태 관리 패턴 라이브러리를 활용하며 Vue 에서는 보편적으로 Vuex 나 E..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) Scroll Down 구현 // Render DOM // ref가 지정된 곳으로 포커싱이 될 예정이다. forEach({ .... }) // 스크롤 다운 함수 async handleScrollDown() { if (this.scrollLocationRef && this.scrollLocationRef.current) { this.scrollLocationRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' }) } } // 실행되는 함수 // 동적 추가할 때 마다 새로 생성된 행의 Ref를 찾을 수 없어서 우선 재귀함수로 해결.. (__) this.h..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) Fragments: DOM에 별도 노드를 추가하지 않고 자식 목록을 그룹화 할 수 있다. // 1. Fragments를 사용하면 아래와 같이 된다. render() { return ( ) } // 2. Fragments를 짧은 구문으로 사용한 예시이다. // 짧은 구문은 많은 도구에서 아직 지원하지 않기 때문에 명시적으로 를 사용하자. render() { return ( ) } // 3. key가 있는 Fragments // Fragments에 key가 있다면 문법으로 명시적으로 선언해야 합니다. 예를 들어 정의 목록을 만들기 위해 컬렉션을 fragments 배열로 매핑하는 사용 사례이다. return ( {p..

오래전에 작성된 글을 복사해온거라 직접 테스트 해보는 것을 권장 ( 참고용 정도로만 올렸음 ) useRef 리액트를 사용하면서 가끔씩 직접 DOM을 선택해줘야하는 상황이 발생할 수 있다. 예를 들어 Element의 크기를 가져온다는지, 스크롤을 제어 한다는지 등 다양한 상황에 대해 대응하기 위하여 react에서는 ref를 사용하고 Functional Component에서 ref를 사용하기 위해선 useRef라는 React Hook 함수를 사용한다. import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const..

NPM install 시에 "error can't find python executable python you can set the python env variable mac" 오류 해결 (node-pre-gyp 설치시 기준) python 경로를 못찾거나 버전이슈일 가능성이 높다. 현재 진행한 환경은 Mac의 Python3 이며 Python2를 설치하여 환경변수를 변경하여 해결하였다. // homebrew를 통한 python 2.7.18 설치 $ brew install pyenv $ pyenv install 2.7.18 // 환경변수 등록 (위의 파이썬 설치후에 표시되는 경로를 하기 npm_config_python= 에 넣고 명령실행) $ export npm_config_python=Users/bkjeo..

yarn 설치 npm으로 설치하는 방법 $ npm install -g yarn $ yarn --version yarn 초기세팅 // package.json 생성됨 $ yarn init package.json을 기준으로 yarn 의존성 모듈 설치 $ yarn install 의존성 모듈 설치 $ yarn add {package} $ yarn add {package}@{version} 의존성 모듈 업그레이드 $ yarn upgrade {package} $ yarn upgrade {package}@{version} 의존성 모듈 제거 $ yarn remove {package}

Document 체크박스 만들기 state에 checkbox관련 값 정의 this.state = { setCheckedCnt: 0, allChecked: false, } render에 체크박스 관련 값 추가 render() { ... let chkInput // 전체 체크 박스 if (!allChecked || setCheckedCnt === 0) { chkInput = this.handleAllChk()} checked={false} /> } else { chkInput = this.handleAllChk()} checked={true} /> } return ( ... {/* item: 반복문의 element 값, rowIdx: number값 */} handleChk(item.rowIdx)} /> ....

Fragments: DOM에 별도 노드를 추가하지 않고 자식 목록을 그룹화 할 수 있다. // 1. Fragments를 사용하면 아래와 같이 된다. render() { return ( ) } // 2. Fragments를 짧은 구문으로 사용한 예시이다. // 짧은 구문은 많은 도구에서 아직 지원하지 않기 때문에 명시적으로 를 사용하자. render() { return ( ) }

모바일에서 Input Text 에 값을 입력 시 하단 키패드 때문에 화면 가려지는 현상 해결 // 예를 들어 state에 사이즈 조절 또는 display:none 을 할 state를 추가 inputAutoSize: string // function ( 해당 예제는 class에 display:none 을 주어 화면이 안잘리게 하는 방법으로 진행 ) handleFocusIn = () => { this.setState({ inputAutoSize: 'none' }) } handleFocusOut = () => { this.setState({ inputAutoSize: '' }) } // html ( stype을 state로 관리하여 포커스에 따라 display css 설정이 제어된다. ) TEST DIV DI..

값 입력 후 포커싱 자동 이동 예제(ex:핀 번호) 하기 HTML의 input 태그 설정을 사용하게되면 모바일에서 숫자만 입력 가능한 키패드가 표시된다. // react + typescript ... class PinLogin extends React.Component { ... pinCodeNumFocus2: React.RefObject pinCodeNumFocus3: React.RefObject pinCodeNumFocus4: React.RefObject pinCodeNumFocus5: React.RefObject pinCodeNumFocus6: React.RefObject constructor(props) { super(props) this.state = {} this.pinCodeNumFocus2..