JavaScript
대량의 데이터 행을 전체 선택 했는데 브라우저가 멈춰버렸다.
JavaScript
2025.03.19 17:44
타사의 그리드 라이브러리를 구입해서 잘 쓰고 있던 어느 날4만 건 이상의 그리드 데이터 행을 전체선택 했는데 그대로 브라우저가 멈춰버렸다.순간 이게 뭐지? 싶었지만 기다려봤는데 거의 1분 이상이 지나고 나서야 행 전체 선택이 적용이 되더라.. 위 사진을 보면 내역이 약 44000건 인데,빨간색 화살표로 표시한 체크를 클릭(전체 선택 하게 되는거임)하면빨간색 박스로 표시한 각 행의 체크박스들에 체크 모양이 들어가면서, 각 행의 checked 라는 값도 0에서 1로 바뀌게 된다. 보아하니 대량의 데이터들을 다루면서 부하가 걸린거 같고사용자들에게 크리티컬한 이슈라 전체선택을 할 때 적용되는 메서드를 뜯어보게 됐다. 밑에는 전체선택을 하게 되면 적용되는 그리드 행 전체선택 메서드이다. grid.ItemAllC..
실행 컨텍스트 (Execution Context)
JavaScript
2024.09.06 18:20
자바스크립트 개발자라면 반드시 이해해야 할 핵심 개념 중 하나가 바로 '실행 컨텍스트(Execution Context)' 입니다.이 글에서는 실행 컨텍스트의 개념부터 세부 구성 요소까지 상세히 살펴보겠습니다. 1. 실행 컨텍스트란?실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 추상화한 개념입니다.기본적으로 소스코드를 평가하여 실행 컨텍스트를 생성하는데요.코드의 실행 순서와 스코프를 관리하며, 변수, 객체, 함수 등의 식별자 결정을 담당합니다.쉽게 말해서 소스코드를 실행하는데 필요한 환경을 제공하고 실행결과를 관리하는 영역입니다. 스코프와 코드실행 순서를 관리하는 매커니즘으로 모든 코드는 실행컨텍스트를 통해 실행되고 관리됩니다.실행컨텍스트의 렉시컬 환경이 스코프를 관리하며실행컨텍스트의 스택이 실행순서..
Set 객체: 값의 고유한 집합 저장소
JavaScript
2023.12.17 21:24
JavaScript의 Set 객체는 고유한 값들의 집합을 저장하는 데 사용되며, 중복된 값을 허용하지 않는다. 이러한 Set 객체는 다양한 상황에서 유용하게 활용될 수 있는데 한눈에 보기 쉽도록 Set 객체에 대해 자세히 알아보겠다. 목차 1. Set 객체 소개 2. Set 객체 생성 3. Set 메서드 4. Set 반복(iteration) 5. Set과 배열/객체 비교 6. Set을 활용한 유용한 예시 7. Set의 성능과 주의할 점 8. Set의 브라우저 호환성 1. Set 객체 소개 Set이란? Set 객체는 JavaScript에서 고유한 값들의 집합을 저장하는 자료 구조이다. 중복된 값을 허용하지 않으며, 값들의 삽입 순서를 유지해준다. 이렇기 때문에 Set은 고유한 값들의 집합을 효과적으로 관리..
TypeScript
TSC 의 컴파일 프로세스
TypeScript
2024.04.01 00:41
프로그램을 만들기 위해 개발자는 소스코드를 작성합니다. 소스코드는 컴파일러 (Compiler) 에 의해 기계어코드로 변환되어 실행이 가능한 프로그램이 되는데, 이 단계를 컴파일 타임(Compile Time) 이라고 부릅니다. 즉, 컴파일 타임 은 소스코드가 컴파일 과정을 거쳐서 컴퓨터가 인식할 수 있는 기계어 (바이트 코드)로 변환되어 실행할 수 있는 프로그램이 되는 과정을 의미합니다. 컴파일(compile)은 추상화 단계가 다른 고수준에서 저수준 언어로 변환되는 과정을 가리키는데요. 하지만 타입스크립트는 고수준 언어가 저수준 언어로 변환되는 것이 아니라, 고수준 언어 (타입스크립트) => 고수준 언어(자바스크립트) 로 변환되는 것이기 때문에, 트랜스파일(transpile) 이라고 부르기도 합니다. < ..
Any VS Unknown VS Never
TypeScript
2024.03.25 10:57
any 와 unknown은 값의 유형이 무엇인지 확실하지 않을 때, 사용되는 이스케이프 방법인 반면에 never는 모든 데이터 유형이 부족하고 값이 남지 않을 때 사용됩니다. Any any 타입은 타입 체크를 회피할 수 있는 타입으로, 어떤 종류의 값도 할당할 수 있습니다. 타입스크립트의 타입 시스템에서 any는 "어떤 것이든 될 수 있음"을 의미하며, 컴파일러에게 해당 변수에 대한 타입 체크를 수행하지 말라고 지시합니다. any 타입으로 지정된 변수에는 무엇이든 할당 할 수 있습니다. 단점 :정의되지 않은 메서드를 호출할 수도 있으며, Typescript 에서는 오류가 발생하지 않습니다. Unknown unknown 타입은 타입스크립트 3.0에서 소개되었으며, any 타입보다 타입 안전성을 강화한 타입..
enum 보다는 union type
TypeScript
2024.02.27 14:41
이번 글에서는 enum 대신에 union type을 써야한다는 내용에 대해 써보겠습니다. 얻어갈 수 있는 내용🎯 - enum 타입의 컴파일 과정과 런타임에 미치는 영향 - Tree-shaking - 굳이 enum 타입을 쓰는 방법 - enum 타입 말고 union type을 써야하는 이유 타입스크립트에서 정적 타입 자체는 런타임에 직접적인 영향을 주지 않습니다.🙅♂️ 타입스크립트에서 타입 정보는 컴파일 타임에만 사용되고, 컴파일된 JavaScript 코드에서는 제거되는데요 이는 타입스크립트의 타입 시스템이 런타임에 존재하지 않는다는 것을 의미합니다. 즉, 런타임에는 모든 타입이 사라지고, 순수한 JavaScript 코드만 남게 된다는거죠. 그런데 말입니다. enum과 같은 특정 타입스크립트 구문은 런타..
개발환경
심볼릭(Symbolic) 링크 와 하드(Hard) 링크
개발환경
2025.04.01 13:01
1. 심볼릭 링크 (Symbolic Link)1-1. 개념정의: 원본 파일이나 디렉토리를 가리키는 포인터(참조) 이다.별칭: "symlink" 또는 "soft link"라고도 불린다.특징: Windows의 "바로가기"와 비슷한 개념임."바로가기"는 원본을 가리키는 참조일 뿐이다.1-2. 작동 방식# 예시 구조original_file.txt (원본 파일)└── symlink_to_file.txt (심볼릭 링크)# 실제 예시$ ln -s original_file.txt symlink_to_file.txt 2. 하드 링크 (Hard Link)2-1. 개념정의: 원본 파일과 동일한 inode를 공유하는 파일이다.특징: 원본 파일의 실제 데이터를 직접 참조한다.예시: 같은 문서의 복사본을 만드는 것과 비슷하다...
🚀 npm에서 pnpm으로 갈아탄 이유와 전환 과정
개발환경
2025.04.01 12:22
최근에 프로젝트에서 기존 npm에서 pnpm으로 패키지 매니저를 전환했다.이 글은 “왜 바꿨는지”, “어떻게 바꿨는지”, 그리고 “전환 후 어떤 점이 좋았는지”를예시와 함께 단계별로 정리한 아티클이다.✅ 왜 pnpm을 써야 할까?기존 npm을 쓰면서 겪은 불편함은 다음과 같다: • 디스크 낭비→ 같은 패키지를 여러 프로젝트에서 쓸 때마다 매번 복사됨 • 설치 속도 느림→ 특히 node_modules를 지우고 다시 설치할 때는 시간 소모 큼 • 의존성 충돌 문제→ 서브 패키지 간 의존성 버전 충돌로 인해 디버깅 어려움 그리고 pnpm은 이런 문제들을 이렇게 해결한다:npm의 문제점pnpm의 해결 방식디스크 낭비캐시 + 하드 링크를 통해 하나의 패키지만 저장설치 속도 느림캐시된 패키지를 바로 링크하므로 빠름..
file-loader VS url-loader
개발환경
2024.01.29 16:47
이번 글에서는 webpack 로더의 종류인 file-loader 와 url-loader에 대해서 알아보도록 하겠습니다. 👨💻 얻어갈 수 있는 내용 file-loader 와 url-loader는 어디서, 어떻게 사용되는걸까? file-loader 와 url-loader의 차이는 무엇이며, 둘 중에 뭐를 사용해야될까? Webpack 로더 웹팩은 JavaScript 모듈 번들러로 시작했지만, 시간이 지나면서 CSS, 이미지, 폰트 등과 같은 다양한 타입의 리소스들을 처리할 필요성이 커졌는데요. 로더 (loaders) 라는 옵션을 사용하게되면 Webpack이 다른 포멧의 파일을 처리하고, 이를 애플리케이션에서 사용할 수 있는 모듈로 변환 할 수 있게됩니다. // webpack.config.js module.e..
React
React Virtual DOM 과 Reconciliation, 그리고 Fiber Reconciler (덜 작성함)
React
2024.04.23 23:57
이 글에서는 React Virtual DOM과 Reconciliation이 내부적으로 어떻게 작동하는지에 대해 알아보도록 하겠습니다. Virtual DOM에 대해 말하기 전에 브라우저 렌더링 프로세스와 DOM에 대한 이해가 필요합니다. 브라우저 렌더링 프로세스는 해당 아티클을 읽어보고 오시면 되겠습니다. https://oreeyo00.tistory.com/7 Rendering (렌더링) 이란? ** 이 글에서는 렌더링 엔진이 작동하는 방식과 사용자 화면에 웹 페이지를 표시하는 방법을 알아볼거다. * 먼저 설명하는 데에 쓰일 용어들의 의미를 알아보도록 하자. 파싱 (parsing) 이란? 컴퓨 oreeyo00.tistory.com Virtual DOM DOM을 JavaScript 객체로 표현한 것입니다. ..