철스커의 멀티 저장소

요구사항 ✏️실무에서 요구사항이 다음과 같았습니다."지도에서 특정한 매장만 보이도록 지도를 줌인/줌아웃 할 수 없나요?" 일단... 고민거리가 많이 생겼습니다.유저가 지도의 줌인을 많이 했을 수도 있고,반대로 지도의 줌아웃을 많이 했을 수도 있습니다. 유저의 지도레벨은 유저마다 다르다 😵‍💫카카오맵에서 지도를 확대/축소할 수 정도를 지도레벨이라고 표현하고 있는데요. - 지도레벨이 13이라면, 특정한 매장만 보이게 지도레벨을 얼만큼 줌인해야 할지..?- 지도레벨이 5정도라면, 지도레벨을 얼만큼 줌아웃해야 할지...? 판단하기 어렵습니다. 유저가 보고 있는 지도의 레벨이 얼마인지도 모르고,얼만큼 줌인해야할지, 얼만큼 줌아웃해야할지 모릅니다. 케이스가 다양해서 복잡하다 🔁또, 매장의 갯수..

서론사이드 프로젝트에서 카카오톡 공유하기 기능을 구현해야 하는 경우가 생겼는데, 경험을 기록해둡니다.어떤 UI (버튼, 이미지) 를 클릭하면, 카카오톡 API를 통해 카카오톡 앱이 열리고 친구에게 메시지를 공유할 수 있는데요.  API를 호출할 때, 특정 정보를 전달하고 이 정보를 메시지 링크에 붙여줍니다.메시지 링크가 열리면 저희 서비스로 이동해서, 서비스에서 이 정보로 특정 액션을 할 수 있습니다.   카카오톡 공유하기 플로우      카카오톡 공유하기 API카카오에 대한 타입정의가 없기 때문에, kakao.d.ts 파일을 만들어 다음과 같은 타입정의를 하였습니다.kakao.d.ts는 tsconfig.json에서 넣어줘서 컴파일러가 타입을 정의할 수 있도록 했습니다.  // kakao.d.ts/** ..

정리하는 이유 실무에서 사용하거나 알고리즘 테스트를 볼 때, 매번 정규표현식 사용법을 까먹어서 다시 구글링을 하는 경우가 많습니다. 정규표현식 사용법을 찾기 위한 시간적인 비용을 줄이기 위해 자주 사용되는 패턴을 정리해보았습니다. 정규표현식의 정의 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 (formal language). 위의 정의는 표현이 어렵게 되어 있는데, 쉽게 말해서 문자열에서 특정 패턴을 찾아서 검색, 치환 등의 작업을 처리할 수 있는 방법이라고 생각하면 될 것 같습니다. 정규표현식과 관련된 자바스크립트 Prototype 메서드 1. RegExp.prototype.xxx - exec : 패턴에 매칭되는 문자들을 배열로 반환, 매칭하지 않으면 null 반환 - test..

프론트엔드 개발을 하다 보면 정말 많이 들어본 개념일 것입니다.무의미하게 무수하게 발생하는 이벤트를 막기 위한 기법들입니다.타이머 함수, setTimeout을 통해서 간단하게 구현할 수 있습니다.  쓰로틀링(Throttle)throttle은 영어로 조르다, 목을 조르다라는 의미를 가지고 있습니다.이벤트의 목을 조른다(?)라고 볼 수 있는데요.이벤트가 무수하게 발생하더라도, 일정 시간 동안 이벤트가 1번만 발생하도록 처리하는 것을 의미합니다.스크롤 이벤트에 쓰로틀링을 적용해서 이벤트 최적화를 해볼 수 있는데요.스크롤을 할 때 최적화하지 않으면, 이벤트가 무수히 많이 발생하기 때문입니다.  한 개의 버튼이 있고, 이 버튼을 누르면 로그인 기능이 동작한다고 가정해볼까요?클릭방지를 하지 않는다면 유저가 버튼을 ..

1.  2차원 배열을 순회하는 함수// 반복문 이용function traverse2dArray(arr, ROW, COLUMN) { for (let i = 0; i { let row = ""; rowArray.forEach((column) => { row += column + " "; }); console.log(row); });} 2가지 버전을 구현해봤습니다.하나는 반복문을 이용해서 2차원 배열을 순회하고,다른 하나는 forEach를 이용해서 2차원 배열을 순회합니다.   2.  초기값을 이용하기2-1.  배열에 초기값 전달이번 포스팅에서는 4X3 2차원 배열을 만들어보도록 하겠습니다.const arr = [ [1, 2, 3], [4, 5, 6], [7, 8, 9..

목차 1. 함수 선언문 2. 함수 표현식 3. 함수 프로퍼티 4. 참고 1. 함수 선언문 function isHoliday(work) { if (work) { return false; } return true; } 많이 사용하는 함수 선언 방식 중 하나입니다. 주요 특징으로는 다음과 같은 것들이 있습니다. 함수를 참조하는 식별자가 생성됩니다. 함수 호이스팅이 발생합니다. 함수(함수 객체) 프로퍼티를 가지고 있다. 함수 호이스팅이란, 호이스팅(hoisting)이란 말처럼 함수가 위로 끌어 올려지는 것을 말하는데요. 자바스크립트에서 런타임 이전에 함수를 미리 생성하기 때문에, 함수가 선언된 스코프에서 언제든지 실행할 수 있습니다. 함수 선언 전에 함수를 실행할 수 있습니다. isHoliday(false); ..

const arr = [1, 2, 3, 4, 5]; // 1부터 5까지 출력 for(let idx=0; i { console.log(value); }); forEach 메소드는 콜백 함수를 받는데요. 첫번째 파라미터로부터 배열의 값을 차례대로 받아올 수 있습니다. const arr = [1, 2, 3, 4, 5]; // 배열의 값과 인덱스를 차례대로 출력 arr.forEach((value, index) => { console.log(value); // 배열의 값 console.log(index); // 배열의 인덱스 }); 콜백 함수는 여러 개의 파라미터를 받는데요. 두번째 파라미터로부터는 배열의 인덱스 값을 받아올 수 있습니다. const arr = [1, 2, 3, 4, 5]; // 배열의 값과 인덱..

나의 착각 실제 개발을 하다보면, 비동기 함수들을 많이 사용하게 됩니다. "Ajax"라던가, "타이머 API", "이벤트 리스너" 등.. 실무에서는 잘 사용하고 있지만, 그 개념에 대한 정립이 부족하다는 생각이 들었습니다. 비동기 함수의 동작 방식을 ... 시간이 오래 걸리는 작업을 백그라운드에서 처리하고, 해당 작업이 완료되면 처리되는 개념으로 이해했었습니다. 이것은 굉장히 모호한 생각이죠. 자바스크립트는 싱글 쓰레드이기 때문에, 한번에 한 가지 일만 수행할 수 있는데요. 동기적으로 작업이 오래 걸리면 다음 작업을 못하고 멈춰버리게 됩니다. function a() { for(let i=0; i b, 또는 b -> a 순서) setTimeout 예시 setTimeout에 0초를 주고 실행하면 이것은 비동..