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

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

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

https://dev-jelly.netlify.app/posts/Apply%20Https%20on%20next.js%20when%20development Next.js로 개발 중 HTTPS 적용하기 - DevJelly Next.js로 개발 중 HTTPS 적용하기 가끔 개발을 하다보면 브라우저 제한으로 인해 로컬에서 개발할 때도 HTTPS가 필요할 때가 있다. 전에는 ngrok를 이용했지만 무료 사용으로는 원하는 것들을 다 하기 dev-jelly.netlify.app 위의 블로그를 따라한 것으로 나중에 다시보더라도 제가 좀 더 이해하기 좋은 버전으로 설명을 덧붙였습니다~~~ ✔️ 필요성 로컬로 개발할 때 http가 아니라 https://localhost를 띄우고 싶다! ✔️ openssl 설치 brew i..

nano /usr/local/etc/nginx/nginx.conf https://fgh0296.tistory.com/48 next.js 서버의 reverse proxy 설정하기 nginx 버전은 다음과 같다. 사용 버전 : 1.18.0 버전 확인 방법 : nginx -v 1. vi /etc/nginx/nginx.conf nginx.conf 파일에 들어간다. http { #... server_names_hash_bucket_size 64; #주석해제 #... } 위와 같.. fgh0296.tistory.com https://velog.io/@davelee/mac%EC%97%90-nginx-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0 mac에 nginx 설치하기 우선 brew가 설치되어..