HOME
[JS] split() 메서드에서 빈 문자열이 생기는 원리
[JS] split() 메서드에서 빈 문자열이 생기는 원리
2024.05.24str.split(separator, limit?) 메서드는 구분자(separator)를 기준으로 문자열을 분리할 때 사용하한다. 사용법도 간단하고 개발하면서 가장 많이 사용하는 메서드 중 하나다. 하지만 split()을 사용하다보면 의도치 않게 '' 빈 문자열이 생기는 상황이 종종 발생한다. split() 메서드는 문자열 시작 지점부터 구분자를 탐색하면서 그 사이에 어떤 문자열이 존재하는지 확인한다. 만약 구분자를 제외하고 다른 문자열이 없으면 빈 문자열을 반환한다. 정리하면 아래 3가지 상황에 부합할 때마다 빈 문자열이 발생한다. 구분자가 문자열 처음에 위치할 때구분자가 문자열 마지막에 위치할 때구분자 두 개가 연속으로 나타날 때'?apple'.split('?'); // ['', 'apple']'??..
[React] Proxy를 활용한 Custom Lazy Import
[React] Proxy를 활용한 Custom Lazy Import
2024.05.24React.lazy()React에서 코드 분할을 목적으로(Chunk 분리) 컴포넌트를 Dynamic Import 할 때 React.lazy() 함수를 사용한다. 컴포넌트가 필요한 시점에만 로드되기 때문에, 로딩 중 표시할 컴포넌트나 메시지는 를 활용하여 설정한다. 여러 개의 lazy 컴포넌트를 묶어서 fallback을 한 번에 표시할 수도 있다. 또한, React.lazy()로 불러오려는 컴포넌트는 기본적으로 default export를 사용해서 내보내야 한다.// Child.tsxexport default function Child() { /* ... */ }// Parent.tsximport { Suspense } from 'react';// 컴포넌트 바디에서 호출하면 정상 작동하지 않으므로 주의co..
[Vite] 초기 로드 시간 개선을 위한 Vendor Chunk 쪼개기
[Vite] 초기 로드 시간 개선을 위한 Vendor Chunk 쪼개기
2024.05.24Intro프론트엔드 영역에선 .jsx, .tsx, .vue 등의 확장자를 가진 파일을 사용하지만 브라우저는 이를 이해하지 못한다. 때문에 이러한 파일들은 모두 .js 파일로 변환해야 한다. 모든 파일을 하나의 .js 파일로 만들 수 있지만 이 방식은 성능에 부정적인 영향을 줄 수 있으므로 권장되지 않는다. 대신 여러 .js 파일(chunks)로 변환한 뒤 필요한 순간에만 로드(지연 로딩)하는게 성능에 더 유리하다. 특히 초기 로딩 시간을 줄일 때 유용하다. Vite, Webpack 같은 번들러는 보통 index, vendor 두 개의 메인 chunk를 생성한다. 참고로 Vite 2.9 버전부턴 Production 종속성 모듈이 index chunk에 포함된다.index : App.tsx와 같은 어플리케이..
[Markdown] GitHub 마크다운 작성 꿀팁 모음
[Markdown] GitHub 마크다운 작성 꿀팁 모음
2024.05.23Admonition Box인용구(Blockquote)를 활용해서 중요한 정보를 강조할 수 있다. NOTE, IMPORTANT, WARNING 세 가지 타입을 지원하며, 각 타입에 해당하는 아이콘과 컬러로 자동 변경된다. 참고로 README.md 마크다운 편집기에선 미리보기(Preview)로 표시되지 않지만 저장 후엔 정상적으로 표시된다.> [!NOTE] > Highlights information that users should take into account, even when skimming.> [!IMPORTANT] > Crucial information necessary for users to succeed.> [!WARNING] > Critical content demanding immed..
[JS] 자바스크립트 ES2023 불변성 배열 메서드 톺아보기
[JS] 자바스크립트 ES2023 불변성 배열 메서드 톺아보기
2024.05.23Mutable / ImmutableArray.sort(), Array.reverse(), Array.splice() 같은 배열 메서드는 원본 배열을 변경한다. 객체(배열) 자체를 변경하면 예상하지 못한 사이드 이펙트가 발생할 수 있다. 아래 코드에서 reversed는 결과적으로 regions 배열을 가리키고 있다. 즉, regions reversed 이 둘은 동일하다.const regions = ['Seoul', 'Shanghai', 'Tokyo'];const reversed = regions.reverse();console.log(regions); // ['Tokyo', 'Shanghai', 'Seoul']console.log(reversed); // ['Tokyo', 'Shanghai', 'Seoul..
[JS] 영어 축약어 관련 유틸리티 함수 모음
[JS] 영어 축약어 관련 유틸리티 함수 모음
2024.05.22참고 내용영어에서 Contraction(축약/단축형)과 Abbreviation(약어/축약어)는 다른 개념이다. Contraction: 두 단어를 하나로 줄이기 위해 일부 문자를 생략하고 아포스트로피로 대체한 형태 e.g. I will → I'll, do not → don'tAbbreviation: 단어나 구의 일부 문자만을 사용하여 줄인 형태. 아포스트로피를 사용하지 않는다 e.g. United States → U.S., Doctor → Dr. 축약은 분리 기준에서 제외하는 정규식단어 문자가 아닌 문자열 기준으로 분리// 단어 문자가 아닌 문자열과 일치const NonWordCharPattern = /(\W)/g;const sentence = "I'll make coffee and I've done m..
[Algorithm] 복잡한 DOM 예제로 보는 DFS 탐색 알고리즘
[Algorithm] 복잡한 DOM 예제로 보는 DFS 탐색 알고리즘
2024.05.22목표아래 DOM 구조에서 가장 안쪽 요소부터 시작해 부모 요소로 갈 수록 중첩 레벨이 1씩 늘어나고, class에 대응하는 dataset에 중첩 레벨 값을 할당해야 한다. 예를들어 class가 "clause" 이고, 해당 요소의 중첩 레벨이 2라면 data-clause-lv="2" 속성을 할당한다. Hello ; 만약 자식 요소가 2개 이상일 땐 자식 요소들중 중첩 레벨이 가장 높은 값 + 1이 부모 요소의 중첩 레벨이 된다. 아래 예시를 기준으로 1번째 자식의 중첩 레벨(data-word-lv="1") 보다, 2번째 자식의 중첩 레벨(data-phrase-lv="2")이 더 높으므로, 부모 요소의 중첩레벨은 3이 된다(data-clause-lv="3"). ..
[Algorithm] 데이터 추가, 삭제, 정렬로 보는 BFS / DFS 탐색 알고리즘
[Algorithm] 데이터 추가, 삭제, 정렬로 보는 BFS / DFS 탐색 알고리즘
2024.05.21예시 데이터단어 혹은 문장부호(' 아포스트로피 제외)를 기준으로 분리한 토큰 인덱스 정보가 담기는 Part 객체가 있다. 이 Part 객체는 child 배열을 가지며, child 배열의 각 요소인 Part는 부모 Part의 토큰 인덱스 범위 내의 인덱스를 가진다. 예를들어 부모 Part의 토큰 인덱스 범위가 2~13이라면 자식 Part의 토큰 인덱스는 3~13(3~13, 4~13, ...) 혹은 2~12(2~12, 2~11, ...) 범위를 가진다.[ // parts 배열 { id: 0, // part begin: 2, end: 13, kc: [{ id: 'kc-1', /* ... */ }], child: [ // parts 배열 { id: 1, // ..
[React/JS] 드래그한 문자열 분리(랩핑)하기 / Selection API
[React/JS] 드래그한 문자열 분리(랩핑)하기 / Selection API
2024.05.21아래와 같은 문자열이 있을 때 마우스로 드래그해서 텍스트를 선택할 때마다 태그로 감싸도록 구현하는 게 목표. Pharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissimPharetra convallis hendrerit integer nec eleifend tellus luctus lorem dignissim 드래그한 문자열 랩핑❶ 마우스 클릭/텍스트 드래그/클릭 해제 → onMouseUp 이벤트 호출 ❷ 선택한 영역에 대한 Selection 객체 획득const selection =..
행운의 면적
행운의 면적
2024.05.20왜 어떤 사람들은 항상 운이 좋아 보일까? 행운이란 무엇일까? 행운의 면적이라는 개념에 대해 알아보자.행운의 면적 = 했던 일 x 했던 일을 아는 사람의 수 우수한 재능 있음에도 이를 펼칠 기회를 마주하지 못하는 사람들이 많다. 이는 100가지 일을 했지만 그것을 아는 사람은 1명에 불과하기 때문일 수 있다. 지금 해야 할 일은 “100가지 일을 함과 동시에 100명, 1000명에게 알리는 것”이다. Via Koji
[React] 리액트 동시성 렌더링(Concurrent) 톺아보기
[React] 리액트 동시성 렌더링(Concurrent) 톺아보기
2024.05.20사용자가 사용하는 UI는 여러 부분으로 구성되어 있다. 일반적으로 폼 입력 필드는 상호 작용에 즉각적으로 응답하지만, 많은 양의 필터링 목록 같은 부분은 응답하는데 오랜 시간이 소요될 수 있다. React는 기본적으로 동기적인 방식으로 렌더링하는데, UI의 느린 작업(필터링 목록 등)이 다른 빠른 작업(입력 폼 등)을 차단하여 응답이 느려지는 현상이 발생한다. 💡 Render-blocking: Concurrent 기능을 사용하지 않을 때 React는 컴포넌트를 동기적으로 렌더링 하며, 렌더링을 시작하면 예외가 아닌 이상 렌더링을 중단할 수 없다. 즉, 렌더링이 끝나야만 다른 작업을 수행할 수 있다. React 18 버전에 공개한 Concurrent 기능은 이런 문제를 해결하기 위해 개발됐다. Concu..
[Express] req.query vs req.params
[Express] req.query vs req.params
2024.05.19Path Parameter : /books/888 (888 부분이 파라미터)Query Parameter : /search?sort=price (sort=price 부분이 쿼리) 쿼리 스트링(Query String)은 /search?sort=price 주소에서 ? 물음표 이후에 나오는 전체 문자열을 의미하고, 쿼리 파라미터(Query Parameter)는 쿼리 스트링 내의 key=value 쌍을 의미한다. req.params// 요청 URL : /books/888router.get('/books/:id', (req, res, next) => { console.log(req.params); // { id: '888' }}); req.query// URL-encoded 데이터 파싱은 주로 폼 데이터를 제출할..