욕심도 참 많아

이미지 파일을 파일 시스템으로 서비스에 업로드할때,화면이 하얗게 브라우저 크래시가 되는 문제가 있었다.이때 1개의 사이즈가 40mb짜리 bmp확장자 사진 60장을 사용하여,동시에 많은 메모리가 로드 되도록 하여 해당 문제원인을 발견하였다.JavaScript에서 파일을 업로드하고 처리할 때 힙 메모리가 사용한다.특히 이미지 파일의 경우 다음과 같은 과정에서 메모리를 사용한다:파일 로딩파일을 FileReader나 URL.createObjectURL()로 읽을 때이미지 데이터를 JavaScript 객체로 변환할 때JavaScript는 브라우저나 Node.js 환경에서 사용할 수 있는 힙 메모리에 제한이 있는데, 특히 브라우저에서는 이 제한이 더 엄격하다.해당 메모리에 대한 제한때문에 문제가 생긴것으로 파악하였..

크롬 익스텐션을 개발하며, 사용자의 데이터를 어떻게 관리하면 좋을지 고민하다가 Indexed DB에 대하여 공부하게 되었다. Indexed DB는 LocalStorage보다 많은 용량의 데이터를 브라우저에 영구적으로 저장하는 방법이다.또한컴퓨터 재부팅브라우저 종료 후 재실행인터넷 끊김이런 경우에도 사용자가 브라우저 데이터/캐시를 직접 삭제하지 않는 이상 사용자 데이터를 장기 보관하기 매우 적합하며, JS에서 사용하는 객체 형식 그대로 저장할 수 있다. 사용방법 1. DB open 요청 및 Object Storage사용const request = indexedDB.open("DatabaseName", version);request.onerror = (event) => { console.error("Dat..

10.231. 크리티컬 렌더링 패스 (Critical Rendering Path)크리티컬 렌더링 패스는 브라우저가 HTML, CSS, JavaScript 파일을 받아서 화면에 페이지를 그리는 과정입니다.  1. HTML 파싱 및 DOM 생성: 브라우저는 HTML 파일을 받아서 DOM(Document Object Model)을 생성합니다. DOM은 HTML 문서의 구조를 트리 형태로 표현한 것입니다.2. CSS 파싱 및 CSSOM 생성: CSS 파일을 파싱하여 CSSOM(CSS Object Model)을 생성합니다. CSSOM은 CSS 스타일 정보를 트리 형태로 표현한 것입니다.3. 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 렌더 트리는 실제로 화면에 그려질 요소들만 포함합니..

알고리즘 및 자료구조 관련 문제 1. 링크드 리스트 vs 어레이- 구조 배열 : 연속된 메모리 공간에 데이터를 저장하고, 각 요소는 인덱스르 통해 접근한다.링크드 리스트 : 각 요소가 데이터와 다음 노드에 대한 포인터를 포함한다. 메모리 공간이 연속적이지 않다. - 크기배열 : 고정 크기로 선언된다. 크기 변경이 불가능한다.링크드 리스트 : 동적 크기로, 노드를 추가하거나 제거할 수 있어서 크기가 유동적이다. - 접근 시간배열 : 인덱스를 사용하기에 O(1)의 시간복잡도링크드 리스트 : 특정 노드에 접근하려면 O(n)이 걸릴 수 있다. - 삽입 및 삭제배열 - 삭제 후 남은 요소들을 이동해야 하므로 O(n)의 시간복잡도링크드 리스트 - 노드의 포인터만 변경하면 되므로 O(1)시간에 삽입 및 삭제가 가능하..

프로젝트를 하던 중 '고용 형태' 를 열거형 enum타입으로 d.ts 확장자 파일에서 설정해주고 사용하려고 했는데,해당 파일에서 enum 타입을 as const로 export해서 사용할때 잘 안되는 것을 확인하여 이유를 찾아보면서,일단 d.ts확장자는 컴파일 시점에서만 사용되며, 런타임에는 포함되지 않기에 동작이 안되는 것을 확인하였다.(enum은 실제 런타임 값을 생성하는 구조체 이기에!!)그치만 다른 ts파일에서도 enum을 사용하려고 조금 더 알아 보면서, enum을 깡으로 쓰는것은 안티 패턴이라는 글을 많이 찾아보게 되었다.이유부터 말하자면1. enum은 Typescript에서 열거형 기능을 만들기 위해 생성한 기능으로 , 다시 JS로 트랜스파일이 되면서 번들러에서 TreeShaking을 못하게 ..

프로젝트를 진행하던 중, Github Action으로 테스트 빌드를 하는 과정에서 에러가 났다. pnpm build를 하는 과정에서 에러가 났고,에러 로그는 이렇게 떴었다.관련 로그를 찾아보니 Github Action 에서 러너로 VM을 제공하는데, 이때 VM에서 node.js와 패키지 매니저를 받아올때 생기는 에러로 추측됐다.그래서 우선 node.js버전을 최신화 해보려다가, 바로 전에 node20 , node22 두 버전 모두 잘 돌아갔던걸 확인했기에 pnpm의존성 문제가 있나 확인해보았다.pnpm package들의 버전과 현재 프로젝트의 node간의 문제는 없었고, 로컬에서는 멀쩡하게 빌드가 잘 되고 있었기에 대체 어디가 문제인가 해서 ci.yml파일에 # 캐시 삭제- name: Clear PNPM..

프로젝트를 하는 도중 컴포넌트 인터페이스 설정할때 useForm에 타입매개변수를 넣어주려했는데, 생각지 못한 부분에서 타입 에러가 났었다.interface testProps{ A : useForm B : useForm | useForm} 그래서 타입 매개변수안에 | 을 넣을때 A와 B의 경우 무슨 차이점이 있는지 자세히 알아보려 했다.A , B가 다음과 같이 정의되어있다고 가정해 보자 interface A { name: string; age: number;}interface B { email: string; subscribed: boolean;}interface testProps { A: useForm; B: useForm | useForm;} 이 경우, useForm는 name과 ..

프로젝트를 진행 하던 중 멀쩡하게 로컬에선 잘 돌아가던 프로젝트가 build가 안되는 문제가 발생했다. 처음에는 모든 paths에서 다 에러가 난다고 해서, 의존성 패키지 혹은 옛날 브랜치부터 하나하나 다 까보면서 의존성 삭제 -> 설치 -> 빌드 를 반복했다.CI / CD의 중요성을 너무나도 절실히 느꼈다. 빌드가 정상적으로 되는 브랜치와 그 다음 작업된 브랜치를 확인해 보니, App Router의 기본적인 Loading, Error 같은 페이지들을 추가한 뒤로 안되고 있는 것을 확인했다. 이때 처음 생각했던 문제는 해당 페이지들을 작업하면서 사용한 twin.macro 혹은 "use client"의 부재 문제라고 생각했다. 하지만 해당 문제를 모두 해결했음에도 빌드 에러는 계속해서 났고, error, ..

소개공식문서에는 MSW를Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.로 소개합니다. 직역하자면,Mock Service Worker는 클라이언트에 구애받지 않고 모킹을 작성할 수 있으며, 어떠한 프레임워크, 도구, 환경에서도 재사용할 수 있는 API 모킹 라이브러리 입니다. 다른 모킹 서비스와 다르게 특별한 점은,  • API endpoint를 실제 API의 것으로 사용할 수 있다.• JavaScript를 이용해 웹 애플리케이션 프로젝트에 Mocking 코드를 작성한다.• 실제..

팀에서 프로젝트를 진행하던 중 사용하고 있던 스타일링 라이브러리인 twin.macro가 Next.js 서버 컴포넌트에서 사용이 불가한 것을 확인하고, 해당 문제를 해결하면서 SSR , CSR , RSC , RCC 개념에 대해 제대로 짚고 넘어가보기로 했다. 우선 일반적인 클라이언트 사이드 렌더링에서는CSS / JS 파일이나 이미지같은 파일의 크기가 클때 , 이런 모든 파일들이 모두 로드 될때까지프론트 - 백엔드 API 요청이 계속해서 대기 상태에 머무르게 된다. 이 현상을 워터폴 현상이라 한다. 워터폴현상이 생길시에  - 로딩 지연: 각 요청이 이전 요청의 완료를 기다려야 하므로, 전체 페이지의 로딩 시간이 길어집니다.- 사용자 경험 저하: 페이지의 주요 콘텐츠가 늦게 나타나거나, 사용자가 상호작용을 시..