나만의 개발 공간

내가 자주 사용하는 엑셀 파일로 다운로드를 하기위해 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와 함께 보냅니다. 쿠키는 도메인에 따라 제한이 됩니다. 유튜브가 준 쿠키는 유튜브에만 보내지게..

비동기 처리 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. 동시에 여러가지 작업을 처리할 수 있고 기다리는 과정에서 다른 함수를 호출할수도 있습니다. 사용 예시) ⇒ Ajax Web API 요청 ⇒ 파일 읽기 ⇒ 암호화/복호화 ⇒ 작업 예약 동기 처리 자바스크립트의 동기처리란 우선순위 작업이 끝날 때까지 기다리는동안 준비상태가 되기 때문에 다른 작업을 할수가 없습니다. 동기 예시 // 동기 function work1() { const start = Date.now(); // Data.now() : 현재 날짜를 숫자 형태로 표시해주는 javascript 내장 함수 for(let i=0; i 동기처리는 순서..