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

aws-sdk를 써서 직접 S3 bucket에 이미지 파일을 업로드할 수도 있지만 다음과 같이 PresignedURL을 통해서 S3로 이미지를 업로드할 수 있다. import axios from 'axios' const axiosUploadImage = axios.create({ baseURL: 'https://xeeeeesefd.execute-api.ap-northeast-2.amazonaws.com/prod', //임의 }) export { axiosUploadImage } import { Feedback } from 'types/qa' import { axiosUploadImage } from 'utils/axios' type PresignedUrl = { data: { bucket: string ..

// 현재 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-..

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

✔️ 필요성 검색어를 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..

import styled from "@emotion/styled"; const Email = styled(p)` text-decoration: underline; color: blue; `; {`mail@naver.com`}

이제 AWS에서 S3와 IAM 설정이 끝났으니 React에서 코드를 만들어보자. 처음으로 aws-sdk를 프로젝트에 설치해준다 npm install aws-sdk Input 태그에서 type을 'file'로 선택하면 파일을 받을 수 있는데 이 때 accept를 'image/*'로 설정하면 image만 골라서 받을 수 있다. CSS는 tailwindCSS Version3 를 활용했다 interface Props { setImage: any inputRef: any } const InputImage = ({ setImage, inputRef }: Props) => { const handleFileInput = (e: any) => { const file = e.target.files[0] setImage(f..

aws 콘솔에서 사용자 추가를 클릭해서 새로운 사용자를 만들어줍니다 사용자에 S3에 Full Access 할 수 있는 권한을 설정해야합니다. 기존 정책 직접 연결을 클릭한 후 AmazonS3FullAccess 정책을 선택합니다. 태그를 선택하지 않고 사용자를 만들어준 뒤, 가장 중요한 액세스 키 ID와 비밀 액세스 키를 다른 곳에 저장해둡니다