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 : 요청에 걸린 시간자세히 보기 사용하거나..

Application Panel웹 브라우저의 개발자 도구(DevTools) 에서 제공하는 패널 중,웹 어플리케이션의 리소스와 데이터 관리,즉 웹 브라우저가 애플리케이션의 데이터를 저장하고 관리하는 방식을 이해하고이를 디버깅하거나 최적화하는 작업을 의미한다. 이 패널은 웹 앱의 저장소, 네트워크 관련 데이터, 백엔드 통신, 캐싱 정책등을검사하고 관리할 수 있는 강력한 기능을 제공한다. 웹 애플리케이션에서 "리소스"와 "데이터" 리소스 - 애플리케이션을 구성하는 정적 및 동적 파일- HTML, CSS, JavaSciprt파일- 이미자, 비디오, 오디오 파일- 폰트, 아이콘 - API 요청 결과(AJAX 응답 등) 데이터- 애플리케이션이 사용자의 브라우저에 저장하거나 클라이언트-서버 간에 교환하는 정보- 사용..

디스트럭처링 할당(Destrcturing assignment):구조 분해 할당구조화된 배열과 같은 이터러블 또는 객체를 비구조화( 또는 구조 파괴)하여1개 이상의 변수에 개별적으로 할당하는 것을 말한다.배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용36.1 배열 디스트럭처링 할당ES5var arr = [1, 2, 3];var one = arr[0];var two = arr[1];var three = arr[2];console.log(one, two, three); //1, 2, 3 ES6=> 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여 1개 이상의 변수에 할당이때,배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 한다.할당 기준은 배열..

스프레드 문법 (spread syntax): 전개 문법 : ... 은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. ES6에서 도입되었다. 스프레드 문법을 사용할 수 있는 대상: for...of 문으로 순회할 수 있는 이터러블에 한정된다.=> Array, String, Map,Set, DOM 컬렉션(NodeList, HTMLCollection),arguments 스프레드 문법의 결과여러 값들의 값이 중요한 것이 아니라 값들의 목록이 중요하다.스프레드 문법의 결과는 값이 아니다.스프레드 문법 ... 이 피연산자를 연산하여 값을 생성하는 연산자가 아니라는 뜻이다.스프레드 문법의 결과는 변수에 할당 할 수 없다.const list = ...[1, ..

이터러블 하다는 것은  "하나씩 차례대로 꺼낼 수 있다" 라는 뜻이다. 자바스크립트에서는  배열, 문자열, Map, Set 등 과 같은 것들이 이터러블하다.즉 하나씩 순서대로 꺼내 볼 수 있다는 뜻이다. 특징1. 순서대로 꺼낼 수 있다.배열처럼 하나씩 차례대로 꺼낼 수 있다는 것을 말한다.특징2. 특별한 도구가 있다.자바스크립트에서 이터러블한 애들은 Symbol.iterator라는 숨겨진 도구를 가지고 있어서 꺼낼 수 있다. 예시 (for...of)const fruits = ['apple','banana','cherry'];//for...of를 쓰면 이터러블한 것을 하나씩 꺼낼 수 있다.for(const fruit of fruits){ console.log(fruit); //apple, banana, c..

자바스크립트에서 태그 하나를 DOM이라고 한다.그리고 DOM은 각 각 가지고 가지고  있는 속성을 Property라고 한다. 그런  propety 들이 모여있는 것을 가지고 온것을 Props라고 한다. 그래서 props는 태그가 가지고 있는 속성을 이야기한다. 그럼 props를 어떻게 보내고 가지고 올까? 그림으로 먼저 살펴 보자 A라는 사람의 정보를 컨테이너에서 컴포넌트로 보낸다고 생각해보자  그리고 B라는 사람이 있다고 생각해보자. 그럼 컴포넌트를 만들어서또 정보를 바꿔서 보내줘야한다.또 C라는 사람이 있다면? 그래서 차라리 정보를 변수로 전달하는 것이다. 만약에 홍길동이 값이 들어 왔을 때변수가 인식해서 사용자에게 값만 바꿔서 전달하는 것이다. 컴포넌트는 재사용하고 값이 들어온 것을 그대로 보여주자..

리액트 컴포넌트를 생성할 때 마다직접 작성하기 힘들다 이런 상용구를 단축키로 간편하게 만들 수 있는 extension이다.  확장 프로그램 이름은 Reactjs code snippets 제작자가 charalampos karypidis인 것을 설치하면 된다. 단축키를 살펴 보자면 tirggercontentrsc화살표 함수형 컴포넌트 생성rsf함수형 컴포넌트 생성rcc클래스 컴포넌트 생성rrc클래스 컴포넌트와 react-redux 리덕스를 연결하여 생성rcjcimport와 export 없이 클래스 컴포넌트 생성rwwwdimport 없이 클래스 컴포넌트 생성  rsc를 주로 많이 사용한다.! rsc 치고 tab을 누르면 짠하고 나타난다. 단축키의 더 자세한 내용은  Details에서 확인할 수 있다.