느려도 한걸음씩

자바스크립트에서 객체 간 상속은 클래스를 사용하지 않고도 쉽게 구현할 수 있습니다. 그 중심에 있는 개념이 바로 프로토타입(Prototype)입니다. 이번 글에서는 __proto__, 프로토타입 체인, hasOwnProperty, 그리고 생성자 함수 기반의 상속까지 차근차근 정리해보겠습니다. 🔎 프로퍼티는 어디서 왔을까?const user = { name: 'Mike'};console.log(user.hasOwnProperty('name')); // trueconsole.log(user.hasOwnProperty('age')); // false hasOwnProperty는 user 객체에 직접 정의되어 있지 않지만 작동합니다. 이유는?자바스크립트의 객체는 자신의 프로퍼티를 먼저 찾고, 없으면 프로..

자바스크립트에서 함수를 호출할 때, 함수 내부의 this가 가리키는 대상은 호출 방식에 따라 달라집니다. 이때, call, apply, bind를 사용하면 함수 호출 방식과 무관하게 this를 명시적으로 지정할 수 있습니다.이번 글에서는 세 메서드의 차이점과 활용 예제를 통해 call, apply, bind를 완벽하게 이해해봅니다. ✅ call – 함수를 호출하며 this를 지정call은 모든 함수에서 사용할 수 있는 메서드이며, 첫 번째 인자로 this로 사용할 객체를 넘기고, 나머지 인자들은 원래 함수의 매개변수로 전달됩니다.const mike = { name: 'Mike' };const tom = { name: 'Tom' };function showThisName() { console.log(t..

자바스크립트에서 클로저는 고급 개념 중 하나로 보이지만, 렉시컬 환경과 함수의 실행 방식만 이해하면 어렵지 않게 접근할 수 있는 개념입니다. 이번 글에서는 클로저의 개념을 이해하기 위해 렉시컬 환경(Lexical Environment)부터 차근히 짚고 가보겠습니다. 📌 렉시컬 환경(Lexical Environment)이란?자바스크립트가 코드를 실행하기 위해 내부적으로 변수와 함수 선언을 저장해두는 공간입니다.let one;one = 1;addOne(5);function addOne(num) { console.log(one + num);} 실행 흐름 정리:스크립트 시작 전, JS 엔진은 전역 렉시컬 환경을 구성합니다.one → undefined로 등록됨 (초기화 X)addOne → 함수 선언은 전체..

자바스크립트에서는 함수에 전달되는 인자나 배열/객체의 요소들을 유연하게 처리하기 위해 나머지 매개변수(Rest parameters)와 전개 구문(Spread syntax)을 제공합니다. ✨ arguments 객체함수 내부에서 arguments 객체를 통해 넘겨진 모든 인자에 접근할 수 있습니다.function showName(name) { console.log(arguments.length); // 전달된 인자의 개수 console.log(arguments[0]); // 첫 번째 인자 console.log(arguments[1]); // 두 번째 인자}showName('Mike', 'Tom'); ⚠️ arguments는 배열처럼 보이지만 실제 배열이 아니기 때문에 forEa..

자바스크립트에서 구조 분해 할당(Destructuring Assignment)은 배열이나 객체의 값을 손쉽게 변수에 할당할 수 있는 문법입니다. 코드가 더 간결하고 직관적으로 바뀌기 때문에 자주 사용됩니다. ✨ 배열 구조 분해배열의 각 요소를 순서대로 분해하여 변수에 담을 수 있습니다.let [x, y] = [1, 2];console.log(x); // 1console.log(y); // 2 배열 전체를 분해해서 각각의 변수에 할당하는 것도 가능합니다.let users = ['Mike', 'Tom', 'Jane'];let [user1, user2, user3] = users;console.log(user1); // 'Mike'console.log(user2); // 'Tom'console.log(user..

JavaScript를 사용하다 보면 "절대 충돌하지 않는 고유한 값"이 필요할 때가 있습니다. 이럴 때 사용하는 것이 바로 Symbol입니다. ES6(ECMAScript 2015)에서 도입된 Symbol은 객체의 고유한 속성을 만들거나, 내부에서만 사용되는 안전한 키를 만들 때 매우 유용하게 쓰입니다. ✅ Symbol이란?Symbol은 유일한 식별자(Unique Identifier)를 생성하는 원시 타입(Primitive Type)입니다. 다른 타입들과는 다르게 Symbol()을 호출할 때마다 항상 다른 값을 생성합니다.const a = Symbol()const b = Symbol()console.log(a === b) // false 비록 동일한 설명(description)을 붙이더라도, 각각의 Sy..

이번 포스트에서는 게시물 작성자가 본인의 게시글을 마감하거나 다시 모집 상태로 되돌릴 수 있는 기능과, 마감되지 않은(모집 중인) 게시글만 골라서 보여주는 필터링 기능을 함께 구현해 보겠습니다. 예를 들어, 스터디나 프로젝트 팀원을 모집하는 게시글을 작성한 사용자가 더 이상 팀원이 필요 없을 경우 '마감' 버튼을 눌러 해당 게시글을 마감 처리하고, 사용자들이 모집 중인 게시글만 볼 수 있도록 필터링할 수 있게 하는 것이 목표입니다. ✅ 1. posts 테이블에 expired 필드 추가먼저 Supabase의 posts 테이블에 expired라는 새로운 컬럼을 추가합니다. 이 필드는 게시글의 마감 여부를 저장하는 Boolean 타입이며, 기본값은 false로 설정합니다. 즉, 게시글이 처음 생성되면 기본적..

게시판 기능이 점점 완성되어 가고 있습니다. 이번 글에서는 Next.js와 Supabase를 이용해 페이지네이션(Pagination) 기능을 어떻게 구현했는지 정리해보려 합니다. 📦 기능 개요Supabase에서 게시글 데이터를 page 단위로 가져오기쿼리 스트링 기반 페이지 이동현재 페이지 강조... 생략 기호로 많은 페이지도 깔끔하게 표현 📁 1. Supabase에서 게시글 페이징 처리Supabase에서 데이터를 가져올 때는 .range() 메서드를 통해 간단히 페이징 처리가 가능합니다. export async function getPosts( categoryParams?: string, modeParams?: string, positionParams?: string, searchQuery?..