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

✔️ purge options이 사라졌다 원래 Tailwind V2를 쓸 때에는 tailwind.config.js에서 purge option을 지정해야했는데 V3이 되면서 더이상 purge options을 쓰지 않도록 변경되었다. build 명령어를 실행했을 때 warning이 발생한다. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch ✔️ purge options이 사라졌다 tailwind CSS 공식 문서를 참고하니 purge를 사용하지 않고 content에서 더 잘 사용하면 된다고 한다. Content Configuration - Tailwind CSS Configuring the content sources for your proj..

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

✔️ 필요성 Next.js에서 어떤 버튼을 눌렀을 때 외부 URL에 새 창(new tab)으로 이동하고 싶다. ✔️ 문제 확인 처음에는 next/router의 useRouter를 사용했는데 새 창으로 이동이 안 된다. import { useRouter } from "next/router"; const href = '이동하고자 하는 URL' const router = useRouter(); const onPress = () => { router.push(href); }; 공식 문서를 보니 external URL에는 router.push 보다 window.location이 적절하다고 한다. https://nextjs.org/docs/api-reference/next/router next/router | Ne..

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와 비밀 액세스 키를 다른 곳에 저장해둡니다

✔️ 필요성 파일을 업로드하는 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..

AWS CLI 명령어 구조 버전 알아보기 aws --version 매뉴얼 확인 3가지 방법으로 매뉴얼을 확인 가능하다 aws help aws help aws help 디버그 모드 활성화 aws sts get-caller-identity --debug 현재 자격증명 정보 확인 aws sts get-caller-idenetity