나만의 개발 공간

매번 공식 문서를 보는 것도 중요하지만 자주 쓰는 부분은 문서를 보고 작성하려한다. atom(options) atom은 Recoil의 상태를 표현한다. atom() 함수는 쓰기 가능한 RecoilState 객체를 반환한다. function atom({ key: string, default: T | Promise | RecoilValue, effects_UNSTABLE?: $ReadOnlyArray, dangerouslyAllowMutability?: boolean, }): RecoilState key - 내부적으로 atom을 식벽하는데 사용되는 고유한 문자열. 이 문자열은 어플리케이션 전체에서 다른 atom과 selector에 대해 고유해야 한다. default - atom의 초깃값 또는 Promise ..

mac에서 파일 첨부시 파일명이 ㅎㅏㄴㄱㅡㄹ처럼 나온다면 normalize('NFC') 코드로 처리가 가능하다. fileInput에는 선택한 파일 리스트가 담겨져있다는 가정하 for (let i=0; i

내가 자주 사용하는 엑셀 파일로 다운로드를 하기위해 XLSX와 FileSaver를 다운받아야한다. XLSX는 복잡한 스프레드시트에서 유용한 데이터를 추출하고 새 스프레드시트를 생성하기 위해 검증된 오픈 소스이다. https://www.npmjs.com/package/xlsx xlsx SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 2 months ago. Start using xlsx in your project by running `npm i xlsx`. There are 3060 other projects in the npm registry using xlsx. www.npmjs.com FileSav..

자사 어드민 리팩토링하게 되면서 기존에 형식을 버리고 오픈 소스를 검색한 후 사용하게 된 게 ag-Grid이다. ag-Grid는 자바스크립트 기반의 오픈 소스 그리드이며 무료(커뮤니티)와 상용(엔터프라이즈)버전으로 구분되어 있는데, 상용버전은 서버사이드 랜더링, 엑셀 추출등등 지원을 많이 하지만 유료이므로 무료버전으로도 충분히 구현할 수 있기 때문에 사용하게 됐다. React로 ag-Grid를 사용하는 방법 -> https://www.ag-grid.com/react-data-grid/getting-started/ React Data Grid: Get Started with AG Grid Below we provide code for a simple AG Grid React application. Down..

이미지가 사이즈별로 뿌옇게 보이거나 깨지는 경우가 있다. 고정된 이미지 width, height값에서 사이즈를 조정하려고 해서 발생하는 것같은데 해상도별로 이미지를 다른 사이즈로 보여주고 싶었다. 포토샵을 할 줄 몰라 이미지를 부탁드려서 preview, 2000w, 1800w, 1600w, 1400w, 1200w, 1000w, 860w, 640w으로 각 하나에 해당하는 이미지를 해상도마다 같은 폴더로 저장 시켜서 구현했다. 이미지 폴더를 생성해 아래와 같이 구현하였다. 아래는 실제 코드로 구현한 내용들이다. React로 구현한 코드는 아래와 같다. 도움말 페이지를 아래와 같이 구현하였으며, 간략하게 작성한다. import Layout from '....'; import ExHelpImgPreview fr..

쿠키의 개념이 사라졌다? 여기를 다시 가보도록 하자!! react-cookie react에서 보다 편리하게 cookie를 사용하기 위해 개발된 것같다. react-cookie 시작하기 TERMINAL npm install react-cookie CDN pages폴더 안에 _app.js(_app.tsx)에 CookiesProvider로 전체 컴포넌트를 감싸 쿠키를 사용하는 것을 알려줍니다. import React from 'react'; import App from './App'; import { CookiesProvider } from 'react-cookie'; export default function Root() { return ( ); } userCookies([dependencies]) Reac..