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

✔️ 필요성 react에서 slack으로 메시지를 보내야하는데 22년 4월 기준으로 최신 방법을 기록해본당. slack incoming webhook은 왜이렇게 방법이 많이 바뀌는건지 구글링해봐도 옛날 글 뿐이다ㅠ ✔️ DOCS https://api.slack.com/messaging/webhooks Sending messages using Incoming Webhooks Creating an Incoming Webhook gives you a unique URL to which you send a JSON payload with the message text and some options. api.slack.com 기본적으로는 여기 DOCS에 나와있는대로 새롭게 Slack App을 만들고, Incomi..

✔️ 필요성 멀쩡하게 react-chartjs-2 패키지로 chart.js 잘 쓰고 있었는데 갑자기 build를 하니 Module not found라면서 에러가 났다. 당황 ✔️ 문제 해결 StackOverflow를 뒤지다보니 npm 말고 yarn으로 설치해보라는 방법이 있어서 믿진 않았지만 해봤는데 됐다. 당황스러운 에러에 당황스러운 해결방법 yarn add react-chartjs-2 chart.js

✔️ 필요성 react-router-dom V6으로 업데이트되면서 RouteComponentsProps를 사용하지 않도록 변경되었다. 이 때 어떻게 변경해야할지 기록 - ✔️ 문제 해결 그 전에는 match와 RouteComponentProps를 활용해서 아래와 같이 사용하고 있었는데 import { RouteComponentProps } from 'react-router-dom' interface MatchParams { id: string } const Example = ({ match }: RouteComponentProps) => { useEffect(() => { const paramId = match.params.id }, [match.params.id]) } 새롭게 생긴 useParams를 ..

✔️ 필요성 React 18은 더이상 react-dom의 render를 사용하지 않고 createRoot를 사용하기를 권장한다. React 18로 업그레이드 했는데도 ReactDOM.render를 사용하고 있으면 콘솔창에 warning이 등장한다 ✔️ 문제 확인 ga-4-react 라이브러리를 함께 사용할 때 createRoot를 어떻게 적용했는지 기록해둔다 이게 기존 코드 import ReactDOM from 'react-dom' import GA4React from 'ga-4-react' const ga4react = new GA4React(process.env.REACT_APP_GA_CODE) ;(async (_) => { await ga4react.initialize() ReactDOM.rende..

페이지 안에 탭이 있고, 탭은 tabIndex라는 상태로 관리된다. url을 통해 페이지로 접속할 때 특정 탭으로 바로 연결되도록 하고 싶다. ✔️ 필요성 페이지 안에 탭이 있고, 탭은 tabIndex라는 상태로 관리된다. url을 통해 페이지로 접속할 때 특정 탭으로 바로 연결되도록 하고 싶다. ✔️ 문제 해결 useRouter()를 통해서 query를 가져오고 query의 tabIndex 값을 받아서 state를 변경해준다 const [tabIndex, setTabIndex] = useState(0); const ref = useRef(null); const { isFallback, query } = useRouter(); useEffect(() => { const { tabIndex } = quer..

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..

https://swr.vercel.app/docs/getting-started Getting Started – SWR For normal RESTful APIs with JSON data, first you need to create a fetcher function, which is just a wrapper of the native fetch: 💡 If you want to use GraphQL API or libs like Axios, you can create your own fetcher function. Check here for more examples swr.vercel.app SWR은 Next.js팀이 만든 데이터 fetching 라이브러리로, 나는 정확하게는 잘 모르지만 react-qu..

Next.js에서 이미지를 사용할 때는 태그를 쓰지말고 next/image의 Image를 사용하라고 권고한다. 이 때 이미지를 비율을 유지하면서 크기를 조절하고 싶을 때는 layout="fill"을 사용하면 된다. import Image from "next/image"; import styled from "@emotion/styled"; const Container = styled.div` width: '100%'; height: '100%'; position: relative; ` 그런데 특히 특정 크기로 줄이고 싶을 때는 그냥 원초적인 방법으로 아래 방법을 사용했다. 원래 이미지의 크기가 624 * 210 이라서 그 비율에 따라서 height를 구해줬다. 너무 원초적인가? 난 되기만 하면 된다. im..

Sample.getInitialProps = async () => { const { data } = await axios.get( encodeURI( `http://alb-diaas-07480.ap-northeast-2.elb.amazonaws.com:3000/왕십리` ) ); return data; }; export async function getServerSideProps() { const data = await axios .get( encodeURI( `http://alb-diaas-07480.ap-northeast-2.elb.amazonaws.com:3000/왕십리` ) ) .then((res) => { console.log("response"); return res.data.data[0]; }..