나만의 개발 공간

내가 자주 사용하는 엑셀 파일로 다운로드를 하기위해 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..

Cookie 쿠키는 사이트를 방문하고 이용할 때 브라우저에 저장되는 내용들입니다. 쿠키를 이용해서 서버는 브라우저에 데이터를 넣을 수 있다. 브라우저에 대한 것을 기억하기 위해 사이트에 방문하면 브라우저는 서버에 요청을 합니다. 즉, 브라우저는 내 컴퓨터에 있으니까 내가 가지고 있는 정보입니다. Browser에서 Server로 request Server에서 Browser로 response response에는 모든 데이터와 본인이 찾던 페이지 정보가 있을텐데 브라우저에 저장하고자 하는 쿠키가 있을 수 있습니다. 본인이 브라우저에 쿠키를 저장한 후 해당 웹사이트에 방문할 때마다 브라우저는 해당 쿠키도 request와 함께 보냅니다. 쿠키는 도메인에 따라 제한이 됩니다. 유튜브가 준 쿠키는 유튜브에만 보내지게..

async & await async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주고, javascript에서 비동기를 처리를 할 때 promise를 더욱 쉽게 사용할 수 있게 해주는 문법입니다. async & await 예제 1. 기본 예제 function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } // async / await 문법을 사용할 때는 함수 앞에 async를 붙여주면 됨 async function process() { console.log('안녕하세요!'); awa..