본문 바로가기

전체 글

[Vue3] 엑셀 다운로드 api 통신하기 ( excel blob )
이슈 api통신으로 excel download를 하는데, 한글이 깨진 형태의 데이터가 내려오고, postman에서 테스트를 해서 다운받기를 누르면 정상적인 엑셀로 나오는데 실제 내가 짠 코드로 열면 알수없는 형식의 파일이라고 떴다. 해결 1. request 통신 시에 responseType: 'blob'를 넣어주어야한다. 2. 받은데이터를 Blob를 이용하여 변형 한다. 3. 가상 a 태그를 사용하여 a태그의 download기능을 사용하여 다운로드한다. 1. request 통신 시에 headers 안에 responseType: 'blob'를 넣어주어야한다. const result = await this.request({ ...api, responseType: 'blob' }, options); 2. 받은..
[vue3] teleport란 ?
모달 teleport를 하나 생성했는데, 컴포넌트로 따로 빼서 사용하였다. 사용방법 공지사항페이지 ... 제이쿼리처럼 .이나 #으로 위치를 지정해줄 수 있다. 그리고 주석위치로 모달 컴포넌트 내용이 들어오게 된다. (teleport 안의 내용이 지정한 위치로 들어오게됨)
[Vue3] v-html 안쓰고 줄바꿈 처리하기 (typescript warning: 'v-html' directive can lead to XSS attack)
이슈 'v-html' directive can lead to XSS attack 테이블 th 에 제목이 데이터로 들어오는데, v-text로 썼더니 br태그는 그대로 출력되고 \n은 줄바꿈이 되지 않았다. 그래서 v-html로 바꾸어 썼더니 XSS 공격에 약하다고 타입스크립트에서 에러가 떴다. 해결 1. CSS로 해결 (white-space: pre-line) 해당 th 에 css로 white-space: pre-line 하고 \n으로 바꿔주었더니 정상적으로 줄바꿈이 되었다. 2. \n 기준으로 split해서 배열만들고 for문 돌리기 {{ text }} '마스터\n셀러' 라는 데이터라면 split을 사용하여 ['마스터', '셀러'] 로 쪼갠 후 html에서 v-for로 반복을 돌려서 첫번째가 아니면 뒤에..
[React 세팅] 리액트 create-react-app 세팅 오류 ! (You are running `create-react-app` 4.0.1, which is behind the latest release (5.0.0).)
이슈 You are running `create-react-app` 4.0.1, which is behind the latest release (5.0.0). 새로 프로젝트를 하려고 npx create-react-app my-app 명령어로 설치를 하려는데, 위와 같은 오류가 뜨면서 계속 되지 않았다..... 해결 npm uninstall -g create-react-app npm add create-react-app npx create-react-app 새로만들프로젝트명
[React 기본] React Hook
함수형 컴포넌트 할때 잠시 나왔던 react hook인데, useState, useEffect 등 유용한 것이 많다. useEffect는 vue의 watch같이 컴포넌트가 마운트, 업데이트 될때 호출되는 훅으로 많이 쓰이는데 자세한건 공식문서를 읽어보는 것이 좋을 것 같다. 자세한건 실제로 사용하면서 블로그에 정리하는 것으로..! hook 소개 https://reactjs.org/docs/hooks-intro.html#motivation Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org hook 개요 https://reactjs.org/docs/hooks-overview.html Hooks at a..
[React 기본] Lifecycle Methods
Lifecycle Methods란 ? vue의 lifeCycleHook 처럼 react에도 있다. 리액트가 컴포넌트를 렌더링 하기까지 거치는 순서인데, 그 순서마다 lifeCycle이벤트로 확인해볼 수 있다. 라이프사이클 메소드는 console.log로 찍어 확인하는 것이 제일 좋은 것 같다. 자주쓰이는 lifeCycle Methods 1. constructor 마운트되기 전에 최초로 한번 호출된다. 1. this.state 초기화 2. 이벤트 핸들러 메소드를 인스턴스에 바인딩 this.state생성자는 직접 할당해야 하는 유일한 위치라고 하는데, 여기서 주의할 점은 props로 들어온 걸 state에 넣으면 안된다는 점이다. 변경이 필요한 경우에는 componentDidMount를 사용하여야한다. 2...
[React 기본] 함수형 컴포넌트의 PureComponent는? memo!
PureComponent개념보러가기 [React 기본] PureComponent란 ? (Component, PureComponent차이) pureComponent 하기 전에 알아야 할 개념 리액트의 데이터 하나 바뀐다고 계속되는 re-rendering 성능에 문제 없나요 ? 리액트는 state가 변화되면 전체 컴포넌트의 render 함수가 호출되는데, 단 한개라도 joannashin.tistory.com 함수형 컴포넌트의 PureComponent == memo 기존소스 import React from 'react'; const HabitAddForm = (props) => { const formRef = React.createRef(); const inputRef = React.createRef(); c..
[React 기본] 함수형 컴포넌트 만들어보기 (class > function Component)
단축키 vscode에서 reactjs snippet 플러그인을 설치했다면 rsi + enter 하면 자동으로 함수형 컴포넌트로 세팅해준다. (class형 컴포넌트는 rcc + enter) 함수형 컴포넌트 const HabbitAddForm = () => {} // 또는 function HabbitAddForm () {} 정말 평소 javascript에서 쓰던 함수처럼 쓸 수 있다. 아래는 class컴포넌트로 작성한 코드를 function형 컴포넌트로 바꾼예제이다. 예제1 - Class형 컴포넌트에서 function 으로 바꿔보기 class형 컴포넌트를 사용한 기존소스 import React, { PureComponent } from 'react'; class habitAddForm extends Pure..
[React 기본] PureComponent 실제로 해보기
PureComponent 개념 PureComponet는 이전의 props과 state를 비교하여 (가볍게 비교!!!! shallow !!) 진짜 필요한 컴포넌트만 업데이트 해주는 것 ! PureComponent에 대한 자세한 개념설명 [React 기본] PureComponent란 ? (Component, PureComponent차이) pureComponent 하기 전에 알아야 할 개념 리액트의 데이터 하나 바뀐다고 계속되는 re-rendering 성능에 문제 없나요 ? 리액트는 state가 변화되면 전체 컴포넌트의 render 함수가 호출되는데, 단 한개라도 joannashin.tistory.com PureComponent 실제로 적용해보기 import React, { PureComponent } fro..
[React 기본] PureComponent란 ? (Component, PureComponent차이)
pureComponent 하기 전에 알아야 할 개념 리액트의 데이터 하나 바뀐다고 계속되는 re-rendering 성능에 문제 없나요 ? 리액트는 state가 변화되면 전체 컴포넌트의 render 함수가 호출되는데, 단 한개라도 변경이 감지되면 모든 컴포넌트가 re-rendering된다. 이게 성능이나 속도에 문제가 되지 않나 ? 싶을 수 있지만, VDom(Virutal Dom)이라는 메모리상의 트리구조를 사용하기 때문에 실제로는 진짜 필요한 컴포넌트만 업데이트하므로 문제가 없다. 컴포넌트가 업데이트 되는 것을 확인하려면 어떻게 하나요 ? 개발자도구의 components탭에서 설정모양에서 high lightes when components render 체크박스를 선택하고 이벤트를 실행시켜 보면 데이터가 ..

티스토리툴바