에바니네

S3 + Multer를 이용한 Image Upload

현재 MERN 프로젝트에서는 Image를 multer를 이용해서 local에 직접 이미지를 저장해서 사용하고 있었습니다. 하지만 이렇게 하다보니까 문제가 생겼습니다. 배포된 서버에서 이미지를 처음에 올리고 나서는 괜찮았지만 다음번에 접속하면 해당 이미지파일이 사라졌는지 모르겠지만 제대로 이미지를 보내주지 않더군요. 그리고 제가 알기로는 이상적으로 이미지를 관리하려면 따로 이미지만 다루는 스토리지를 구축하고 DB에서는 해당 이미지에 대한 full path를 제공하는거라고 알고 있습니다. 일단 S3 Bucket을 만들어야합니다. 이와 같이 체크할 거 체크해주고, 버킷만들어줍니다. IAM 에서 사용자 추가를 해줍니다. 접근을 하기위해서 엑세스 ID랑 비밀 엑세스 ID를 가져야하거든요. S3 Bucket으로 가..

Google Maps 관련 API 사용기

https://developers.google.com/maps/documentation/javascript/?hl=ko  Google Maps Platform 문서  |  Maps JavaScript API  |  Google DevelopersGoogle Maps Platform 문서developers.google.com 일단 먼저 링크로 들어갑니다.  일단 저기서 천천히 따라하시면 됩니다. 근데 일단 빠르게 진행을 해보려면    index.html에 아래 코드를 넣어줍니다. 그리고 저기 src에 API를 추가해줘야하는데 React를 사용하실때 환경변수를 통해 HTML에서 사용하고 싶으면 저렇게%환경변수 이름%을 추가하면 된다고 하더라구요.   https://stackoverflow.com/questi..

에러 - validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

테일윈드를 찬찬히 적용해보면서 마주친 에러이다. 뭐 바꾸면서 에러난게 아니고 내가 진작에 코드를 잘못 작성한거같은 문제였던것 같다. https://github.com/aichbauer/styled-bootstrap-components/issues/29 Warning: validateDOMNesting(...): cannot appear as a descendant of . · Issue #29 · aichbauer/styled-bootstrap I wrapped a component that is by another component. Essentially a StyledButton within a Button. const StyledButton = styled(Button) Below is Conso..

에러 - Do not use 'new' for side effects.

아래와 같이 나는 구글맵 창을 뛰울때 useEffect에서 Map 과 Marker의 인스턴스를 생성해서 사용하는 걸 볼 수 있는데, 이때 위에서 생성한 맵객체를 마커 인스턴스를 생성할 때 사용해서 에러가 없지만 https://runebook.dev/ko/docs/eslint/rules/no-new ESLint - no-new 할당 비교 외부에서 새 연산자를 허용하지 않음 생성자와 함께 new를 사용하는 목표 생성자와 함께 new 를 사용하는 목표 는 일반적으로 특정 유형의 객체를 만들고 해당 객체를 변수에 다음과 같이 저장하는 것입니다. new 를 사용 하고 결과를 저장하지 않는 것은 덜 일반적입니 runebook.dev 마커 인스턴스를 변수에 할당을 하면 해당 변수를 사용하는 코드가 없기때문에, 이런식..

에러 - Visible, non-interactive elements with click handlers must have at least one keyboard listener.

내가 하는 MERN에서는 portal을 통해 modal창과 backdrop이 각각존재한다. 그래서 backdrop 같은 경우는 모달 외 다른 영역이니까 클릭하면 그 창이 꺼지는 기능을 하는데, 여기서 ES-Lint 에러가 났다. 한번 읽어보자 Visible, non-interactive elements with click handlers must have at least one keyboard listener. 가시적인, 클릭 핸들러가 있는 비-상호작용 요소는 최소 한개 이상의 키보드 리스너를 갖고 있어야한다. Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and supp..

에러 - Type null is not assignable to type T.ts(2345)

Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment'.ts(2345) 원래 에러의 모든 메세지는 이런식이였다. 마이그레이션 하다보니 또 index.tsx 파일에서 root로 render해주는 함수에 이런 에러가 나왔다. 나랑 똑같은 에러를 받은 분을 쉽게 찾을 수 있었다. https://stackoverflow.com/questions/63520680/argument-of-type-htmlelement-null-is-not-assignable-to-p..

에러 - Unexpected empty mothod ??

통 JS 프로젝트를 이제 TS로 바꾸는 과정에서 이제 no-empty-function에 위반되었다고 저렇게 에러가 띄어진다. https://runebook.dev/ko/docs/eslint/rules/no-empty-function ESLint - no-empty-function 빈 함수 허용 안 함 빈 함수는 의도한 것인지 아닌지 독자가 추측해야 하므 빈 함수는 독자가 의도한 것인지 아닌지 추측해야 하기 때문에 가독성을 떨어뜨릴 수 있습니다. 따라서 빈 함수에 대해 명확한 주석을 작성하는 것은 좋은 습관입니다. 특히 화살표 함수의 빈 runebook.dev https://stackoverflow.com/questions/31605781/why-do-tslint-and-jslint-report-empty..

React Code splitting

MERN 프로젝트를 해보던중 코드 스플리팅이란 개념을 맞닥드렸다.. 이게 무엇인가? Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel. 코드 분할(code spliting)은 코드를 다양한 번들이나 컴포넌트로 분할하여 필요에 따라 로드하거나 병렬로 로드하는 것을 말한다. As an application grows in complexity or is maintained, CSS and JavaScripts files or bundles grow in byte size, especially as the number and size of ..