Frontend (278) 썸네일형 리스트형 About convention & refactoring After the meeting with the public health center, I've decided to restructure and refactor our project.There are plenty of useless files in my project, and I'm not confident that the new worker, who I have to pass down the project to, will easily understand what I've coded so far.I SHOULD HAVE DONE this 6 months ago, but at that time, I was still a junior, so I couldn't do it.I know it will be ha.. TIL 24.06.14 react-dropzone & FormData 데이터 전송 구현 기능내가 구현해야 할 기능은 드래그앤 드롭으로 사진을 첨부하는 기능과 이 사진데이터들을 서버로 보내주는 기능이었다. 드래그앤 드롭 사진첨부 기능- 이미지 파일 업로드- 무슨 이미지를 올렸는지 확인할 수 있는 thumbnail- 올리는 이미지 갯수 제한- 올리는 이미지 용량 제한 formData 형태로 서버에 전송하는 기능- 업로드 된 이미지를 formData 형태로 변경하기- content-type을 설정해주고 서버로 데이터 알맞게 전송하기 1. 드래그앤 드롭 사진첨부 기능 이미지 파일 업로드이 기능은 javascript 에서 구현해본 경험이 있었다. 그당시에는 라이브러리를 사용하지 않고 구현했는데, react 에서 제공하는 react-dropzone 을 사용해보기로 하였다. 우선 라이브러리를.. TIL 24.05.14 react-query refetchOnWindowFocus 옵션 https://tanstack.com/query/v4/docs/framework/react/guides/window-focus-refetching Window Focus Refetching | TanStack Query React DocsIf a user leaves your application and returns and the query data is stale, TanStack Query automatically requests fresh data for you in the background. You can disable this globally or per-query using the refetchOnWindowFocus option: Disabling Globally // ctanstack... TIL 24.04.24 System limit for number of file watchers reached 에러 1. 문제점 이번에도 기능 구현 후 빌드를 했다. 빌드과정에서 문제는 없어보였는데 배포한 사이트에 접속해보니 502 bad gateway 가 떴음. 이번에는 무슨 일인가 싶어 서버로그를 확인했는데 Error: System limit for number of file watchers reached ... 에러가 발생하였다. 이후에 파일경로가 있길래 그 파일은 건드리지도 않고 빌드했는데 대체 무슨문제인가 해서 구글 검색을 해보았다. 2. 해결방안 React 처럼 프론트엔드 개발환경에서는 많은 수의 파일감시자가 필요한데, 이 한도를 초과했기 때문에 발생하는 에러라고 한다. 개발을 너무 열심히 하다보면 날 수있다는 에러인데 정말인가 https://github.com/gatsbyjs/gatsby/issues/11.. TIL 24.04.23 TAR_ENTRY_INVALID checksum 에러 1. 문제점 여느날과 같이 npm install 패키지 해서 다운받으려고 보니까 갑자기 에러남. 그냥 라이브러리 에러인줄 알고 별일 아니겠거니 하고 무시했음. 근데 이러고 product 에 올렸는데 빌드중에 에러가 나는 것임 퇴근 10분전에 난 에러라서 더 당황스러웠음 2. 시도해본 것 일단 빌드중에 난 에러라 여기 찍힌거 다 해봤음 npm 다시 최신버전으로도 설치해보고 npm install@latest 캐시가 꼬인 문제라서 캐시를 삭제하면 된다고 하길래 캐시도 지워봄 npm cache verify 다 안됨 3. 해결방안 백엔드분께서 로그확인 해보라고 하셨는데 정답은 생각보다 간단했음 ... 네이버 api 써본다고 프론트단에서 임시로 proxy 를 package.json 에 추가했었는데 그 다음줄에 추가.. TIL 24.04.12 Typescript 타입 에러 무시하기 1. 문제점 타입 스크립트 작업 중, 모듈을 찾을 수 없다고 import 하는데 계속에러가 생겼다. import { encryptTransform } from "redux-persist-transform-encrypt"; 2. 시도해본 것 그래서 해당 타입을 다운받았는데 뭔가 충돌이 생긴건지 제대로 먹히지가 않았다. 그래서 지우고 다시 설치했는데도 같은문제가 반복됨 yarn add redux-persist-transform-encrypt @types/redux-persist-transform-encrypt 3. 해결방안 타입무시하는 명령어가 있어서 사용했다. 해당 주석 기준 다음줄의 타입을 무시해준다. //@ts-ignore import { encryptTransform } from "redux-pers.. TIL 24.04.03 geolocation 위치 권한 요청 1. 문제점 기본적으로 로컬 개발환경이거나 https 를 달지 않으면 http 에서는 사용자의 위치를 불러올 수 없다. 정식적으로 https 로 연결을 마친 상태였는데 위의 경고는 뜨지 않으나, 위치 권한을 요청하는 알람이 안 뜸. 페이지 설정에 들어가서 바꿔줄 수 있지만 사용자 입장에서 위치 권한 알림이 자동으로 뜨지 않으면 불편할 것이다. 2. 시도해본 것 처음에는 페이지 설정 > 위치에 들어가서 설정을 변경해주었다. 허용을 하면 내 위치를 불러오고, 요청(기본값)을 설정하면 다음과 같이 권한을 요청한다. 그러나 매번 사용자가 페이지 설정을 눌러서 이 권한을 설정해 줄 수도 없고, 페이지에 들어가면 기본적으로 물어봐야 된다. 3. 해결방안 Navigator 객체는 다양한 프로퍼티를 가지고 있는데 이중.. TIL 23.04.02 Kakao Map 줌 인 아웃 마커 중복 에러 1. 문제점 기존에 카카오맵을 불러오는 방식은 다음과 같았다. 이렇게 되니 기존에 있던 마커리스트를 지워주는 코드를 작성하지 않아도 마커리스트가 변경돼면, 알아서 스크립트가 새로 로드되면서 굳이 사용할 필요가 없었다. useEffect(()=> { 1. 카카오지도 스크립트 로드하는 코드 2. 마커리스트 변경됐을때 실행할 코드 },[마커리스트]) 그러나 위 코드는 다음과같은 문제가 있었다. 지도 객체가 중복해서 로드되므로 줌 인, 줌 아웃 할때마다 전에 로드됐던 마커리스트들이 힐끔힐끔 보이는 단점이 있었다. 2. 시도해본 것 카카오 dev talk 에 나랑 같은 문제점을 가진 사람들을 찾아보니 지도 객체가 중복로드돼서 이런 버그가 발생한다고 해서 지도 로드 코드는 최초 한번만 실행한 후, 이후 마커리스트가.. 이전 1 2 3 4 ··· 35 다음
