우선 JSON이란 무엇일까?JSON(JavaScript Object Notation)는 데이터를 교환하기 위한 텍스트 기반의 데이터 포맷이다. 그 외에 XML도 있는데 JSON 보다 성능이 떨어지고 가독성이 좋지 않아 요즘은 대부분 JSON을 사용한다. JSON.parse 는 직렬화된 JSON 데이터를 역직렬화 하기 위해 사용된다// 직렬화const obj = { name: "hacho", age: 30 };const jsonStr = JSON.stringify(obj);console.log(jsonStr); // '{"name":"hacho","age":30}'// 역직렬화const obj2 = JSON.parse(jsonStr);console.log(obj2);// 콘솔{ "name":"hacho",..

Node.js !== Browser보통 서버에 데이터를 저장할 때 createdAt: new Date()와 같이 생성 시간을 지정한다.그런데 클라이언트에서 특정 기간 내에 생성된 데이터를 서버에서 조회할 때 예상치 못한 문제가 발생할 수 있다.브라우저와 서버의 new Date() 출력 차이// 브라우저// Sun Feb 16 2025 22:58:26 GMT+0900 (한국 표준시)console.log(new Date())// node.js// 2025-02-16T13:58:26.381Zconsole.log(new Date())위와 같이 서버(node.js) 클라이언트(브라우저)는 각각 다른 형태의 Date를 출력한다.이는 서버는 서버의 타임존을 기반으로 생성을 하고, 브라우저는 사용자의 로컬 타임존을 따..

콜백 지옥?주로 비동기 작업을 순차적으로 실행하기 위해 여러 콜백 함수가 중첩되는 경우 발생한다.비동기 작업에서는 각 작업이 완료된 후에 다음 작업을 수행해야 할 때가 많다. 이때 콜백 함수를 계속 사용하다 보면 코드의 들여쓰기가 깊어지고 중첩되면서 가독성이 떨어지고, 유지보수가 어려워지는 문제가 생긴다. 이를 콜백 지옥이라고 부른다.콜백 지옥 예시아래 코드는 첫 번째 작업이 완료된 후 두 번째 작업이 실행되고, 세 번째 작업이 순차적으로 실행되도록 작성되었다. 하지만 작업이 순서대로 진행되도록 보장하기 위해 콜백 함수가 중첩되면서 코드의 가독성이 떨어지게 된다.setTimeout(() => { console.log("첫 번째 작업 완료"); setTimeout(() => { console.lo..

제목처럼 자바스크립트는 싱글 스레드이다. 기본적으로 한 번에 하나의 작업만 처리할 수 있다. 즉 모든 작업이 순차적으로 동기적으로 실행된다. 그런데 우리는 자바스크립트에서 비동기 작업을 하고 있다. 어떻게 가능한 걸까? 자바스크립트는 싱글 스레드가 맞다. 하지만 자바스크립트 런타임 환경인 브라우저, Node.js는 멀티 스레드를 지원한다. 예를 들어서 아래의 코드의 동작 순서를 보기 전에 실행 컨텍스트, 태스크 큐, 이벤트 루프, 콜 스택에 대해서 알아야 한다.콜 스택 (Call Stack)콜 스택은 자바스크립트 엔진이 함수 호출을 관리하는 스택 구조의 데이터 구조입니다.실행 컨텍스트가 생성될 때마다 콜 스택에 푸시(push)되고, 실행이 끝나면 팝(pop)되어 콜 스택에서 제거됩니다.실행 컨텍스트 (E..

searchParams에 대해서 정리를 해볼려고 한다. searchParams는 URL의 query string을 칭한다. searchParams를 읽어서 특정 데이터를 가져오거나, 카테고리 등 많은 곳에 사용이 된다. https://keynut.co.kr?keyword=hello&page=3위 URL에서 노란색 부분이 searchParams가 된다. searchParams를 읽는 방법은Next.js 14 App Router에서는 useSearchParams 훅을 사용하여 읽기 전용의 searchParams 객체를 리턴받을 수 있다.useSearchParams 훅으로 리턴받은 searchParams는 읽기 전용이므로 직접 수정할 수 없다. 대신, URLSearchParams 객체를 사용해 searchPa..

Debounce는 일정 시간 동안 이벤트가 발생하지 않았을 때 함수를 호출한다. 예시로window.addEventListener('resize', function(){ console.log('hello');}); 위의 resize 이벤트가 발생할 때마다 "hello"가 콘솔에 찍힌다고 하면 뷰포트의 크기를 조절할 때 엄청 많은 양의 콘솔이 찍히게 된다. resize 이벤트마다 코드를 실행해야 하는 경우가 있겠지만, 그렇지 않은 경우라면 매우 비효율적이다. 꼭 필요한 경우가 아니라면 Debounce를 사용해서 적절하게 함수 호출 횟수를 조절하는 게 좋다.   debounce 함수의 주어진 매개변수를 보면 콜백 함수(func), 지연 시간(wait)을 가지고 있다. debounce 함수 내부에서 클로저..

클로저를 공부하는 도중 렉시컬 스코프와 렉시컬 환경은 사전 지식이기 때문에 다시 공부를 하는 겸 정리를 해보려고 한다.렉시컬 스코프다른말로 정적 스코프라고 하며 함수의 스코프를 결정할때 함수가 호출 될 때가아닌 선언이 될때 스코프를 결정한다. 이 렉시컬 스코프를 기반으로 렉시컬 환경의 외부 렉시컬 환경이 결정된다.렉시컬 환경렉시컬 환경에는 두가지 객체가 있다. 환경 레코드와 외부 렉시컬 환경이 있다.환경 레코드 - 코드 실행 전에 지역 번수, 함수, 매개변수 등이 환경 레코드에 선언이 되고 코드가 실행이 될때 변수들의 초기화가 이루어진다외부 렉시컬 환경 - 렉시컬 스코프를 기반으로 함수 선언이 될때 외부 렉시컬 환경이 결정이 된다. 함수가 코드 내에서 선언이 될때 자신이 선언된 위치의 렉시컬 환경을 참조..

자바스크립트에서 DOM 객체는 각자 다른 타입을 가진다. querySelector : Element (HTMLElement, SVGElement 등)querySelectorAll : NodeListgetElementById : HTMLEelemtgetElementByClassName : HTMLCollectiongetElementByTagName : HTMLCollection Element:모든 DOM 요소를 나타내며, 이는 HTMLElement 또는 SVGElement와 같이 더 구체적인 요소 타입으로 좁혀질 수 있다. Element는 기본적인 DOM 메소드를 포함하고 있어, 속성 접근이나 자식 요소 관리 등이 가능하다.NodeList:querySelectorAll 메소드로 반환되며, 노드의 집합을 나..