The Debugging Chronicles : "코드의 미학"

2.5주 동안 카카오지도와 씨름하면서 가장 힘들었던 필터링하여 적용하기 2. 화면에 보이는 곳에만 필터링하여 마커 찍기이전 글 참고.https://sweetseonah1004.tistory.com/203화면 반경 내에 마커를 찍었다.하지만 반경이 화면의 크키를 넘어서불필요한 데이터까지 가지고 오고 있었다. 원이 찍그러졌지만R 반지름 값을 중심으로 원의 반경내의 데이터들을 다 가지고 와서 마커를 찍는 다면 너무 많은 불필요한 값들이 오고 있다. 그래서 필터링이 필요했다. 아이디어는getAllFranchises라는 함수에서getFranchiesAll API 로부터 응답값을 받아오고, 받아온 데이터를 상태(setAllList)로 업데이트 한다.  getAllFranchises함수가 쓰여지는 곳 마다 업데이트 ..

약 2.5주 동안 나를 괴롭혔던 카카오 지도에 대해서 포스트해보려고 한다.커스터마이징 하는 게 쉽지 않았고 그리고 정말 많이 배운 카카오지도!1.반경 값 구하기카카오지도에서는화면의 중간 좌표 그리고화면의 우측 상단, 북동쪽 좌표와화면의 좌측 하단, 남서쪽 좌표를 구하는 방법을 제공한다.   그래서 화면 중간 좌표 부터 북동쪽을 기점으로 하는 반지름을 중심으로 반경의 값을 구하려고 했다.  먼저 하버사인 공식을 이용하여 두 좌표간의 거리를 구한 다음에 반경을 구해주었다.next.js와 typescript로 구현하였다./** * * @param lat1 점1 위도 * @param lng1 점1 경도 * @param lat2 점2 위도 * @param lng2 점2 경도 * @returns 위도 경도로 두 점..

1.yarn add global typescript --dev --dev는 프로젝트마다 환경셋팅이 다를 때, 로컬에 설치를 사용하려고 쓰는 것이다.  2.npx tsc --init ECMAScript 기준으로 타입스크립트를 사용할 수 있다는 뜻이다.git init 해주는 것처럼 이제 타입스크립트 쓸꺼야와 같은 이야기tsconfig.json을 이용해서 타입스크립트를 설치한 내용들이 들어간다. 3. 파일을 하나 만들어 보자basic.ts파일을 생성   4.npx tsc -w watch 모드를 사용!한번에  ts를 js로 번역해준다. 5. tslint 타입스크립트의 문법을 검사해주는 패키지를 설치!yarn add tslint --dev- typescript 구문 오류 등 오류 검사를 해주는 패키지 6. 에어비..

업무를 보다가 선임이 " 요청 url이랑 페이로드 모두 알려주세요" 라고 말했는데 무엇을 해야할지 몰라서 벙... 쪄 버렸다.오시더니 개발자도구에서 네트워크 패널을 열고 확인하셨다..그래서 알아보는 네트워크 패널! 네트워크 로그의 각행은 리소스를 나타낸다.기본적으로 리소스는 시간순으로 표시된다.최상위 리소스는 일반적으로 기본 HTML문서! 하단 리소스는 가장 최근에 요청된 리소스이다. 각 열은 리소스에 관한 정보를 나타낸다.- status : HTTP 응답 코드- type : 리소스 유형- initiator : 리소스가 요청된 원인. Initiator열의 링크를 클릭하면 요청을 일으킨 소스 코드로 이동- size : 네트워크를 통해 전송된 리소스의 양- time : 요청에 걸린 시간자세히 보기 사용하거나..