변경된 카카오맵 API 플랫폼 도메인 등록 위치
·
JS
원래 Kakao Developers의 [앱] - [플랫폼] - [Web 플랫폼 등록]에서 플랫폼 도메인을 등록할 수 있었는데, 지금은 위치가 바뀐 것 같다. 이젠 [앱] - [플랫폼 키] - [JavaScript 키]에서 플랫폼 도메인을 등록해야 된다. 그럼 플랫폼 JS 키를 수정하는 상세 페이지가 뜬다.여기에서 'JavaScript SDK 도메인' 항목에 플랫폼 도메인을 등록해주면 된다. 참고로, 카카오맵 API 사용 설정을 켜주고, 플랫폼 도메인까지 등록해야 정상적으로 작동한다.둘 중 하나라도 빼먹은 과정이 있다면 설정해주자. +) 카카오 디벨로퍼스에서 메일로 공지해준 걸 뒤늦게 확인했다.발신일자가 2026년 1월 2일인 것으로 보아, 올해부터 새롭게 적용되는 사항인 것 같다.메일 본문에 위에서..
this를 명시적으로 설정하는 2가지 함수, .call()과 .bind()의 차이 + .apply()
·
JS
`.call()`: 즉시 호출 및 일회성 this 지정.call()은 첫 번째 인수로 전달된 객체를 this로 설정한 후, 해당 함수를 즉시 실행합니다. 함수 복사본을 만드는 것이 아니라, 그 순간에 함수를 호출하는 데 사용됩니다.문법: `fn.call(thisArg, arg1, arg2, ...)`const user1 = { name: "Alice" };const user2 = { name: "Bob" };function greet(age) { console.log(`Hello, I'm ${this.name} and I'm ${age} years old.`);}// user1 객체를 this로 설정하고 즉시 실행greet.call(user1, 30); // 출력: Hello, I'm Alice and..
slice vs splice
·
JS
요약둘 다 배열 메소드이지만 용도가 다름.복사/추출용 → slice (배열 일부 또는 전체, 원본 보존)수정/삽입/삭제용 → splice (원본 변경) ✅ slice()역할: 배열의 일부분을 잘라서 새 배열로 반환원본 배열 변경: ❌ 변경하지 않음문법:array.slice(start, end)`start`: 시작 인덱스 (포함)`end`: 끝 인덱스 (미포함)const fruits = ["apple", "banana", "cherry", "date"];const result = fruits.slice(1, 3);console.log(result); // ["banana", "cherry"]console.log(fruits); // ["apple", "banana", "cherry", ..
클로저의 원리가 적용된 React Hooks
·
JS
useStateuseState가 클로저 원리를 어떻게 이용해서 state값의 불변성을 유지하는지 너무 잘 보여주는 코드 예시 하나를 발견했다.function useState(initialValue) { let state = initialValue; // 상태 값을 저장하기 위한 변수 function setState(newValue) { state = newValue; // 상태 값을 갱신하기 위한 함수 } function getState(){ return state; } return [getState(), setState]; // 상태 값과 갱신 함수를 반환}여기서 `setState`, `getState`는 자신을 내포한 함수의 지역변수인 `state`를 기억해서 useState..
함수 파라미터를 중괄호로 감싸서 받을 때와 그냥 받을 때의 차이
·
JS
제목 단순화에 실패한 나 항상 궁금했던 게 있었다.함수의 매개변수(파라미터)가 2개 이상일 때, `중괄호로 감싸서 받는 것`과 `그냥 개별 파라미터로 받는 것`은 무슨 차이가 있을까?맨날 궁금했는데 정리를 안 해놓으니 평생 궁금해할 것 같아서 이번에 정리하고 넘어가겠다. 중괄호로 감싸서 받기 (='객체'로 받기)export async function getReviews({ order = "rating", offset = 0, limit = 10 }) { // ...}먼저, 이렇게 받아오는 건 곧 파라미터들을 하나의 "객체"로 받는 것이다.이는 구조 분해 형태로, 함수 내에서 사용할 때는 그냥 개별 파라미터를 받아온 것과 똑같이 사용하면 된다. [파라미터 사용 예시]export async functi..
자주 사용되는 JavaScript Web API들
·
JS
API 이름설명DOM 조작Document, Element, NodeHTML 문서를 자바스크립트로 조작이벤트 처리addEventListener()사용자 입력이나 시스템 이벤트 처리AJAX / 네트워크fetch(), XMLHttpRequest서버와 비동기 통신스토리지localStorage, sessionStorage, Cookies브라우저에 데이터 저장타이머setTimeout(), setInterval()일정 시간 후 또는 간격으로 코드 실행멀티미디어MediaDevices, getUserMedia()카메라, 마이크 접근애니메이션requestAnimationFrame(), Web Animations API부드러운 애니메이션 구현캔버스Canvas API2D 그래픽 그리기 ()드래그 & 드롭Drag and Dro..