bloomCode

프로젝트에서 카카오맵을 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..

항해 49일 7주 차를 맞이했다. 예상했던 대로 조금씩 중도포기하시는 분들이 나왔고 조금이라도 내가 도움이 되었으면 했지만 코딩을 처음 접하는 분들에게는 3 달이라는 시간은 정말 짧은 시간인 것 같다. 그런 부분에서 좀 아쉬웠던 것 같다. 이번에 처음 백엔드와 프론트가 만나서 협업하는 프로젝트에서도 뭔가 기술적인 부분에서 욕심을 내다보니 정작 중요한 렌더링이라던지 최적화 코드정리 등등 더 기초적이고 중요한 부분을 정리하지 못해서 아쉬웠다. 하고 싶은것에 대한 욕심에 비해서는 아직 너무 많이 부족한 것 같다는 생각이 든다 https://github.com/miniproject-akijaki/front-akijaki

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

항해 42일 차 12월이 되어서 이제 가을이 마무리될 즈음에 시작했었는데 벌써 눈이 내리고 있다. 이제 슬슬 팀단위로 프로젝트를 만들면서 결과물을 만드는 형식으로 커리큘럼이 진행되고 있다 이번 주에는 프런트엔드분들만 모여서 만든 팀으로 간단하게 CRUD를 할 수 있는 프로젝트를 진행했다. https://attention-diary.vercel.app/ 관종 다이어리 attention-diary.vercel.app vercel 배포 프로그램을 통해 배포를 진행했는데 서버 쪽으로 배포 문제가 있었어 배포하면서 기능 쪽에 문제가 좀 있다. 그래도 좋은 팀원분들 만나서 재미있게 프로젝트 진행했고 그만큼 좋은 결과물이 나와서 너무 뿌듯했다. 이번주에는 백엔드 분들과 팀을 꾸려서 프로젝트를 진행하는데 너무 설레고 ..

동기처리 : 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행 비동기처리 : 요청을 보낸 후 응답에 관계 없이 다음 동작을 실행 비동기처리란? 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 순차적으로 다음 코드를 먼저 실행하는 자바스크립트의 특성(싱글 스레드, 콜스택).클라이언트에서 서버로 데이터를 요청 했을 때, 서버가 그 요청에 대한 응답을 언제 줄지도 모르는데 마냥 기다릴 수 없어 비동기처리가 필요(즉시 처리하지 못하는 이벤트들을 Web API를 이용하여 콜백큐로 보내서 이벤트루프를 통해 콜스택이 비었을 경우 실행) 콜백함수 콜백함수를 사용하는 경우, 연속적으로 비동기 로직을 처리할 때 다음 코드와 같은 **콜백 지옥(Callback hell)**이 발생할 수 있다. setTime..