The Debugging Chronicles : "코드의 미학"

선택 정렬(Selection Sort)은 배열에서 가장 작은 값을 선택하여 순서대로 정렬하는 방법가장 작은 값을 찾아 앞으로 이동하는 방식으로 동작 선택 정렬이 작동하는 방식1. 배열에서 최소값을 찾음 - 현재 정렬되지 않은 부분에서 가장 작은 값을 찾아 첫 번째 위치와 교환2. 두 번째 위치부터 반복- 정렬되지 않은 부분에서 다시 최소값을 찾아 두번째 위치와 교환3. 이 과정을 배열이 완전히 정렬될 때까지 반복 선택 정렬 동작 예시정렬되지 않은 리스트: [5, 3, 8, 4, 2] 첫 번째 패스(가장 작은 값 찾기)[5, 3, 8, 4, 2] → [2, 3, 8, 4, 5] (2가 가장 작아서 5와 교환) 두 번째 패스(두 번째로 작은 값 찾기)[2, 3, 8, 4, 5] → [2, 3, 8, 4, ..

버블 정렬(Bubble Sort)은 인접한 두 요소를 비교하여 교환(Swap)하면서 정렬하는 방식큰 값이 점점 뒤로 (또는 작은 값이 점점 앞으로) 이동하기 때문에, 거품(Bubble)이 올라가는 모습과 유사해서 버블 정렬이라고 불린다. 버블 정렬 동작 방식1. 첫 번째 패스 (pass 1)- 배열의 첫 번째 요소부터 인접한 요소를 비교하며 큰 값을 뒤로 보냄- 한 번의 패스가 끝나면 가장 큰 값이 배열의 끝으로 이동2. 두 번째 패스 (pass2)- 다시 처음부터 비교하되, 마지막 값은 이미 정렬되었으므로 제외- 두 번째로 큰 값이 그 전 위치로 이동3. 반복 수행- 총 (n-1) 번 반복하면 모든 요소가 정렬됨 버블 정렬의 예제배열[5, 3, 8, 4, 2]를 버블로 정렬하는 과정패스비교 과정결과(한..

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..