나만의 개발 공간

현재 회사는 카페24를 사용 중에 있지만, react를 까먹지 않기 위해 react 코드로 구현했습니다.자사몰에 없던 기능을 추가해서 글을 남겨봅니다.export default function Home() { const [currentIndex, setCurrentIndex] = useState(0); const [placeholder, setPlaceholder] = useState(""); useEffect(() => { let charIndex = 0; const typingAnimation = setInterval(() => { const text = placeholders[currentIndex]; if (charIndex clearInterval(..

회사에서 Sns Share를 만들면서 모바일에서 효율적으로 보이기 위해 작업한 부분이다.해당 부분을 회사에서는 타입스크립트로 구현하였으나, 블로그용이니 타입스크립트는 제외했다.import { css } from "@emotion/css";import { useCallback, useRef } from "react";function App() { const bottomSheetRef = useRef(null); const bottomSheetHeaderRef = useRef(null); // 초기값 const bottomSheetContent = useRef({ isSnsShareHeader: false, initial: { height: 0, }, pointerTyp..

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