나만의 개발 공간

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

비디오 공통 컴포넌트를 작업하다 다른 탭을 클릭해도 이전 탭에 영상 소리가 노출된다는 사실을 알게 됐습니다.이럴 때 사용할 수 있는 웹 페이지 복귀 탐지 이벤트 처리로 이전 탭 영상을 일시 중지 할 수 있습니다.addEventListener("visibilitychange", (event) => {});해당 이벤트는 브라우저 탭의 콘텐츠가 보여지거나 숨겨질 때 발생합니다.// 1번째 방법useEffect(() => { const video = document.querySelector('video'); document.addEventListener('visibilitychange', () => { if (document.visibilityState === "visible") { ..

이전 글(CSV파일 생성)에서부터 이어지는 글입니다.CSV파일로 다운로드하게끔 후 해당 파일을 Excel파일로 변환해서 다운로드 하게끔 코드를 작성해보겠습니다.프론트 부분입니다.이전 글에서 추가 된 부분만 작성했습니다."use client"; // 해당 부분을 작성하지 않으면 에러가 나옵니다!!import { css } from "@emotion/css";import axios from "axios";import { useCallback, useState } from "react";export default function Home() { ... // 엑셀 다운로드 const onClickExcelDownload = useCallback(async () => { try { const r..

입력 값을 받아 CSV파일로 생성 후, 해당 CSV 파일에 정보가 쌓이도록 구현하였다.제가 짠 코드의 node 버전은 v22.13.0입니다.npx create-next-app@latest filetocsv --typescript로 생성했습니다.아래는 package.json입니다.{ "name": "filetocsv", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev --turbopack", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@emotion/css": "^11.13.5", ..

회사에서 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 ..