반응형 프로젝트/코드스테이츠 - 4주프로젝트28 새로고침하면 지도가 하얗게 되는 버그 ( +12,+136 문제 : 새로고침 하면 지도가 하얀지도가 나옴 메인페이지에서 위치를 받고 위치를 전역변수에 넣는다. 위치가 필요할때마다 전역변수에서 꺼내쓴다. 새로고침 하면 전역변수가 초기화 된다 유저 좌표가 (0,0)으로 전송된다 하얀지도가 뜬다. 문제의 원인인 3,4 번을 찾느라 이틀간 많은 시간을 보냈다. 물론 local storage에 넣을 수 있지만 유저가 서울에있다가 인천에갔을 경우에도 서울의 위치가 나올것이기 때문에 적절한 해결책이 아니다. 어떻게든 서버의 힘을 빌리지않고 클라이언트에서 할 수 있는 것들은 클라이언트에서 해결하려 했는데, 새로고침 한방에 모든게 물거품이 된다는 사실을 알았다. 해결책 위치를 홈화면에서 받는다. 새로고침 할 때 마다 유저의 위치가 업데이트 되어 지도에 표시된다. 전역변수 아니다.. 2021. 12. 4. 관심사분리에따른 리팩토링, 이미지업로드, 버튼css, top버튼 만든날 ( +11,+135 오늘한것 관심사분리에 따른 리팩토링 어제 팀장님한테 '관심사분리'라는 개념을 배웠다. 위의 생각없이 써질러놓은 코드들을 기능에 맞게 지도, 오른쪽 상자, 제일오른쪽 버튼2개 3묶음으로 리팩토링했다. 폴더는 기능을 기준으로 나뉘어져 있다. styled-component들은 각 폴더의 style.js에 작성하였다. 이미지 업로드하는 모달창 만들기 위로가기 버튼 버튼CSS 버튼누르면 모달창나오게 하려고 버튼에 마우스를 올렸다가 버튼에 꽃혀서 css를 했다. 괜히 시간을 쏟았지만 그래도 css공부를 했다고 생각하겠다. 2021. 12. 3. 새로고침하면 카카오 지도가 하얗게 되는 이유:geolocation으로 좌표를 받아오기 전에 지도가 렌더링되기 때문 오늘 만든 것 클릭하면 페이지 상단으로 가는 TOP버튼 만듬 걍 아래코드를 버튼의 onClick 함수로 넣으면된다. 더보기, 간략히버튼 왼쪽은 styled-component, 오른쪽은 태그, readMoreHandler함수는 더보기버튼,간략히버튼의 onClick함수이다. 버그 카톡지도버그 카톡 주소를 좌표로 변환할 때 기능구현은 되지만 거슬리게 콘솔에 다음과 같은 메시지가 떴다. 자세히 관찰하니 가장 처음에 props로 전달받는 placeAddress 가 빈배열이었다. 따라서 조건문으로 빈배열이 아닐때만 지도에 마커를 표시하는 기능이 실행되도록 조치하였다. const map = new kakao.maps.Map(container, options); let geocoder = new kakao.maps.s.. 2021. 12. 2. grid 속성 통해서 정렬한 날 , 4주프로젝트 +9, 코드스테이츠 133 grid-template-column : repeat(4,1fr) 아래 사진처럼 한줄에 4개씩 내릴수 있다. 첨 html,css 생활코딩에서 배울때 한번보고 그 이후로는 계속 flex만 사용했는데, grid를 많이 사랑해주어야겠다. 2주 프로젝트때 같이 작업했던 팀장님은 grid를 사용하지 않고 js로 배치시킨다고 하는데 그 이유는 grid는 1000개이후로는 정렬이 되지 않는단다. 그쪽팀은 무한스크롤을 구현중인데 그렇게 되면 유한스크롤이 되기 때문에 grid를 사용하지 않기로 했다고 한다. 무한스크롤을 구현하게 되면 꼭 기억해야 할 꿀팁이다. px, rem, em 언제 언제 사용할 지 알고 사용하기 px: 고정값 rem,em : 글자크기를 기준으로한 상대값, 화면크기에 따른 적절한 비율을 고려할때 사용.. 2021. 12. 1. 이전 1 ··· 3 4 5 6 7 다음 반응형
