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

autoComplete와 비슷한데 Table도 MUI에서 제공하는 것을 쓸 까 하다가 왠지 할 수 있을 것 같아서 도전해보았당 나중에 비슷한 거 만들일이 많을 것 같은데 그 때에도 아래 코드 보면서 기억을 더듬더듬 만들어야지 import * as React from "react"; import styled from "@emotion/styled"; const TableContainer = styled.div``; const TableHead = styled.div` width: 100%; grid-template-columns: 1fr 2fr 1fr 3fr; //테이블 컬럼 너비 정하기 background-color: ${({ theme }) => theme.colors.grayEa}; display: ..

기존에 MUI 등에서 제공하는 AutoComplete 라이브러리를 사용하다가, 꾸미기도 생각보다 내 맘대로 안되고 기능을 추가하거나 할 때 너무 불편해서 그냥 이번엔 직접 구현했다. 나중에 비슷한 거 구현할 때마다 다시 쳐다봐야지. import styled from "@emotion/styled"; import React, { useEffect, useRef, useState } from "react"; import classNames from "classnames"; import Text from "../../elements/Text"; import { SearchItem } from "../../../types/common"; export const Container = styled.div` disp..

요청 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라는 변수를 ..

✔️ 상태(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({}); ..

✔️ 필요성 리액트로 개발하는데 이런 에러가 등장했다 ✔️ 문제 확인 이것저것 찾아보니까 React.Fragment를 로 치환하라는 얘기가 나와서 React.Fragment가 뭘까 했는데 이걸 얘기하는거였다. 모든 코드의 을 로 바꿔주니까 문제가 해결됐다! ✔️ 문제 해결 관련코드 첨부 type ObjType = { [index: number]: any; 0: any; 1: any; 2: any; }; const Example: NextPage = () => { const [tabIndex, setTabIndex] = useState(0); const renderPage: ObjType = { 0: ( ), 1: , 2: , }; return ( {renderPage[tabIndex]} ); }; exp..