전체 글
-
코어 자바스크립트 - 프로토타입코어 자바스크립트 2025. 6. 29. 13:10
프로토타입 개념자바스크립트는 프로토타입 기반 언어이다. 어떤 객체를 원형(prototype)으로 삼고 참조하여 상속과 비슷한 효과를 얻는다. 어떤 Constructor(생성자 함수)를 new 연산자와 함께 호출하면, Constructor에서 정의된 내용을 바탕으로 새로운 instance가 생성된다. 이 때 instance에는 __proto__라는 프로퍼티가 자동으로 부여되는데, 이 프로퍼티는 Constructor의 prototype이라는 프로퍼티를 참조한다. var Person = function (name) { this._name = name;};Person.prototype.getName = function () { return this._name;}var suzi = new Person('S..
-
코어 자바스크립트 - 클로저코어 자바스크립트 2025. 6. 25. 21:51
클로저 개념 지금까지 클로저는 외부 함수의 변수를 참조하는 내부함수 정도로만 이해하고 있었다. 이 정도 설명으로는 개념이 확 와 닿지가 않는다. 실제 예제를 통해 좀 더 명확히 밝혀보자. var outer = function () { var a = 1; var inner = function () { return ++a; }; return inner; }; var outer2 = outer(); console.log(outer2()); // 2 console.log(outer2()); // 3 inner 함수 자체를 반환했다. outer2를 호출하면 inner 함수가 실행된다. inner 함수의 실행 컨텍스트가 활성화되면 outerEnvironmentReference가 outer 함수의 Lex..
-
코어 자바스크립트 - 콜백 함수코어 자바스크립트 2025. 6. 11. 23:44
콜백 함수는 다른 코드에 인자로 전달되어 그 제어권도 함께 위임한 함수이다. 콜백 함수를 위임받은 코드는 이 콜백 함수를 적절한 시점에 실행할 것이다. 제어권콜백 함수 예제var count = 0;var cdFunc = function () { console.log(count); if (++count > 4) clearInterval(timer);};var timer = setInterval(cdFunc, 300); setInterval에 전달한 첫 번째 인자인 cdFunc 함수(이 함수가 콜백 함수)는 0.3초마다 실행될 것이다. 제어권을 넘겨받은 setInterval이 스스로 판단에 따라 적절한 시점에 익명 함수를 실행시킨다. 콜백 함수는 함수다어떤 함수에 인자로 메서드를 전달하더라도 메서드..
-
코어 자바스크립트 - this코어 자바스크립트 2025. 6. 6. 12:43
자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 상황에 따라 this가 바라보는 대상이 달라진다. 전역 공간에서 this전역 공간에서 this는 전역 객체를 가리킨다. 브라우저 환경에서는 window, Node.js 에서는 global을 참조한다. 함수 호출과 메서드 호출에서 this 메서드는 호출할 경우에만 메서드로 동작하고, 그렇지 않으면 함수로 동작한다. 함수 앞에 점(.)이 있는지 여부만으로 함수 호출과 메서드 호출을 구분한다. - 함수를 함수로서 호출한 경우 this는 전역 객체를 참조한다. 메서드의 내부 함수에서도 같다.- 함수를 메서드로 호출한 경우 this는 메서드 호출 주체(메서드명 앞의 객체)를 참조한다. 위 예제에서는 obj를 참조한다. ..
-
코어 자바스크립트 - 실행 컨텍스트코어 자바스크립트 2025. 5. 28. 18:02
실행 컨텍스트(execution context) 는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이를 콜 스택에 쌓아올렸다가, 가장 위에 있는 컨텍스트와 관련있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 전역 공간에서 자동으로 생성되는 전역 컨텍스트와 eval 및 함수 실행에 의한 컨텍스트 등이 있다. 전역 컨텍스트는 자바스크립트 파일이 열리는 순간 전역 컨텍스트가 활성화 된다. 위 사진에서는 outer 함수를 호출하면 환경 정보를 수집하고 outer 실행 컨텍스트를 생성한 후 콜 스택에 담는다. 콜 스택 맨 위에 쌓이는 순간이 곧 현재 실행할 코드에 관여하게 되는 시점임을 알수 있다. 환경 정보가 담기는 실행 컨텍스트 객체는 활성화되는 시점에 VariableEnvir..
-
Next.js 15 이미지 처리와 최적화개발 2025. 5. 24. 16:35
크아허브 프로젝트 개발하면서 다양한 이미지 확장자를 처리하는 방법과 Next.js의 Image component 속성을 활용하여 최적화한 방법을 정리하였습니다. 다양한 이미지( PNG / GIF )를 처리크아허브에서 유저가 장착한 아이템의 이미지는 대부분 PNG 파일로 제공하고 있다. 하지만 일부 신규 아이템은 아직 PNG 파일이 없어 GIF 파일을 임시로 사용하고 있다. 이러한 상황에 대응하기 위해 React의 useState와 조건부 렌더링을 활용하여 이미지 형식을 구분하고 적절한 파일을 동적으로 표시하도록 처리하였다. export function ItemImage({ itemName }: { itemName: string }) { const [imageType, setImageType] = use..
-
Cloudflare R2로 이미지 관리 최적화하기개발 2025. 5. 19. 14:10
크아허브 프로젝트를 개발하면서 Cloudflare R2를 사용한 과정입니다. 문제 상황1. 넥슨 이미지 URL 접근 차단처음 프로젝트를 개발할 때, 크레이지 아케이드 공식 사이트의 아이템 이미지 URL을 직접 사용하려고 했다. 그런데 이미지 요청이 많아지자 넥슨 측에서 외부 요청을 차단해버렸다. 더 이상 개발이 불가능 상황이 되었고, 자체적으로 이미지 저장소가 필요한 상황이었다. 2. 구글 클라우드 스토리지(GSC) 시도와 한계먼저 크레이지 아케이드 사이트에 있는 모든 아이템 이미지를 스크래핑하여 다운로드를 진행하였다. GSC 버킷에 업로드한 후, 저장되어 있는 이미지 URL을 가져와 사용하였다. 하지만 GSC는 문제점이 있었다. 웹에서는 키워드 검색이 불가능하며, CLI를 사용해도 한글만 검색 에러..
-
Vercel 무료 플랜 할당량 문제 해결하기개발 2025. 5. 14. 11:17
크아허브 프로젝트를 개발하면서 Vercel 무료 플랜에서 할당량 문제를 해결하는 과정을 작성하였습니다.문제 상황프로젝트를 Vercel 무료 플랜으로 배포하면서 마주친 두 가지의 할당량 문제가 있었다. 1. 이미지 캐시 제한 (Image Cache Writes)Vercel 무료 버전은 이미지 캐시가 10만으로 제한되어 있었다. 더 늘리고 싶으면 프로 버전으로 업그레이드 해야 한다. 프로젝트에서는 7천개의 아이템 이미지를 처리해야 했기 때문에 캐시 제한에 빠르게 도달할 가능성이 있었다. 2. 함수 호출량 제한 (Vercel Function Invocations)서비스 출시 첫 날(5월 1일), 전체 함수 호출량의 10%가 소진되었다. 이 상태라면 일주일 안에 Vercel의 무료 할당량을 모두 사용하게 되어..