bloomCode

프로젝트에서 이미지 리사이징을 도입하였다. browser-image-compression 라이브러리를 통해 이미지 리사이징을 할 수 있었다 이미지 리사이징 처리를 통해 확연히 이미지 파일의 용량이 달라지는 것을 확인할 수 있었다. 라이트 하우스 측정 이미지 리사이징 전 이미지 리사이징 후 참고 사이트: https://velog.io/@rachaen/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%AC%EB%9F%AC%EC%9E%A5-%EC%98%AC%EB%A0%A4%EC%84%9C-%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0-2 https://velog.io/@gsphyo91/%EC%97%85%EB%A1%9C%EB%93..

프로젝트에서 sns기반의 플랫폼 형식을 띠고 있다 보니 웹 페이지 안에서 많은 영상과 이미지 게시글들의 데이터를 가능한 한 빨리 로딩시키고 ,가져올지 방법에 대한 문제로 AWS에서 제공하는 Cloud Front를 도입하기로 하였다. Cloud Front의 이점 Amazon CloudFront는. html,. css,. js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스입니다. CloudFront는 에지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공합니다. CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 에지 로케이션으로 요청이 라우팅 되므로 가능한 최고의 성능으로 콘텐츠가 제공됩니다. ..

프로젝트에서 가장 애기를 많이 했었던 부분은 "크루(문화예술인)" 유저 권한을 승인해 주고 승인받은 크루유저는 행사에 관련된 게시글을 올릴 수 있는 부분이었다. 결국 그 승인요청을 어디서 받고 처리할 것이며, 어떠한 기준으로 승인을 수락할 것인지 대해서 많은 얘기를 했었던 것 같다. 유저의 인스타나 특별한 활동 영상 이미지, 인스타 등등 많은 방법을 생각해 봤지만 기능적인 부분에서 구현을 못할 것 같다는 결론이 나와서 특별한 기준 없이 관리자가 승인만 해준다면 행사글을 작성할 수 있도록 기능을 구현하였다. 관리자 페이지가 필요하게 되었고 관리자는 백엔드 데이터 베이스에서 ROLE_ADMIN이라는 user_role을 부여받아서 관리자 페이지에 접근가능하게끔 구현하였다. 백엔드에서 받은 userRole을 로..

프로젝트에서 카카오맵을 api를 도입해서 유저가 장소를 입력했을 때 카카오맵에 마커와 함께 장소가 뜨도록 기능을 구현하려고 했다. 하지만 유저가 상세 주소를 입력하지 않으면 카카오맵 마커가 뜨지 않았다. 이부분을 해결하기 위해서 다음 장소 검색 api를 도입함으로써 유저에게 직접 상세주소를 입력받기보다는 주소를 찾을 수 있도록 유도할 수 있게 되었다. 카카오 다음 우편 번호 검색 api https://postcode.map.daum.net/guide

프로젝트에서 카카오맵과 댓글이 같이 있는 페이지 부분에서 댓글을 입력할 때마다 카카오맵 부분이 리렌더링 되는 현상이 발생해서 useEffect를 사용해서 카카오맵을 띄어주는 함수를 useEffect 를 통해 한번만 실행시키는 로직을 작성했다.

프로젝트에서 게시글을 작성하는 부분에서 500 에러와 함께 게시글을 작성할 수가 없었다. 보통 formdata를 백엔드로 보내줄 때에 이미지나, 영상 파일 형식은 네트워크창에서 페이로드로 바이너리 라는 데이터 형식을 네트워크 창에서 확인할 수 있다. 하지만 바이너리라는 문구가 나오지 않고 스트링형식으로 파일이 타입이 보내지고 있어서 그 이유를 분석해 보니 onClick 이벤트에서 데이터를 뽑아오는 과정에서 문제가 있었다. onClick 이벤트를 통해 이미지 파일을 뽑아올 때는 event.target.value 가 아닌 e.target.files [0] 코드로 데이터를 가져와야 하는 걸 확인하지 못한 것 같다.. setEventImage를 할 때 사진과 같이 event.target.files [0] 파일 ..

프로젝트에서 react-query 도입해서 useInfiniteQuery를 사용해 무한스크롤을 구현하는 와중에 스크롤을 내리고 데이터를 한번 더 받아오는 요청 과정에서 페이지가 리렌더링 되면서 스크롤도 다시 맨 위로 올라가는 오류가 있었다. 처음에는 intersection-observer를 사용해서 작성하다 보니 내가 쓴 로직에 문제가 있는 것 같아서 react-intersection-observer를 사용해서 로직을 바꿔보았지만 문제는 해결되지 않았다. 혹시 이전에 데이터와 새로 받아온 데이터를 하나의 배열로 묶어줘야 하는 생각에 flatMap이라는 것도 발견해서 시도를 해보았다. 참고 블로그 : https://velog.io/@movie/react-query-flatMap%EC%9D%84-%EC%82..

프로젝트에서 영상을 보여주는, 유튜브에 쇼츠형식에 view를 보여줘야 하는 부분이 많이 있었다.문제는 html에서 지원하는 iframe 과 video태그에 기본적으로 제공하는 재생버튼이나 음량 버튼이 영상의 사이즈마다 위치가 제각기 다른다는 것이었다. 그래서 Video 관련해서 재생버튼과 음량버튼 프로그레스 바를 직접 만들기로 하였다. 참고 블로그 : https://ideveloper2.dev/blog/2020-06-27--video-tag-react-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-custom-%ED%95%98%EA%B8%B0/ Steady Study ideveloper Front end Developer who steadily study idevelo..

캐러셀, 슬라이드 관련해서 오류가 발생했다. 우리 프로젝트는 캐러셀을 직접 구현다보니 ref를 사용해 DOM의 직접적으로 접근한 후**Element.getBoundingClientRect()**메서드를 사용해서엘리먼트의 크기와 뷰포트 에 상대적인 위치 정보를 ref에 담아준 후 css에 translateX 기능을 이용하여 해당 element가 버튼을 눌르시에 슬라이드 되도록 구현해보았다. 구현하는 도 중 리렌더링 되기전 ref 접근해서 undefined인 elemnet에 접근하다보니 **Element.getBoundingClientRect()**메서드를 사용할 수 없다는 오류가 발생했다. 대충 페이지가 렌더링 되기 전에 ref의 값을 사용하려고 해서 생기는 오류 같았다. 그래서 sreetRef.curre..

서버에 axios 사용해 payload 전달하는 과정 중에 400 에러가 발생했다. 이유를 찾던 도중에 서버와 통신하는 방식이 json일때는 payload가 무조건 json형식, 즉 객체 상태여야 한다. 해당과 같이 서버로 payload를 보낼 때에는 json방식에 맞춰 객체 형태의 key와 value값에 형태여야 한다.