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

요청 URI에 한글이 들어가서 그렇다. encodeURI로 감싸준다 const res = await axios.get( encodeURI( `http://alb-diaas-dev-1190.ap-northeast-2.elb.amazonaws.com:3000/왕십리` ) );

✔️ 필요성 검색창 컴포넌트를 개발했는데 검색창의 외부 영역을 클릭했을 때 아래 검색 결과 창이 없어졌으면 좋겠다. 즉 리액트의 컴포넌트의 외부 영역의 클릭을 감지해서 효과를 줘야 한다. ✔️ 문제 해결 거의 90%는 아래 이 분의 코드를 보고 참고했다. 나중에 내가 기억하기 쉽게 하도록 내 블로그에 기록 https://close-up.tistory.com/entry/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%8A%B9%EC%A0%95-%EC%98%81%EC%97%AD-%EC%99%B8-%ED%81%B4%EB%A6%AD-%EA%B0%90%EC%A7%80 React 컴포넌트 특정 영역 외 클릭 감지 const mymenuRef = useRef(null); funct..

✔️ 필요성 react에서 버튼을 만들었으면 버튼을 눌렀을 때 잠깐 깜빡인다든지 해서 버튼을 누른 것 같은 UI를 만들어야 한다 const Button = styled.button` width: 92px; height: 52px; margin-left: 8px; border-radius: 4px; border: 0px; text-align: center; background-color: ${({ theme }) => theme.colors.grayEa}; `; ✔️ 문제 해결 :active에서 opacity를 낮춰서 눌렀을 때 깜빡이는 효과를 주고, 마우스 커서를 올려두었을 때 커서 이미지가 바뀌는 효과도 함께 부여하자 const Button = styled.button` width: 92px; heig..

✔️ 필요성 MUI에서 AutoComplete SearchInput을 예쁘게 꾸몄는데 스크롤바 디자인이 너무 무식하다 이를 어쩐담 const InputWrapper = styled.div` width: 300px; background-color: "transparent"; border: 0px solid ${({ theme }) => theme.colors.grayD0}; border-bottom-width: 2px; padding: 1px; display: flex; flex-wrap: wrap; &:hover { border-color: "#40a9ff"; } &.focused { &::before { content: ""; display: block; position: absolute; width:..

https://norwayy.tistory.com/m/370 이슈 해결 - Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in Goal - 컴포넌트가 unmount된 후 해당 컴포넌트의 state를 업데이트했을 때 발생하는 이슈 공유 - 해당 이슈 해결 과정 공유 리엑트에서 비동기 동작은 정말 흔하다. 서버에 데이터를 요청하거나, s norwayy.tistory.com useState를 통해서 currentStep과 setStep을 사용하는데, 컴포넌트가 unmounted 되었을 때 setStep()이 동작하면 나타나는 에러이다. mounted라는 변수를 ..

✔️ 필요성 Next.js에서 fusionCharts를 활용한 차트 컴포넌트를 올리니까, 맨 처음에는 차트가 잘 나오는데 새로고침을 누르니까 "Reference Error: document is not defined"라는 에러가 등장한다. ✔️ 문제 확인 문제 원인은 Next.js의 장점인 SSR(Server Side Rendering) 때문인데 https://helloinyong.tistory.com/248 여기 블로그에 이유가 상세하게 잘 나와있다. 웹 페이지를 구성시킬 요소들이 렌더링 및 클라이언트로 로드되기 전에 document에 접근하여 View 요소를 조작하려하니 발생한 문제그러나 이 상태에서 새로고침을 하게 된다면, 서버 렌더링이 동작하게 되어 에러가 발생하게 될 것이고, 이는 서버 렌더링이..

✔️ 상태(recoil)와 상태를 변경하는 cusom-hook 생성 recoil에서 atom 상태를 생성한다음, 상태를 변경하는 custom-hook을 생성한다. import { atom } from "recoil"; import { NavBarTheme } from "../types/common"; export const navBarTheme = atom({ key: "navBarTheme", default: "white", }); import { useEffect } from "react"; import { useRecoilState, useSetRecoilState } from "recoil"; import { navBarTheme } from "../recoil/navBarTheme"; impor..

✔️ 필요성 스토리북은 내가 만든 컴포넌트의 디자인과 간단한 액션을 너무 깔끔하고 쉽게 볼 수 있는 라이브러리이다. 제일 간단한 유형이 아래처럼 사용하는 것이다 import React from "react"; import { ComponentMeta, ComponentStory } from "@storybook/react"; import Tab from "../components/elements/Tab"; export default { title: "element/Tab", component: Tab, } as ComponentMeta; const Template: ComponentStory = (args) => ( ; ) export const TabExample = Template.bind({}); ..

✔️ 현재 URL 가져오기 현재 URL을 가져올 때에는 asPath가 좋다 import { useRouter } from "next/router"; const copyURL = () => { const {asPath} = useRouter(); } ✔️ 문제 확인 그런데 현재 URL을 클립보드에 복사하고 알릴 때에는 아래 코드가 최고다. 아래 블로그를 그대로 사용하였으며 나중에 다시 쓸 때 잊지않기 위해 기록용으로 내 블로그에 포스팅해둔다. // 현재 URL을 클립보드에 복사하고 알림 export const copyURL = () => { let currentUrl = window.document.location.href; let t = document.createElement("textarea"); d..

✔️ 필요성 Next에서 갑자기 아래와 같은 compile 에러가 떴다. 뭐지..? ✔️ 문제 해결 @emotion/is-prop-valid를 설치한 다음에 껐다가 다시 yarn dev하니까 해결됐다! yarn add @emotion/is-prop-valid