디벨롭per

1) 컴포넌트 구성 html, 디렉티브, 바인딩 2) 컴포넌트 적용 3) 컴포넌트 간 데이터 전달 1) props로 부모컴포넌트에서 자식컴포넌트로 데이터 전달 //자식 컴포넌트 Vue.component('ChildComponent' , { props:['message'], template: ' {{message}} ' }) //부모 컴포넌트 4) $.emit() 메서드로 자녀 컴포넌트에서 부모 컴포넌트로 데이터 전달 myevent는 특정 이벤트가 발생했을 때 동작하는 메서드 의미, parameter는 전달할 데이터 5) 이벤트 버스를 이용한 데이터 전달 이벤트 버스는 발행자와 구독자 패턴으로 이루어져있다. 컴포넌트가 A이벤트 발행하면 B이벤트가 A이벤트를 구독하는 구조 6) 컴포넌트 재사용 : 슬롯 부모..

A) Vue.js 인스턴스 1) 뷰 인스턴스 template 뷰 instance에서 정의한 데이터와 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속서 methods 마우스 클릭이나 버튼 클릭과 같은 이벤트 처리하는 동적인 작업 처리 ( 사용자가 이벤트를 함 ) computed data 객체 내 프로퍼티에 변화가 발생할 때마다 변화됨 => React의 useEffect와 같음 props 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다. watch data 객체 내의 데이터를 모니터링 할 수 있다. 특정 데이터에 변화가 생길 시 후속 처리 가능하다. 한페이지내의 인스턴스가 서로 격리되어있지 않기 때문에 하나의 뷰 인스턴스에 있는 데이터에 변화가 생길 경우, ..

Redux toolkit 공식문서에 따르면 RTK Query is powerful data fetching and caching tool 강력한 데이터 패칭과 캐싱 툴을 지원해주고 있다. 본인도 RTK를 한 3개월 정도 써본 결과 직접 느낀 장점들이 있었다. ❏ Api로부터 호출된 데이터가 캐싱된다. - RTK를 사용하지 않을 경우, 검색 조회조건이 변경될 때마다 api를 호출했을 것이다. 하지만 RTK를 쓰니, 이미 호출했던 조건으로 변경 했을 때 캐싱된 데이터가 있어, API 재호출을 안해주는 특징이 있었다. ❏ API 응답 상태를 따로 명시안해도 된다.Redux-thunk를 사용하게 되면 pending,fullfiled,rejected 를 제공해주어 비동기 처리가 가능한 점이있다. 하지만 loadi..

Intersection ObserverAPI를 사용하게 되면, 우린 특정 element가 viewport에 보일때 관찰이 가능하다. 주로 해당 기능을 페이지 성능 개선을 위해 Lazy Image loading에 사용하곤 한다. intersection observerAPi를 사용하지 않고, react.js, typescript를 사용하여 구현해보도록 하겠다. | 화면 크기 구하기 element가 viewport에 표시되는 것을 관찰하기 위해서는, window의 width, height를 먼저 알아내야한다. 유동적 화면 변화를 위해선 eventHandler를 사용하여 크기를 감시해야한다. useEffect(() => { handleObserveElement(); }, [handleObserveElement]..

line-break가 안되는 이유는 jsx에선 \n가 동작하지 않아 오류 출력이 나오게 된다. 이를 해결하기 위해서는 해당 text가 들어간 div에 white-space에 pre-line 속성을 줄경우 \n을 인식하여 line-break가 된다.

막대를 x축 방향으로 슬라이드를 통해 두개의 이미지를 보여지도록 개발했다. 1. 이미지 2개 겹치기 //이미지 1개 /** 막대 setPressed(true)} onMouseUp={() => setPressed(false)} > {""} **/ //이미지 2개 styled-components const Layout = styled.div` display: flex; justify-content: center; width: 100%; height: 100%; position: relative; overflow: hidden; border: 1px solid ${({ theme }) => theme.gray300}; div[class^="crop"] { position: absolute; width: 100..

폼을 저장할 때 버튼을 한번에 많이 눌렀을 경우 API 중복 호출이 일어나기 때문에, 이를 방지하기 위해서 throttle과 debounce를 사용할 수 있다. 1. throttle throttle은 버튼을 클릭했을 때 최초로 한번 실행하고, n초 동안을 실행 못하도록 해준다. 2. debounce debounce는 버튼을 클릭하고 n초동안 실행을 못하도록 방지해주고, 제한시간이 끝나고 나서야 api호출을 해준다.

구글 맵에서 기존에 있던 장소 마커를 지우고 싶을 경우 //커스텀 맵 스타일 선언 const mapStyle = [ { featureType: 'poi', //(물가, 교량..등 장소) elementType: 'labels.icon', stylers: [{ visibility: 'off' }], }, ... return( ) 위에 처럼 해주면 된다 참고 https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple Styled Map Types | Maps JavaScript API | Google Developers This example creates a new map type, which the us..

updateQueryData는 기존에 존재하는 패치작업을 쉽게 수행할 수 있다. 나같은 경우에는 드래그앤 드랍을 통해 order처리를 할 때 사용하게 됐다. 큰 틀은 이렇다. A,B,C라는 objectList에서 C를 A로 옮길 경우 order를 변환하는 API를 호출한다. 물론 update는 되지만 깜박이는 현상이 있었다. 문제 상황 1. C를 A로 드래그앤 드랍 : [C, A, B] 2. 업데이트 API가 호출 됨 3. 아직 API로부터 결과를 받지 않아 기존 list state때문에 다시 원복됨 [ A, B, C ] 4. 업데이트 된 API 결과를 다시 받아 LIST UPDATE함 [C,A,B] 그리하여 1과 3 사이 state때문에 깜박이는 현상이 존재했던 것이다. 이를 해결하기 위해서는 2번인 ..

html2canvas cors html2canvas라이브러리는 쉽게말해서 div를 이미지로 변환해주는 라이브러리다. 변환 방향은 (1)div-> (2)canvas-> canvas.dataUrl->image cors 에러 원인 : div에서 canvas로 변환하는 과정에서 canvas는 로컬이미지가 아닌 다른 도메인의 이미지가 있을 경우 이를 오염된 캔버스로 판정하여 cors 오류를 만들어냈다. 그리하여 변환된 결과물에서도 div는 잘 보이지만, 이미지만 안보이게 되는 이슈가 있었다. 해결 : 코드는 s3를 aws의 cloudFront를 통해 가져오고 있었다. 이곳에서 가져올때 cors오류를 없애기 위해서는 응답헤더에 Access-control-header를 받아와야만 가능했다. cloudFront의 동작..