Evan의 개발 저장소

react 개발자라면 react hook을 다루면서 의존성 배열을 사용해본 경험이 있을것이다. 예를 들어 flag 라는 값이 변경 할 때 마다 특정 함수를 실행하고 싶은 경우 아래 처럼 코드를 작성할 것이다. useEffect(() => { toDoFunc(); }, [flag]) 여기서 의존성 배열이 어떤식으로 작동하는지, 어떤 값들을 넣어야 하는지 이해하고 사용할 필요가 있다. 렌더링에서도 비슷한 예를 볼 수 있는데 react의 컴포넌트는 props값이 바뀌면 다시 렌더링 되는 특징을 가지고 있다. 아래 처럼 FlagComponent에 flag값을 props로 넘겨준다면 flag 값이 변경 될 때 해당 컴포넌트가 다시 렌더링 될 것이다. return ( ) 위의 예시들의 작업이 일어나는 방식은 자바스..

서비스를 개발하다보면 간간히 iframe을 사용해야할 일이 발생한다. 가령 도메인이 다른 서비스를 기존 서비스 내에서 보여줘야 한다던지 특정 요소 안에서 외부 서비스를 보여줘야 하는 등 생각보다 사용해야할 일이 많이 생긴다. 서로 다른 도메인을 가지고 있기 때문에 window 객체를 직접 참조하려고 하면 cors에러가 발생하게 된다. 그럼 서로 데이터를 공유하거나 통신해야하는 로직이 필요한 경우 어떻게 해야하는가? iframe 내에서 window.parent.postMessage() 메서드를 사용하고 부모 window에서 event handler 메서드를 추가해주면 iframe에서 보내주는 메세지를 부모 window에서 처리할 수 있게 된다. 뒤로가기를 부모 window에서 할 수 있게 처리하는 예시이다..

얼마전 웹에서 Json 데이터를 엑셀 파일로 저장하는 내용을 포스팅 했었다. json 데이터가 있을 경우 엑셀 파일로 다운로드 되고 없을 경우 alert를 띄워줘야 하는데 우리는 시스템 alert가 아닌 custom alert modal을 사용했고 alert modal component을 만들면서 state update가 안됐던 것에 대해 이번에 글을 쓰고자한다. 처음 만들었던 코드 ExcelDownloadBtn.tsx interface ExcelProps { fileName: string; dataSource?: any; } export const ExcelDownloadBtn = ({ fileName, dataSource }: ExcelProps) => { const [showAlert, setSho..

static html 파일을 서버에서 serving 해야 할 필요가 있다. daum postcode api 사용등 정적 파일 환경에서 테스트가 불가능한 것들이 예로 들 수 있을 것 같다. 방법은 매우 간단하다. 방법 먼저 express 프레임워크를 설치한다. npm install express --save 설치가 완료 되었다면 해당 디렉토리에 server/index.js 파일을 추가한다. index.js 파일을 수정한다. const express = require("express"); const app = express(); const PORT = 3000; app.use(express.static("/Users/myname/Desktop/static")); // directory 경로 app.get("..

어드민 서비스에 JSON 데이터를 엑셀 파일로 변환하여 다운로드 할 수 있는 기능을 추가하게 되었다. 여러가지 방법들이 있겠지만 xlsx 라이브러리를 이용하기로 했다. (너무 간단하기 때문,,) 라이브러리 설치 yarn add xlsx 혹은 npm install xlsx --save Json to Excel File import * as XLSX from 'xlsx'; const downloadExcel = (data) => { const worksheet = XLSX.utils.json_to_sheet(data); const workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'my_sheet'); XLS..

최근 서비스에서 사용하던 이미지 업로드 기능을 커스텀하게 바꾸는 작업을 진행했다. 개발 중인 서비스는 네이티브 앱이 웹뷰를 감싸고 있는 구조라 약간의 설계가 필요했다. 기존의 이미지 업로드 방식 WebView (Vue.js) 웹뷰에서 file 타입의 인풋으로 Native Android의 onShowFileChooser 호출 Native Android (JAVA) 권한 비교 후 image picker intent 실행 @Override public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, FileChooserParams fileChooserParams) { mFilePathCallback = filePathCall..