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

✔️ 필요성 파일을 업로드하는 Input 태그에서 제출 버튼을 눌렀는데도 해당 파일 이름이 그대로 남아있는 경우가 있다. 제출 버튼을 누르면 파일이름이 초기화(없어지면)되기를 원한다. ✔️ 문제 확인 useRef를 선택해서 reference 객체를 만들어주고 해당 객체를 input 태그의 ref props에 지정한다. 그리고 제출버튼을 눌렀을 때 ref객체를 초기화하는 onClearInput 함수를 호출한다 // Image Input 값을 초기화 const inputImageRef = useRef(null) const onClearInput = () => { inputImageRef.current.value = '' } // feedback 제출버튼을 클릭했을 때 const onClick = async ..

이미지를 저장할 S3 bucket 만들기 AWS 콘솔에서 검색창에서 S3로 들어간 다음, 버킷 만들기를 누릅니다 버킷 이름과 AWS 리전을 선택합니다 퍼블릭 액세스를 차단하지 하지 않을 것이기 때문에 차단 체크를 풀어주시고 하단의 주의 내용을 읽었다고 체크합니다 버킷을 만들어줍니다 버킷을 만들고 나면 버킷 이름을 눌러봅니다 권한 탭으로 이동합니다 객체 소유권 편집을 누릅니다 ACL을 활성화시킵니다. 중요합니다! 변경사항을 저장한 뒤 아래로 내려와서 CORS를 편집합니다 아래와 같이 편집합니다~ [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "PUT", "POST", "HEAD" ], "AllowedOrigins": [ "*" ], "ExposeHe..

✔️ 필요성 React version 18이 2022년 3월에 출시되면서 기존에 만들고 있던 프로젝트를 React 17에서 18로 업그레이드 했는데, 그 와중에 개발기에서 이상하게 render를 두 번 하는 것이 이상해서 찾아본 내용을 정리해보려고 한다. ✔️ React 18 Strict Mode React 18에서는 추후 React 상태를 유지하면서 UI 섹션을 추가 및 제거할 수 있는 기능을 추가하고 싶습니다. 예를 들어, 사용자가 화면에서 탭으로 뒤로 이동할 때 React는 즉시 이전 화면을 표시할 수 있어야 합니다. 이를 위해 React는 이전과 동일한 구성 요소 상태를 사용하여 트리를 마운트 해제하고 다시 마운트합니다. In the future, we’d like to add a feature ..

polygon이 바뀔때마다 새롭게 1)지도생성 2)폴리콘생성 3)edge맞춤을 하고, cleanUp 함수로 지도를 destroy()하는 useEffect를 만들었다 const tmap = useRef(null) useEffect(() => { console.log('useEffect') tmap.current = new CongestionTmap(37.545555, 127.224, 16) tmap.current.addPolygon(polygon[0]) tmap.current.fitEdge() return () => { console.log('map', tmap.current) console.log('cleanUp') tmap.current.destroy() } }, [polygon]) return ( )..

✔️ 필요성 react로 개발중에 다음과 같은 UNSARE_componentWillMount in strict mode라는 에러가 콘솔창에 등장했다. 정확하게 어디서 에러가 났는지를 자세하게 표기해주지 않아서 매우 답답한 상황이었다. ✔️ 문제 확인 구글링을 해보니 react-helmet과 관련된 에러라는 글이 보였고, 나도 마침 react-helmet을 쓰고 있었다! 타이틀 ✔️ 문제 해결 react-helmet이 아니라 react-helmet-async를 설치하고 아래와 같이 변경해주었더니 문제가 빠르게 해결됐다 :) import { Helmet, HelmetProvider } from 'react-helmet-async' Error

✔️ 필요성 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..