likeornament 님의 블로그

Next.js로 프론트엔드를 개발한 지도 2년 정도가 되어 간다. 그동안 여러 프로젝트를 만들고개인적으로 작은 라이브러리도 하나 만들어 보았다. 그러다 문득 프론트엔드뿐만 아니라 백엔드도 한 번 경험해 보면 어떨까라는 생각이 들었다. 그래서 백엔드를 깊게 공부한다기보다는, 간단한 카테고리 기반 플래너를 만들어 보며 직접 경험해 보기로 했다. 다만 문제는 어떤 기술로 백엔드를 시작해야 할지 막막했다는 점인데, Prisma라는 도구를 알게 되어서 이를 사용해 백엔드를 구성해 보기로 했다. 1. Prisma란? Prisma는 Node.js 환경에서 데이터베이스를 다루기 위한 ORM(Object Relational Mapping) 도구다. 데이터베이스 스키마를 기반으로 TypeScript에서 사용할 수..

1. 프로토타입자바스크립트는 클래스 기반 언어가 아니라 프로토타입 기반 언어다. 어떤 객체를 새로 만들어낼 때,완전히 새로운 구조를 복사하는 대신 이미 존재하는 객체를 원형(prototype)으로 삼아 이를 참조한다. 이 구조의 핵심은 단순하다.인스턴스는 자신의 메서드를 직접 소유하지 않고,생성자 함수의 prototype에 정의된 메서드를 참조한다. 덕분에 같은 생성자로 만들어진 수많은 인스턴스가 하나의 메서드를 공유할 수 있다. 인스턴스마다 메서드를 새로 생성하지 않아도 되니,메모리 사용 측면에서 매우 효율적인 구조다. 프로토타입을 공부하며 내가 가장 인상 깊게 느낀 지점도 바로 이 부분이었다. 그런데 여기서 이런 의문이 들었다. "그렇다면 모든 메서드는 무조건 prototype에 정의하는 것이 정답일..

1. 클로저의 정의와 동작 원리클로저란 어떤 함수에서 선언한 변수를 참조하는 내부 함수에서만 발생하는 현상이라고 볼 수 있다. var outer = function() { var a = 1; var inner = function() { return ++a; }; return inner;};var outer2 = outer();console.log(outer2()); // 2console.log(outer2()); // 3outer 함수는 내부에서 정의한 inner 함수를 반환한다.outer 함수의 실행 컨텍스트가 종료되면,outer2 변수는 outer가 반환한 inner 함수 객체를 참조하게 된다.이후 outer2()를 호출하면 곧바로 inner 함수가 실행된다.여기서 중요한 점은 inner..

콜백 함수는 다른 코드의 인자로 넘겨주는 함수를 말한다. 하지만 콜백은 단순히 함수를 전달하는 행위에 그치지 않는다.콜백을 넘긴다는 것은 내 코드의 실행 주도권(제어권)을 상대 코드에게 위임한다는 의미에 가깝다. 이는 마치 대리 운전을 맡기며 차 키를 건네는 상황과 비슷하다.나는 목적지만 말할 뿐,언제 가속하고 언제 브레이크를 밟을지 어떤 경로로 갈지는 기사님(콜백을 실행하는 코드)의 판단에 맡기게 된다. 그렇다면 콜백을 받은 쪽은 구체적으로 어떤 제어권을 가져가게 될까?1. 호출 시점에 대한 제어권var count = 0;var func = function() { console.log(count); if (++count > 4) clearInterval(timer);};var timer = s..

실행 컨텍스트에는 세 가지 중요한 정보가 담긴다.VariableEnvironment- 현재 컨텍스트 내의 식별자들에 대한 정보와 외부 환경 정보- 선언 시점의 LexicalEnvironment의 스냅샷으로, 변경 사항은 반영되지 않음LexicalEnvironment- 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨ThisBinding- this 식별자가 바라봐야할 대상 객체스코프는 VariableEnvironment와 LexicalEnvironment를 통해 구현된다. 이렇게 구현되는 스코프는 마치 대나무처럼 곧다.어디서 선언되었는지에 따라 상위 스코프가 정해지고, 한 번 정해지면 결코 변하지 않는다. 반면 this 는 갈대와 같다.어디서 선언되었는지가 아니라,..

실행 컨텍스트에는 코드 실행에 필요한 환경 정보들이 담긴다.이 환경 정보에는 크게 VariableEnvironment와 LexicalEnvironment로 나뉜다.VariableEnvironment- 현재 컨텍스트 내의 식별자들에 대한 정보와 외부 환경 정보를 담는다.- 실행 컨텍스트가 생성되는 시점의 LexicalEnvironment를 스냅샷으로 고정한 구조다.- 이후 실행 과정에서의 변경 사항은 반영되지 않는다.LexicalEnvironment- 처음에는 VariableEnvironment와 동일하다.- 코드 실행 중 발생하는 변경 사항이 실시간으로 반영된다.두 환경은 내부적으로 아래의 동일한 구조를 가진다.environmentRecord- 현재 컨텍스트와 관련된 식별자 정보를 저장한다.- 컨텍스트 ..

자바스크립트의 불변성에 대해 공부하던 중 한 가지 궁금증이 떠올랐다. "왜 자바스크립트는 객체를 복사할 때 깊은 복사를 기본으로 제공하지 않을까?" 이 질문에 답하기 위해,먼저 자바스크립트의 불변성에 대해 살펴보자.불변성 (immutability)불변성이란 한 번 생성된 데이터는 그 메모리 자체를 변경할 수 없다는 원칙을 의미한다.자바스크립트에서 데이터의 타입은 기본형 데이터와 참조형 데이터로 나눌 수 있는데 각각의 특성이 다르다.기본형 데이터와 불변성기본형 데이터(number, string, boolean 등)는값 자체가 데이터 영역에 저장되며 한 번 생성한 값은 변경할 수 없다. 새로운 값을 할당하면 기존 값을 수정하는 것이 아니라,완전히 새로운 값이 생성되고 변수는 그 주솟값을 다시 가리키게 된다...

📌 문제 상황 PR 학습 페이지는 사용자가 직접 텍스트를 입력하고, 단계별로 이동하며, AI 피드백을 확인하는 과정을 반복하는 상호작용 중심의 화면이다.눈에 띄는 버벅임은 없었지만, DevTools로 렌더링을 확인해보니textarea에 값이 입력될 때마다 페이지 전체가 리렌더링되고 있었다. 특히 우측의 “변경된 파일”(ChangedFiles) 컴포넌트에 그려지는 파일은 2개뿐이지만,코드 줄 수만큼 과 가 생성되기 때문에 코드가 길어질수록 DOM 노드가 기하급수적으로 늘어나는 구조였다.그런데 입력이나 버튼 클릭 같은 사소한 상태 변화에도 이 컴포넌트가 매번 리렌더되고 있어, 성능 부담이 누적될 가능성이 있었다. 현재 데이터 크기에서는 체감 성능 저하가 없지만,학습 데이터가 누적되고 코드 길이가 늘어날 ..

본인은 2025년 3월부터 7월까지 중학생들을 대상으로 스크래치와 아두이노를 활용한 코딩 수업을 진행했다.그 과정에서 학생들이 프로그램의 UI를 헷갈려 하거나 불편해하는 모습을 자주 볼 수 있었다.이 경험을 통해 ‘내 프로젝트에 이런 인사이트를 적용하면 사용자들이 더 좋은 경험을 할 수 있겠다’는 생각이 들었고,그에 따라 점검하거나 개선하게 된 UI 사례들을 정리해보려 한다. ✨ 사례 1 – 한 페이지에 너무 많은 요소가 있을 때의 직관성 문제 스크래치 프로그램을 보면 하나의 화면 안에 너무 많은 요소가 빽빽하게 배치되어 있다. 그래서 학생들에게 “이 버튼을 눌러봐”라고 알려줘도, 다음 번에는 같은 기능을 쉽게 찾지 못하는 경우가 많았다. 즉, 한눈에 기능이 들어오지 않는, 직관성이 떨어지는 구조였다...

예전에 prefetch 없이 클라이언트에서 useQuery만으로 데이터를 불러왔을 때도 충분히 빠르다고 아래의 글을 쓴 적이 있다.https://likeornament.tistory.com/17 하지만 실제 배포 환경에서 확인해보니, 페이지 전환 시 민감한 사용자라면 거슬릴 정도의 로딩 지연이 존재했다.Prefetch 적용 전 좌측의 첫 번째 페이지(word/page.tsx)에서 버튼을 클릭 후우측의 두 번째 페이지(word/learn/page.tsx)로 이동할 때, useQuery로 데이터를 불러오는 동안 로딩 스피너가 나타난다. 즉, 페이지 전환은 되었지만 실제 콘텐츠는 늦게 표시된다.→ 예민한 사용자라면 충분히 거슬릴 수 있는 지점이다. 이를 개선하기 위해 prefetch를 적용하기로 했다. 위 ..