밝을희 클태

우선 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 메소드로 반환되며, 노드의 집합을 나..

별들을 담을 컨테이너를 우선 만들어줘야 한다 ... ... 그러고 나서 해당 컨테이너에 원하는 만큼 별을 찍고useEffect(() => { const makeStars = () => { const starContainer = starRef.current; if (starContainer) { starContainer.innerHTML = ""; for (let i = 0; i  여기서 만약 브라우저의 크기가 변경될 때마다 새로 별들을 찍으려면useEffect Hook 맨 밑에 아래의 코드를 넣으면 브라우저의 크기가 줄거나 늘어나면 새로 별들의 위치를 계산해서 찍을 수 있다. ..

JavaScript의 프로토타입이 무엇인지 궁금해서 MDN 사이트에 정리된 내용을 조금 더 간추려서 정리를 해보아야겠다. 프로토타입 기반 언어? JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메서드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. 정확히 말하자면 상속되는 속성과 메서드들은 각 객체..

전역 객체는 코드 실행이 되기전에 어떠한 객체보다 가장 먼저 생성이 되는 객체이다. 어떠 객체에도 속하지 않는 최상위 객체이다. 전역 객체의 이름은 브라우저, node.js 제각각이다. 브라우저 환경에서는 window, node.js 환경에서는 global이 전역 객체를 가르킨다. 하지만 ES11에서 도입된 globalThis를 사용하면 환경에 제약받지 않고 전역 객체를 가르킬 수 있다. console.log(globalThis); {/* Object [global] { global: [Circular *1], clearImmediate: [Function: clearImmediate], setImmediate: [Function: setImmediate] { [Symbol(nodejs.util.prom..

일단 차이를 정확하게 이해하기 전에 실행 컨텍스트에 대해서 알아야 한다 실행 컨텍스트는 두가지 주요 단계로 나누어지는데 코드 평가 단계 코드 실행 단계 이렇게 총 두 단계로 구분된다 코드 평가 단계는 코드를 실행하기 앞서 Lexical Environment 에 변수 및 함수 선언 등이 바인딩되고 스코프에 등록이 된다. 이 단계에서 호이스팅이 발생한다. 코드 실행 단계는 코드 평가 단계에서 준비한 과정을 실행한다. 여기서 필요는 없지만 코드 실행 단계에서 실행 컨텍스트 스택이란게 있는데 코드를 실행하면서 현재 실행되고 있는 함수를 실행 컨텍스트 스택에 PUSH 하고 함수가 종료되면 POP 하는 방식으로 이루어져 있다 var console.log(x); // undefined var x = 3; var 키워..

지금 Pong게임을 할 수 있는 팀프로젝트를 진행을 하고 있는데 https://www.ponggame.org/ Pong Game Welcome to PongGame.org, In this site, you can find many free versions of the game, one of the first video games ever created. In the game below, use the mouse or keyboard to control the paddle, Press P to pause the game, or ESC to go back to the main menu www.ponggame.org 프로젝트에서 내 첫번째 역할은 실시간 채팅이 가능하도록 채팅 기능을 만드것이다. 실시간 채팅을..

이벤트 핸들링에서 event.target과 event.currentTarget은 서로 다른 요소를 참조할 수 있다. 이 둘의 주요 차이점은 이벤트가 실제로 발생한 요소(event.target)와 이벤트 리스너가 등록된 요소(event.currentTarget)를 가리킨다는 것 event.target event.target은 이벤트가 실제로 발생한(구체적인) 요소를 가리킵니다. 이벤트 버블링이나 캡처링 과정에서도 event.target은 변하지 않습니다. 사용자가 클릭하거나 상호작용하는 실제 요소를 나타냅니다. event.currentTarget event.currentTarget은 이벤트 핸들러(리스너)가 등록된 요소를 가리킵니다. 이벤트 버블링이나 캡처링 과정에서 event.currentTarget은 ..

function updateHeaderText() { const header = document.querySelector('h1'); header.textContent = '새로운 제목'; } 위의 js 코드는 updateHeaderText함수가 실행이 될 때마다 DOM tree에서 해당 요소를 찾는다. 그렇게 되면 매우 빈번하게 함수가 호출이 되고 성능에 영향이 있을 수 있다. const header = document.querySelector('h1'); // DOM 요소 캐싱 function updateHeaderText() { header.textContent = '새로운 제목'; // 캐싱된 요소 사용 } 사용자와 상호작용 되는 DOM이 아니라면 자주 사용되는 DOM은 전역으로 둬서 스크립트가 ..

splice()는 원본에서 요소를 바로 제거하고 제거된 배열은 리턴해줌 slice()는 원본을 변경하지 않고 복사된 배열을 리턴 splice arr.splice(start, deleteCount) start: 시작 IDX deleteCount: 삭제할 요소의 개수 (deleteCount를 주지 않으면 start IDX부터 전부 삭제) let arr = [1, 2, 3, 4, 5]; let newArr = arr.splice(0, 2); //IDX 0부터 2개 요소 제거 console.log(arr, newArr); //제거된 값은 리턴해줌 // arr = : [ 3, 4, 5 ] // newArr : [ 1, 2 ] arr.splice(start) let arr = [1, 2, 3, 4, 5]; let ..

Array 접근 - O ⑴ 삽입 splice() - 최악의 경우 O(n) 특정 요소를 제거하거나 삽입시 수정된 요소 뒤의 배열들을 이동시켜야 함 push() - O⑴ 삭제 shift() - O(n) 배열의 가장 앞의 요소를 반환과 동시에 제거하고 배열의 모든 요소를 앞으로 이동해야 함 pop() - O⑴ 탐색 indexOf() - O(n) find() - O(n) findIndex() - O(n) 순회 map() - O(n) forEach() - O(n) filter() - O(n) Object 접근 - O⑴ 삽입 - O⑴ 삭제 delete - O⑴ 배열과 다르게 순서가 없어 삭제가 빠르다 탐색 obj.hasOwnProperty() - O(1) 순회 keys() - O(n) values() - O(n) ..

2차원 배열 90도 회전 let arr = [ [0, 0, 0, 0, 0], [1, 1, 1, 1, 1], [2, 2, 2, 2, 2], [3, 3, 3, 3, 3], [4, 4, 4, 4, 4], ]; let rotateArr = [ [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], ]; for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[0].length; j++) { rotateArr[j][arr.length - 1 - i] = arr[i][j]; } } 출력: [ [ 4, 3, 2, 1, 0 ], [ 4, 3, 2, 1, 0 ], [ 4..

문자 '^' - 정규식의 시작을 나타낸다, '$' - 정규식의 끝을 나타낸다 이메일 정규식 const Regex = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; 아이디 정규식 const Regex = /^[A-Za-z0-9]{4,20}$/; 문자열에 공백이 있으면 안된다. 알파벳 대소문자와 숫자만을 포함해야 한다. 길이는 4에서 20 사이여야 한다. 비밀번호 정규식 const Regex = /^(?=.*[!@#$%^&*(),.?":{}|])[A-Za-z0-9!@#$%^&*(),.?":{}|]{8,20}$/; 알파벳, 대소문자, 특수문자를 포함해야 한다. 길이는 8에서 20 사이여야 한다. 닉네임 정규식 const regex = /^[A-Za-z\uAC00-\uD7..