Intro최근 서비스에 무한스크롤을 통해 리스트를 무한적으로 보여주는 기술을 많이 사용하게 되었습니다. 이렇듯 무한 스크롤로 목록을 계속 불러오다보면, 10,000개까지 데이터가 쌓이는 경우가 발생하게 됩니다. 실제로 리스트에 10,000개를 그대로 넣어봤더니 아래 영상처럼 2번 Fixed height 에서 1번 Naive 화면이동이 느려지고 상호작용할때는 전반적으로 끊김이 발생했습니다.10,000개를 모두 브라우저 DOM에 띄워두었기 때문입니다. 브라우저가 아이템을 모두 가지고 있어야하기 때문에 무거워집니다. 수치상으로도 확인해볼까요? 순수하게 DOM에 10,000개를 모두 렌더링 했을때와 가상 스크롤을 적용했을때를 비교해보았습니다.첫번째 화면(Naive rendering)은 영상에서 1번 Naive ..

2025 개발 회고 작성 시작을 1월부터 계속 써왔는데 바쁜 일정으로 인해 미루고 미루다가 지금에서야 올리게 되네요...-벌써 2025년이 지나갔습니다. 양띵 마인크래프트 콘텐츠 개발과 일러스트레이터에서 작별하고 취업을 위한 개발자가 되기 위해 웹 개발에 발을 들인지 2024년부터 시작한 여정은 벌써 2년이 지나가고 있습니다. 취업을 하기 위해 하는 개발이기 때문에 흥미가 없었는데, 이 개발 속에서 내가 즐길 수 있는 개발 분야는 무엇일까 찾아다녔습니다. 그것은 인터렉티브 개발자였습니다. 하지만 인터렉티브는 국내에서도 수요가 적기 때문에 그만큼 되기 힘든 개발 분야였습니다. 우선적으로 프론트엔드의 역량을 키워서 개발역량을 키우고 인터렉티브 개발자로 이어가야겠다는 생각을 했었고, 그래서 올해도 여전히 부단..

IntrocreateBrowserRouter와 BrowserRouter의 차이를 파고들다가, 정작 막힌건 라우터가 아니라 더 근본적인 질문이었습니다. “JSX는 언제 실행되는것인지, 함수는 언제 실행되는 건지 React는 언제부터 일을 시작하는 것인지” 에 대해 물음을 답할 수 없어서 렌더링 전 후 차이가 있다고 이해했지만 정작 그 그리는 단계 자체가 머릿속에 그려지지 않았습니다. 화면이 어떻게 만들어지는지 그 원초적인 과정을 모르니 아무리 설명을 읽어도 겉돌기만 했습니다.JSX가 왜 등장했는지, 정확히 무엇인지 그 객체가 언제 실행되는지, 어느 시점에 화면이 그려지는지 탐구해보려한다.JSX란 무엇일까요?JSX는 무엇일까요? JavaScript 파일 안에서 HTML과 유사한 마크업을 작성할 수 있도록 해..

인트로자바스크립트를 공부하다 보면 클로저(Closure)라는 용어를 자주 접하게 됩니다.또한 자바스크립트의 중요한 특징 중 하나로 “함수는 자신의 환경을 기억한다”는 설명도 많이 등장합니다. 그렇다면 이 두 개념은 어떻게 연결되어 있을까요?이 글에서는 렉시컬 환경과 클로저의 관계를 중심으로, 클로저가 어떤 원리로 동작하는지 알아보고자 합니다.렉시컬 환경 (Lexical Env)코드가 작성된 위치 기준으로 만들어진 변수 저장 환경즉, 선언된 위치 기준으로 접근 가능한 모든 변수 공간을 렉시컬 환경이라고 말합니다.렉시컬 환경은 실행 컨텍스트를 구성하는 컴포넌트이며, 스코프와 식별자를 관리합니다. 실행 컨텍스트 내부 구조실행 컨텍스트 (Execution Context)├── LexicalEnvironment│..

인트로Vanilla JS로 VDOM을 직접 구현하면서, 이해되지 않는 에러를 반복해서 마주했습니다.ReferenceError: Cannot access 'x' before initializationReferenceError: vnode is not defined 우연치 않게 var을 선언하기 전에 console.log를 찍게 되는 일이 있었습니다.그런데, undefined만 뜨고 에러가 발생하지 않아서 "아 JS는 변수자체가 선언되기 전에 변수를 저장해두는건가"라고 생각했는데, const에서는 레퍼런스에러가 발생했습니다.왜 var은 되고 const는 안되지? 대체 JS에는 어떤 특징이 있어서 이런 일이 발생하는거지 하고 의문이 생겼습니다. 이 질문을 시작으로 따라가다보니 자연스럽게 실행 컨텍스트(Exec..

멀티스레드 환경에서 index++ 는 왜 위험한가? 에서 index++ 연산의 원자성 문제를 해결하기 위해 AtomicLong을 적용하는 방법을 살펴보았다.하지만 ID 생성만 안전하다고 해서, 애플리케이션 전체의 동시성이 보장되는 것은 아니다. 게시글이나 사용자 정보를 관리하는 Map 자체가 스레드에 안전하지 않다면, 여전히 데이터 꼬임이나 손실이 발생할 수 있다.이번 글에서는 LinkedHashMap을 사용할 때 발생할 수 있는 동시성 문제와 이를 해결하기 위한 ConcurrentHashMap의 내부 구조를 비교해본다.public class InMemoryPostRepository implements PostRepository { private AtomicLong postId = new Atomi..

Naver Boostcamp BasicKotlin25.06.23 - 25.07.04🍀 내가 개발을 시작한 이유우리는 때때로 어떤 장면이나 사람의 행위에 대해 감동을 받고, 그 감동은 한 사람의 인생을 바꾸는 성장의 씨앗이 되기도 합니다.내가 만든 창작물이 누군가에게 아주 작은 빛이라도 되어줄 수 있다면, 그 한 사람만으로도 이 길을 계속 걸을 이유가 충분하다고 믿습니다. 그림그리기를 좋아하던 내가 개발을 시작한 진짜 이유는 돈 때문이었습니다.가정이 행복하기 위해선, 삶이 안정적이어야되고, 삶을 위해선 현실적으로 어느 정도의 경제력이 필요하다고 느꼈기 때문입니다.우리 집은 넉넉하지 않았고, 그래서 불안정한 미술이 아닌 확실한 기술로 돈을 벌 수 있는 길을 택해야 했습니다. 아이러니하게도 개발을 공부하면서..

Spring으로 커뮤니티 백엔드 코드를 작성하던 중, DB를 사용하지 못하는 환경이었기 때문에 LinkedHashMap을 통해 key : index, value : post(게시글)엔티티 형태로 인메모리 데이터 저장소를 구성하였다. 이때, 게시글의 식별자를 직접 관리하기 위해 index++연산을 사용하여 새로운 게시글이 생성될 때마다 ID를 1씩 증가시키는 방식으로 구현하였다.그러나 이 방식은 단일 스레드에서는 정상적으로 동작하지만, 여러 사용자가 동시에 게시글을 등록하는 멀티스레드 환경에서는 동일한 index값이 중복으로 부여되어 ID 충돌(중복)이 발생할 수 있다.public class InMemoryPostRepository implements PostRepository { private lo..