반응형 프로젝트/코드스테이츠 - 2주프로젝트6 useEffect의 의존성배열로 해결한 useState 비동기문제,프로젝트 9 코드스테이츠 120 카카오맵 지도 클릭-> 마커생성, 클릭한 좌표의 주소를 서버에전송 하는 과정에서 state의 값이 밀리는 현상이 있었다. 예를들면 내가 서울대를 검색했을때, 지도에 우리집이 찍히고 인천공항을 검색했을때 서울대가 찍히는 현상이다. 이는 useState가 비동기적으로 실행되기 때문이다. 함수형 React에서 useState를 동기적으로 사용하기 위해서는 useEffect(()=>{},[])를 사용하면 된다. useEffect(callback,[value]) value가 변경될때마다 callback이 실행된다. 의존성배열에 해당 state를 할당하면, 해당 state가 바뀔때마다 콜백을 실행하기 때문에 개발자의 의도대로 해당 콜백을 실행시킬 수 있다. 자세한 내용은 회고에 기록했다! https://wnsduf.. 2021. 11. 18. 프로젝트 8 코드스테이츠 119 : 카카오맵으로 약속장소 정하기 구현 카카오맵으로 약속장소 정하는 기능 구현 3일이 걸렸다.. 이걸 할 수 있을까 삽질하는건 아닌가 하는 생각이 들었지만 결국 해버렸다. useEffect의 의존성배열에 state를 넣어주니 검색한 장소가 다음 검색타이밍에서 나타나던 버그가 사라졌다. 흥분된다... 간단하다. 지도에 클릭한 지점을 약속장소로 정하는 것이다. 카카오택시에 지도 찍으면 택시기사님한테 나의 위치가 전송되어 만남약속장소가 되는것과 같다. 홈화면에는 내가 거주하고 있는 지역의 모각코가 표시된다. 제천에 사는사람이 제천에 방을 만들면 홈화면 페이지에서 볼 수 있고, 내 모임 페이지에서도 당연히 볼 수 있다. 하지만 제천에 사는 사람이 서울에 방을 만들면 홈화면 페이지에서는 볼 수 없다. 왜냐면 홈화면에서는 같은지역의 모임만 보이기 때문이.. 2021. 11. 17. geolocation으로 현재위치 받고 카카오 API에 넘겨줘서 주소까지 받아오기 카카오 공식홈페이지를 보고 금방 사용할 수 있을 줄 알았지만 리액트에서 사용하는 예시는 나와있지 않아서 구글의 바다를 오랫동안 헤엄치다 겨우 구현했다. '주소 검색하기' 기능인데, 먼저 Geolocation API를 통해 좌표를 얻어낸 후, axios를 사용하여 url 파라미터에 좌표를 입력한 후 get 요청을 보내면 응답으로 현재 주소를 받는다. Geolocation API 구글크롬에서 다음과 같이 위치 액세스를 허용해야 사용할 수 있다. 사용자의 현재 위치를 지도에 표시하거나 위치 기반 개인화 정보 제공, 웹 앱에서 위치 정보를 가져와야 하는 경우 사용한다. Geolocation API는 navigator.geolocation을 통해 접근한다. 이 때, 사용자의 브라우저는 위치 정보 접근 권한을 요청.. 2021. 11. 14. redux-thunk공부, 여전히 모르겠다. 프로젝트 5 코드스테이츠 116 한것 리덕스 미들웨어 공부 리덕스thunk 공부 사이드바 버튼 활성화 로고 누르면 홈으로 이동 Redux thunk 리덕스에서 액션이 객체형태면 곧바로 리듀서로 전달되어 무언가 실행되기 때문에 비동기를 처리할 수 없다. Redux thunk는 액션이 함수타입일 경우 액션은 리듀서에 전달되지 않고 액션에 전달된 함수의 dispatch, getState를 action의 인자로 전달한다. 이로 인해 액션함수 안에서 dispatch나 store상태를 변경하는 액션을 실행시킬 수 있다. => dispatch를 원할 때 호출하는 방식으로 액션함수내에서 비동기 제어 2021. 11. 13. 이전 1 2 다음 반응형
