javascript

구현하려는 기능 위치 정보를 담은 배열값이 들어오면 해당 position들을 카카오맵에 마커로 찍어 표시하기 에러 상황 카카오맵 지도 화면에 렌더링은 되었지만(200) 흰 화면만 노출함 문제 해결 과정 1. 혹시 잘못 적은 코드가 있을 까 documentaion만 100번 본 듯...하지만 문제 없었음. 2. 좌표 값이 해외면 카카오 지도가 흰 화면을 노출한다는 글을 읽고 전 부 위도, 경도 값 위치를 조회함 3. 어이없게도 해외는 아닌, 아예 잘못된 위도 경도 값이 들어가 있어서 발생한 문제 였음....프론트 코드를 고칠 일도 아니었음! 해결 방안 1. 잘못된 위도,경도 값을 가진 data를 db에서 삭제 2. 프론트 쪽에도 위도, 경도 값이 정상인지 체크하는 함수를 만들어 정상인 값만 마커를 찍도록 ..

https://dana-dev.tistory.com/entry/%EB%AA%B0%EB%9E%90%EB%8D%98-useEffect%EC%9D%98-%EC%8B%A4%ED%96%89%EC%88%9C%EC%84%9Cfeat-%EC%9C%A0%EC%A0%80-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%9C%A0%EB%AC%B4-%ED%8C%90%EB%8B%A8 몰랐던 useEffect의 실행순서(feat 유저 로그인 유무 판단) 현재 로직 import { useCallback, useEffect, useMemo } from 'react'; import { useLocation } from 'react-router-dom'; import { useCheckLoginQuery } from '../p..

자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다르게 싱글 스레드 환경에서 비동기 동작을 처리합니다. 싱글 스레드 비동기 환경을 구성하는 중요 요소 중 하나인 이벤트 루프에 대해 이해하면, 자바스크립트 엔진 레벨에서의 비동기 코드 동작을 이해할 수 있습니다. 복잡한 비동기 동작을 이해하고 높은 수준의 비동기 코드를 작성하며, 버그의 원인을 파악할 수 있게 됩니다. 01. 자바스크립트 제어 흐름 ✔️자바스크립트 엔진 자바스크립트 엔진은 하나의 메인 스레드로 구성된다. 메인 스레드는 코드를 읽어 한 줄씩 실행한다. 브라우저 환경에서는 유저 이벤트를 처리하고 화면을 그린다. ✔️동기적 제어 흐름 동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 의미한다. 분기문..

✔️함수는 일급 객체(first-class object) 일급 객체란, 다른 변수처럼 대상을 다룰 수 있는 것을 말한다. 자바스크립트에서 함수는 일급 객체이다. 즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다. ✔️클로저 자바스크립트 클로저는 함수의 일급 객체 성질을 이용한다. 함수가 생성될 때, 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장된다. 함수와 함수가 사용하는 변수들을 저장한 공간을 클로저(closure)라고 한다. ✔️클로저는 왜 사용하나요? 클로저를 사용하는 이유는 상태를 안전하게 은닉하고 보존시키기 위함입니다. 그리고 이를 수정하는 방법은 특정 함수한테만 그 권한을 줍니다. 즉, 다수의 개발자와 함께 일을 할 때 실수를 방지하고 더 탄탄한 코드..

✔️자바스크립트 코드의 실행 1 어떤 자바스크립트 코드도 작성되지 않은 경우 //어떤 코드도 없는 경우 자바스크립트 엔진은 코드가 없어도 다음 3가지 변수를 초기화하게 됩니다. this 변수들(Variable Object) Scope chain 위 3가지는 다음과 같이 초기화 된다. this : window 변수들(Variable Object) : {} Scope chain : [] ❗정리 자바스크립트 엔진은 코드가 없어도 실행 환경(실행 컨텍스트)를 초기화한다. 스코프(scope)는 코드가 현재 실행되는 환경, 맥락(context)를 의미한다. this 포인터(레퍼런스 변수), 스코프에 저장된 변수들, 스코프 체인 등이 환경에 포함된다. this 포인터의 경우, 글로벌 스코프에서는 window를 가리킨..

DOM이란? 문서 객체 모델(Document Object Model) 객체 지향 모델로써 구조화된 문서를 표현하는 형식 즉, 줄글로 이루어져 있는 문서를 위 이미지와 같이 트리로 바꿔주는 것이라고 생각하면 된다. HTML 문서에 대한 인터페이스 DOM은 XML이나 HTML문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다. DOM의 종류 Core DOM : 모든 문서 타입을 위한 DOM 모델 HTML DOM : HTML 문서를 위한 DOM모델 DOM) 왼쪽 HTML문서의 태그들은 오른쪽의 트리 구조로 변환된다. 열린태그와 닫힌태그 사이의 내용을 기준으로 계층화 ..