메로그

redux 를 보다 쉽고 간단하게 사용할 수 있도록 해주는 라이브러리입니다. 아래는 설치방법입니다. # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 예제 아래 간단한 예제와 설명을 통해서 사용 방법을 익혀보시면 됩니다. index.ts 에서 Provider 와 store 를 가져와서 등록해줍니다. // index.tx import React from 'react'; import { createRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; import { store } from './app/store'; import App from './App'; im..

useState 에서 setState 는 비동기 동작 방식을 가지고 있다. 비동기로 동작하는 이유 하나의 페이지나 컴포넌트 내에서 수많은 상태값이 존재한다. 이를 하나 하나 바뀔 때마다 화면을 리렌더링한다면 성능 저하가 발생할 것이다. 그렇기 때문에 리액트는 성능 향상을 위해 한 번에 렌더링을 하는 방법을 채택하였다. 또한, setState를 연속 호출해도 배치(batch) 처리하여 한 번에 렌더링하도록 하여 아무리 많은 setState 가 연속적으로 사용되었어도 batch 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지한다. 하지만, 가끔 우리는 동기적으로 렌더링 시점을 잡아 무언가를 하고 싶은 경우가 있다. 아래 그에 대한 방법을 제시한다. 1. useEffect 를 사용해서 mount 시점을 잡..

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, XMLHttpRequest보다 강력하고 유연한 대체제입니다. 우리가 흔히 사용하는 axios, ajax 와 마찬가지로 cors, header 설정을 할 수 있으며, promise 를 리턴한다. 기본적인 사용방법은 아래와 같다. // then fetch(url) .then((res)=>res.json()) .then((data)=>{ console.log(data) }) // async, await const res = await fetch(url) const data = await res.json() console.log(data) 헤더 설정 방법은 아래와 같다. fetch(url, { method: "POST" hea..

보통 서비스 / 데이터 가공 구간에서 저장하고 있는 파일을 base64로 파싱하여 프론트로 내려주게 된다. 그리고 이를 이용해 프론트는 base64 를 디코딩하여 blob 객체를 생성하고 이를 이용해 파일을 다운로드한다. 여기서 궁금한 점은 base64 로 왜 인코딩해서 내려주냐? 인데, 간단하게 바이너리 데이터를 텍스트 데이터로 변경해서 내려주기 때문에 성능, 보완에 장점이 있다고 한다. 예를 들어, JSON 을 텍스트로 변경해서 내려주는거를 상상하면 이해가 될 것이다. 코드 아래는 base 64 데이터를 받아왔다는 가정하에 아래에 base64 로 데이터를 넣으면 xlsx 를 다운받을 수 있을 것이다. /** * base64 를 받아 엑셀 다운로드 하는 함수 * @param {base64} base64..

redirected when going from to via a navigation guard 뷰 라우터 이동시 다음과 같은 오류가 발생하는 경우가 있을 것이다. 이는 페이지 이동시 중간에 라우터 가드를 만났고 거기서 조건을 충족하지 못해 다른 페이지로 이동시에 발생하는 에러 문구라고 보시면 된다. 실제로 해당 오류가 발생해도 라우터 이동에는 큰 문제가 없다. 이처럼 발생하는 이유는 router.push 가 Promise 객체를 리턴하는데, 거기서 reject 발생시 catch 하지 못해 발생하는 문구로 보인다. 이의 경우 아래와 같이 설정하면 해결할 수 있다. this.$router.push('/home').catch(() => {})

보완 이슈 발생 소나큐브와 같은 지속적인 코드 품질 검사용 오픈 소스 플랫폼을 사용하다보면, 아래와 같이 a 태그에서 href 속성을 동적으로 넣는 코드에서 보안 이슈 발생함. {{ title }} 원인 (https://v2.vuejs.org/v2/guide/security#Injecting-URLs) 프론트엔드에서 URL 검사를 수행하는 경우 이미 보안 문제가 있습니다. 사용자가 제공한 URL은 데이터베이스에 저장하기 전에 항상 백엔드에서 검사해야 합니다. 네이티브 모바일 앱을 포함하여 API에 연결하는 모든 클라이언트에서 문제를 방지할 수 있습니다. 또한, 검사된 URL이 있더라도 Vue는 안전한 목적지로 연결된다는 것을 보장하는 데 도움을 줄 수 없습니다. 정리하면 href 로 이동하는 경로가 우리..