나만의 개발 공간

현재 회사는 카페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..

매번 공식 문서를 보는 것도 중요하지만 자주 쓰는 부분은 문서를 보고 작성하려한다. 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..