YumeHANA YUME'S DEV

https://yumedev.tistory.com/103 [ Next ] 공휴일 Open Api 만들기만드는 프로젝트에 캘린더가 들어가면 항상 공공데이터포털에서 api를 호출해서 사용해야하기 때문에이전 라이브러리는 직접 공공데이터포털 api를 호출해서 뿌려주기때문에 결국에는 직접 공yumedev.tistory.com이전 공휴일 open api를 만들고 나서 앱에서 해당 api를 호출하도록 했다.redis를 사용했지만 redis도 무료 제한이 있기때문에 나중에는 해당 부분이 문제가 생기면 따로 local에 저장해서 날짜 업데이트 하는 시기에 맞춰서만 api를 호출하도록 수정해야할 수도.. 우선 공휴일 데이터를 불러왔으니 이제 캘린더에 공휴일 표시를 해줘야한다.React Native Big Calendarh..

만드는 프로젝트에 캘린더가 들어가면 항상 공공데이터포털에서 api를 호출해서 사용해야하기 때문에이전 라이브러리는 직접 공공데이터포털 api를 호출해서 뿌려주기때문에 결국에는 직접 공휴일이나 날짜를 자유롭게 설정할 수 없기때문에직접 관리자 페이지에서 공용으로 사용할 수 있는 open API를 만들어서 사용하기로 했다.공공데이터포털 https://www.data.go.kr/data/15012690/openapi.do우선 공공데이터포털 특일정보 api 활용신청 후 인증키를 발급공휴일 Api 만들기 공공데이터포털은 파라미터가 년도와 월을 보내야하므로년도를 보내면 1월부터 12월까지 반복문을 돌려 해당 년도의 모든 공휴일을 가져와서 저장1월 1일은 신정이 아닌 1월1일로 나오고 크리스마스는 기독탄신일로 나와서 신..

공휴일 데이터를 관리자 페이지에서 공공데이터포털 api를 활용헤서 저장후이걸 가져와서 처리할까 고민했지만무료로 사용할 수 있는 것이 있어서 해당 라이브러리를 사용하기로했다. git에 해당 라이브러리가 있었고,국내 공휴일 데이터를 쉽게 가져올 수 있길래, 이를 활용했다.https://github.com/kyungseopk1m/holidays-kr GitHub - kyungseopk1m/holidays-kr: [NPM] 🇰🇷 South Korea Public Holidays / 대한민국 공휴일 데이터[NPM] 🇰🇷 South Korea Public Holidays / 대한민국 공휴일 데이터 - kyungseopk1m/holidays-krgithub.comInstallnpm i @kyungseopk1m..

React Native에서 캘린더를 구현할려고하는데처음에는 React Native Calendar를 사용했는데 캘린더의 일정 표시를 하루는 되지만 범위가 안되어서 다른 라이브러리를 사용. React Native Big Calendar는 일정 range표시까지 되어서 해당 라이브러리로 바꿔서 사용했다.하지만 web에서 full calendar처럼 css로 막 바꿀 수 없어서 라이브러리의 일부를 커스텀했다. React Native Big Calendar우선 사용하기위해 두개의 라이브러리를 설치한다.https://github.com/acro5piano/react-native-big-calendar GitHub - acro5piano/react-native-big-calendar: gcal/outlook lik..

메모앱을 지속적으로 업데이트를 하면서이미지도 복사 붙혀넣기를 해서 넣을 수 있게 했는데 그 과정에서 이미지를 확대해서 보거나 할 수 가 없어서 이미지를 좀 더 상세하게 볼 수 있도록 이미지를 더블클릭하면 새로운 창이 열리면서 이미지를 볼 수 있도록 처리했다.Electron우선 electron의 main process에 새로운 윈도우를 열 수 있도록 sub window를 여는 함수를 만든다.추후에 여러 서브 윈도우를 열 수 있도록 만들려고 하기에 새로 열리는 서브 윈도우들은 map에 담아서 관리 이후 파라미터로 page는 새로 열 윈도우의 경로, resource는 새로 여는 윈도우에 전달할 데이터,타입은 단순히 윈도우를 열것이냐 아니면 단순히 데이터만 전달할 것인지 분기용으로 처리 이후 이미 윈도우가 열려..

현재 react-data-grid를 활용하여 그리드를 만들어 보고 있어서이때 그리드의 행,열 추가 및 삭제 기능을 자식컴포넌트에서 다루는게 편하것같아서 부모쪽에서는 그냥 자식컴포넌트의 함수만 호출 하도록 처리하기 위해forwardRef와 useImperativeHandle을 사용ForwardRef더보기ref 연결한 대상의 인스턴스나 객체를 ref.current에 연결시켜주는 역할을 한다. DOM이면 DOM 객체 연결클래스 컴포넌트면 컴포넌트 인스턴스 연결export default forwardRef(function MetaGrid(props: Props, ref: React.Ref) { return ( )} props는 함수형 컴포넌트에서 전달할 파라미터 타입이고, forwardRef를 사용했기때문..

alert이나 confirm을 직접 커스텀하여 만들려고 하기에직접 커스텀 hook을 만들어서 사용했다. context는 전역 데이터를 전달하기 위한 것이며 provider를 통해 값을 넣어준다.provider는 context에 값을 넣어주는 역할을 하며, provider로 감싼 범위 안에 있는 컴포넌트들이 context에 있는 값에 접근 할 수 있도록 해준다.hook은 provider가 context에 넣은 값을 가져오는 함수 역할을 해준다. Context 데이터를 저장할 context생성alert과 confrim만 사용하기에 alert과 confirm 함수를 받을 수 있도록 타입을 정의import { createContext } from "react";export interface DialogCont..

메모앱을 이제 지속해서 업데이트를 하면서 index DB를 활용해서 데이터를 저장하다보니 막상 데이터를 옮길려면 직접 복붙을 해야하는 상황이어서 백업 파일을 활용해야할 것 같다고 생각들어 기능을 구현 electron 의 dialog를 활용saveBackupMemo: (data) => ipcRenderer.invoke('save-backup', data), ipc 등록파라미터로 데이터를 받아서 데이터 객체를 Json으로 변환한다 이때의 확장자는 원하는 확장자를 선택해서 자유롭게 설정ipcMain.handle('save-backup', async (event,data) => { const today = formatDate(new Date()); const defaultFileName = `yume..