어리둥절 분석가 그리고 개발자

// 현재 URL을 클립보드에 복사하고 알림 export const copyCurrentURL = () => { let currentUrl = window.document.location.href; let t = document.createElement("textarea"); document.body.appendChild(t); t.value = currentUrl; t.select(); document.execCommand("copy"); document.body.removeChild(t); alert("링크가 복사되었습니다."); }; import styled from "@emotion/styled"; import classNames from "classnames"; import { theme } f..

✔️ 필요성 react에서 Emoji를 Text처럼 사용했는데 Mac Safari에서는 의도했던 이모지가 보이는데 Window Chrome에서는 의도했던 이모지가 보이지 않는 현상이 나타났다 ✔️ 문제 확인 기존 코드는 아래와 같이 사용했었다. import React from "react"; import styled from "@emotion/styled"; const Container = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 80px 0px 100px 0px; ` const Emoji = styled.p` margin-..

텍스트가 지정된 너비보다 길때 말줄임표(...)을 쓰고 싶을 때가 있다. 이 때 핵심이 되는 CSS는 text-overflow, overflow, white-space를 아래처럼 지정해주는 것이다. 주의할 것은 width가 별도의 값을 가지고 있어야 한다. 만약 별도의 값을 지정해주기 어렵다면 아래처럼 -webkit-fill-available을 사용하는 것도 좋다. import * as React from "react"; import styled from "@emotion/styled"; const TableCell = styled.div` display: block; width: -webkit-fill-available; padding-left: 20px; text-overflow: ellipsis; ..

react-scripts 패키지를 다시 설치했더니 갑자기 무슨 outside of the src 에서 import 한다고 에러창이 난리가 났다 npx sb upgrade --prerelease 이걸 설치해주니까 해결됐다! https://github.com/storybookjs/storybook/issues/17049 Module not found: Error: You attempted to import /node_modules/react-refresh/runtime.js which falls outside of the project src/ Describe the bug related to the new RCA 5 using @storybook/react: 6.4.9 im getting this prob..

따로따로 요청하던 것을 Promise.all 을 통해서 병렬로 요청하려고 합니다. 이것이 원래 코드 const sevenDays = ['20220101', '20220202', '20220103', '20220104', ..., '20220107'] const data0 = await axiosUtil.get(`/congestion/${poiId}?date=${sevenDays[0]}`) const data1 = await axiosUtil.get(`/congestion/${poiId}?date=${sevenDays[1]}`) const data2 = await axiosUtil.get(`/congestion/${poiId}?date=${sevenDays[2]}`) const data3 = await a..

✔️ 필요성 Tailwind로 개발한 프로젝트에서 다음과 같은 에러가 발생하고 접속 속도가 엄청나게 오래 걸렸습니다. cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS confi..

✔️ purge options이 사라졌다 원래 Tailwind V2를 쓸 때에는 tailwind.config.js에서 purge option을 지정해야했는데 V3이 되면서 더이상 purge options을 쓰지 않도록 변경되었다. build 명령어를 실행했을 때 warning이 발생한다. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch ✔️ purge options이 사라졌다 tailwind CSS 공식 문서를 참고하니 purge를 사용하지 않고 content에서 더 잘 사용하면 된다고 한다. Content Configuration - Tailwind CSS Configuring the content sources for your proj..

✔️ 필요성 검색어를 API에 호출해서 결과를 가져오고 싶다. 그런데 검색어를 한글자씩 바꿀때마다 API를 계속 호출하는 것은 원하지 않는다. 어느정도 글자가 정지했을 때 한 번만 API 호출하고 싶다. debounce와 useMemo를 활용해서 아래와 같이 searchText를 변경한다. 검색창에 등장하는 단어인 query는 debounce를 적용하지 않아서 변경 즉시 값이 바뀌도록하고, searchText는 debounce를 적용한다. import React, { useEffect, useRef, useState, useMemo } from "react"; import { debounce } from "lodash"; const DEBOUNCE_TIME = 500; const SearchInput =..

✔️ 필요성 axios Error code에 따라서 프론트엔드에서 다르게 처리하고 싶을 때가 있다. ✔️ 문제 확인 원래 코드는 아래와 같은데 API 리턴했을 때 에러 코드가 500이 나와도 그냥 지나갔으면 좋겠다 import axios from 'axios' const axiosUtil = axios.create({ baseURL: process.env.BASE_URL, }) const result = await axiosUtil.get(`api-url`) ✔️ 문제 해결 status에 대한 function을 만들어서 validateStatus 옵션으로 지정해준다. 아래 코드는 error code가 600 미만일 때에는 그냥 넘어간다 import axios from 'axios' const validC..

✔️ 필요성 Next.js에서 어떤 버튼을 눌렀을 때 외부 URL에 새 창(new tab)으로 이동하고 싶다. ✔️ 문제 확인 처음에는 next/router의 useRouter를 사용했는데 새 창으로 이동이 안 된다. import { useRouter } from "next/router"; const href = '이동하고자 하는 URL' const router = useRouter(); const onPress = () => { router.push(href); }; 공식 문서를 보니 external URL에는 router.push 보다 window.location이 적절하다고 한다. https://nextjs.org/docs/api-reference/next/router next/router | Ne..