코딩하는라민

Vite import.meta TS Error : ImportMeta 형식에 env 속성이 없습니다.  supabase 의 KEY 를 사용하던 중 env 타입 에러가 발생했다.ImportMeta 형식에 env 속성이 없다는 에러였다.찾아보니 이 문제를 해결하는 다양한 방법이 있었다. 하지만 내 프로젝트에서의 문제는 단순한 파일 경로 문제였다.  다양한 해결 방법들vite-env.d.ts`vite-env.d.ts` 파일에 ImportMeta 인터페이스를 정의한다./// interface ImportMetaEnv { readonly VITE_SUPABASE_KEY: string; readonly VITE_API_KEY: string;}interface ImportMeta { readonly env: I..

styled-components props 에러 (잘못된 prop 이 DOM 으로 전달)  문제상황문제 코드프로젝트에서 임의의 props 를 styled-components 로 전달하고, 스타일링을 하는 작업을 진행하고 있었다.스타일의 적용에는 문제가 없어 계속해서 작업을 하던 도중 우연히 콘솔창을 보게 되었고, 경고 문구와 에러 메시지를 마주하게 되었다.for (let date = 1; date ✅ {date} )}const TableItems = styled.td` background-color: ${({ today, theme }) => today ? theme.gray.gray_100 : 'none'}; font-weight: ${({ today }) => (today..

'React' must be in scope when using JSX 에러 새 프로젝트를 생성했는데 JSX 태그에 ESLint 에서 에러가 생겼다. `'React' must be in scope when using JSX` `React v17` 버전부터는 이전과는 달리 React 를 컴파일 시 자동으로 가져온다. 따라서 모든 파일에서 React 를 가져올 필요가 없어졌다. 컴파일 전 function App() { return Hi there!; } 컴파일 후 컴파일 후 자동으로 React 를 가져옵니다. function App() { return React.createElement('div', null, 'Hi there!'); } 오류를 해결하기 앞서 package.json 파일에 react 와 re..

[Refact/웹접근성] input file 요소에 잘못된 커스터마이징으로 스크린리더에서 읽을 수 없던 문제 개선하기 지난 프로젝트에서 파일 업로드를 하기 위해 input type file 부분을 커스터마이징했다. 그러는 과정에서 input 요소에 display: none; 을 적용했고, label 요소의 background 로 원하는 이미지를 적용해주었다. 하지만 이런 방법은 tabindex 가 적용되지 않을 뿐더러 스크린리더가 해당 요소를 잡지 못하는 문제점이 발생했다. 이렇게 된다면 웹접근성을 고려하지 않는 방법이라 수정하는 게 좋다는 피드백을 받았다. 📌 접근 가능한 숨김 텍스트 🚫 내가 사용한 잘못된 방법 input{ disaply: none; } 못생긴 input file 의 기존 디자인을 숨..

[React/Project] firebase 데이터 무한 렌더링으로 용량 초과 문제 발생 📌 문제상황 useEffect(()=>{ ... }, [Arr]) Arr 에 해당하는 부분은 Firebase 에서 데이터를 가져와서 확인하는 부분이었다. Arr 를 useEffect 의 두번째 인자값으로 전달해서 Arr 이 변경될 때마다 useEffect 내부의 함수가 재렌더링 되도록 해준 것이었다. 계속해서 서버로부터 요청을 전송하게 되고 그럴 때마다 리렌더링 되는 바람에 무한 리렌더링의 늪에 빠져버렸다. 머지된 main 브랜치를 pull 받아서 실행해보니 데이터가 불러와지지 않았고, 오류의 숫자는 미친듯이 올라가고 있었다. 이게 무슨 상황인지 어버버 하다가 오류의 숫자가 4천이 넘도록 창을 끄지 않았는데 그 이유..

[React/Project] 이미지 압축해서 업로드하기 (with browser-image-compression 라이브러리) 📌 browser-image-compression 란? browser-image-compression 은 이미지 압축을 위한 자바스크립트 모듈이다. 이 모듈을 사용하면 프로그램 서버에 업로드하기 전 해상도나 저장 용량을 줄여 대역폭을 절약할 수 있다. 📌 사용하게 된 배경 Firebase 용량 이슈 이후 팀원들과 함께 서버에 전송하기 위한 데이터를 최적화하기 위한 작업을 시작했다. 로그인 시 프로필 사진 업로드하고 불러오기, 게시글 작성 시 프리뷰 이미지와 서버로 전송하는 이미지에 대해 해당 라이브러리를 적용해서 최적화를 진행했다. 📌 설치하기 npm install browser-..

[React/Project] Recoil Persist 를 사용해 로컬스토리지에 데이터 저장/불러오기 📌 사용하게 된 배경 ✅ Recoil 사용하게된 이유 더보기 Recoil 을 사용해서 로그인 시 토큰과 유저 정보들을 가져와서 전역에서 사용했다. 게시글 작성 페이지는 로그인 시에만 접근이 가능하도록 했으며, 게시글을 작성 / 수정할 경우 해당 유저 데이터를 서버로부터 받아와서 게시글에 해당 정보를 불러와서 게시글을 분류했다. 게시글 수정을 할 경우에는 로그인된 유저의 데이터와 게시글 작성자의 유저 정보와 일치할 경우 수정 / 삭제 버튼이 렌더링 되도록 했다. 또한 수정 버튼을 클릭하면 해당 게시글의 작성자 정보와 게시글 정보를 가져와 바뀐 내용으로 대체해주었다. ✅ Recoil 사용하다가 겪은 문제점 ..

[React/Project] input 으로 업로드한 여러 개의 이미지 하나씩 삭제하기 📌 업로드한 여러개의 이미지 개별 삭제하기 ✅ 삭제 버튼을 만들어준다. ✅ 버튼에 클릭 이벤트를 걸어준다. ✅ 이렇게 클릭 이벤트를 걸어주면 이미지 전체가 지워진다. function removeImg() { setPostImg([]); setPreviewImg([]); } 단순히 이렇게해서 상태를 초기화한다면, 어떤 x 버튼을 눌러도 업로드된 이미지가 모두 제거될 것이다. 그렇다면 내가 누른 버튼의 index 를 파악해서 그 index에 해당하는 파일의 index 번째 파일을 지워야할 것. ✅ 매개변수에 index 를 넣어주고, 파일과 파일 url 을 전개해 변수에 넣어준다. function removeImg(inde..

[React/Project] input 파일 이미지 업로드 & 미리보기(Preview) 기능 구현(다중 이미지) 📌 단일 이미지 업로드 및 프리뷰 구현 [React/Project] input 파일 이미지 업로드 & 미리보기(Preview) 기능 구현(단일 이미지) [React/Project] input 파일 이미지 업로드 & 미리보기(Preview) 기능 구현(단일 이미지) 이미지 업로드하고 프리뷰를 하는 여러 블로그들을 서칭하고, 적용해보았다. 이미지 1개 업로드하는 것은 성공했 ramincoding.tistory.com 📌 파일 업로드하는 코드(다중 이미지) 다중 이미지를 업로드하기 위해서는 반복문을 사용해야한다. 파일을 업로드하면 files 에 여러개의 파일 데이터가 들어올 것이고, 이를 배열로 만..

[React/Project] input 파일 이미지 업로드 & 미리보기(Preview) 기능 구현(단일 이미지) 이미지 업로드하고 프리뷰를 하는 여러 블로그들을 서칭하고, 적용해보았다. 이미지 1개 업로드하는 것은 성공했는데 여러 이미지를 업로드하는 것은 성공하지 못했다. 그러던 중 하나의 블로그를 발견했고 겨우 성공할 수 있었다. [리액트] 이미지 여러장 올려서 확인하기 게시물 사진을 고를 때 보통 프리뷰를 보여주기 때문에 구현을 하기로 했다.포스팅 페이지 uploadPost.jsx이미지들을 보여주는 images.jsx우선 파일을 받기 위해서 input태그를 만들어 줬습니다.그리고 velog.io 물론 버튼을 개별적으로 지우는 것은 이 블로그를 보고 성공하지 못했다.. 결국 그분의 도움을.. ha ha..