아이폰 천지인 키보드에서 "유요" 라는 글자를 입력할 때, "융" -> "유ᄋᆞ" -> "유ᄋᆢ" 이렇게 입력이 되는데 한글만 대응하기 위해 넣어두었던 regex 가 동작하면서 글자를 지워버리는 이슈가 발생했습니다. [기존 Regex]return target.replace(/[^가-힣ㆍᆞᆢㄱ-ㅎㅏ-ㅣa-zA-Z\s]/g, '');한글, 영어가 아닌 문자는 제거하기 위한 regex 입니다. [이슈 원인] 종성 자음과 ㆍᆞᆢ 같은 첨자가 합쳐지면서 새로운 유니코드 문자를 만듭니다. [변경된 Regex]/*** 아이폰 천지인을 대응합니다.* \u1100-\u1112 자음 ㄱ-ㅎ* \u318D\u119E\u11A2\u2022\u2025\u00B7\uFE55 - ㆍᆞᆢ•‥·﹕*/ret..

제가 할 수 있는 이야기가 무엇일까 생각해보았는데, 2023년 가을 “오늘의가든” 이라는 프로덕트를 런칭 해 본 경험을 기반으로 앱 개발을 해보면서 느낀 웹 개발과의 차이점을 주로 다루고 대부분의 서비스가 모바일 퍼스트가 된 현시점에서 앱을 웹뷰 / 네이티브 / 하이브리드로 구성하는 방법과 각자의 장단점을 살펴보려고 합니다. https://yozm.wishket.com/magazine/detail/1969/ 이 블로그에서 글을 보고 마지막 도표의 글에 혹해서 글을 써야겠다고 생각하게 되었습니다. "2023년 2월 기준 전 세계 웹 사이트 트래픽의 60.06% 가 모바일 디바이스를 통해 유입되었습니다." 앱 개발은 웹 개발과 뭐가 다를까? 크게 “배포”와 “메모리 관리” 그리고 “UI 계층구조” 세가지 측..

Next.js에서 대응이 되어 있지 않은 `/` path로 진입했을 때 default `/home` page로 redirect 하는 스펙을 구현해야 한다. Redirect 시 사용하는 상태코드 Next.js에서의 redirect 를 구현하기 전 redirect 시에 서버에서 반환하는 상태코드를 먼저 살펴보자. 300번 대의 상태코드는 모두 Redirection 을 의미하며, 300 ~ 308 까지 있다. 301 (Moved Permanently) : 클라이언트의 요청 메소드를 GET 으로 바꾸며, redirect 처리가 캐싱된다. 302 (Found - Moved Temporarily) : 클라이언트의 요청 메소드를 GET 으로 바꾸며, redirect 처리가 일시적이고 캐싱되지 않는다. 304 (Not..

뱅크샐러드에서 지연 시간 없이 웹폰트 서빙하기 글을 보다가 Glyph라는 개념이 나와서 찾아보게 되었다. Glyph(글라프)란? Glyph는 글자의 최소 표현이며, 뜻과 소리를 지니지 않은 도형 기호이다. 예를 들어, “가” 라는 글자가 있다면 이 글자를 어떻게 표현할 것인지가 Glyph이다. 헷갈리는 용어 정리 개발을 하면서 마주치는 글자의 모양과 관련된 용어들에는 Character, Font, Glyph (feat. Unicode)가 있다. 각각의 차이를 알 수 있게 정의해보자. 요약하자면, Character는 우리가 알고 있는 글자이고, Glyph는 하나의 Character에 대응되는 표현이다. Glyph들이 모여 Font를 만든다. 추가적으로 Unicode는 Character 하나 당 부여되는 c..

🤔 기존에 알고 있던 Duck typing과 Typescript 구조적 타이핑의 차이를 인지하고 한계를 파악합니다. Duck typing이란 “만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다.” 라는 말에서 탄생하였으며, 객체의 타입을 미리 정하는 것이 아니라 런타임 시 객체의 행위에 기반하여 타입 수용성을 체크하도록 하는 프로그래밍 개념입니다. type Person = { name: string, age: number, }; const personA = { name: '희은', age: 27, }; const duckA = { name: '오리', age: 2, }; const person: Person = duckA; // it's okay 타입..

💡 2022/11/27 기준으로 작성한 글이며, 이후 라이브러리 업데이트로 특정 기능이 추가되었을 수 있습니다. Virtualized List 라이브러리 비교 npm trends라는 사이트를 이용하여, 4개의 Virtualized List 라이브러리를 비교해보겠습니다. react-window와 react-virtualized의 관계 둘다 같은 개발자가 만든 라이브러리이며 react-virtualized에서 필요한 부분만 빼내어 만든 라이브러리가 react-window입니다. 자세한 내용은 여기를 참조하면 됩니다. 점유율로 따지면 현재 기준으로 @tanstack/virtual-core 를 사용하는 것은 early stage 인 듯합니다. react-virtualized와 react-window는 워낙 유명..

이번 챕터에서는 가상 리스트를 사용하는 서비스에서 필요로 하는 기능들을 모두 리스팅 해보고, 몇몇의 기능이 어떻게 구현되는지 왜 어려운 지 알아보도록 하겠습니다. Major 기능 윈도우 스크롤을 리스트 스크롤에 적용 페이지 재방문 시 스크롤 위치 유지 🔥 아이템의 높이가 자동으로 조절 화면에 보이는 아이템만 렌더링 열의 수를 반응형 으로 조정 양방향 무한 데이터 불러오기과 연결 🔥 구현하기 까다로운 부분이 있는 기능은 🔥 로 표시했습니다. 윈도우 스크롤을 리스트 스크롤에 적용 아래의 영상을 보면 상황에 대한 이해가 쉽습니다. 리스트 내부 스크롤의 경우 list-container 라는 div의 height가 정해져있고 overflow-y가 scroll입니다. 즉, 페이지의 구성이 (헤더, 리스트, 푸터)로..

Virtualized List 란? Virtualized List(가상리스트)란 나열된 리스트의 아이템 중 화면에 보여지는 아이템만 렌더링하는 리스트를 의미합니다. 유저가 스크롤을 내려 보이는 아이템의 범위가 변경되면 다시 변경된 아이템 만을 렌더링 하도록 구현됩니다. 사실 화면을 벗어난 곳의 아이템들은 화면 상에 렌더링 되어있지 않기 때문에 현재 시점에는 없는 아이템으로 생각할 수 있지만, 유저의 스크롤 위치에 따라 화면 상에 노출될 수 있으므로 위의 그림처럼 가상으로 리스트가 차례로 구성되어 있다고 생각하게 됩니다. 아이템을 모두 렌더링하는 기본 List와 비교했을 때, 필요한 아이템만을 렌더링하면 되므로 렌더링 비용이 감소합니다. 이렇게 렌더링 비용을 감소시키는 기술로는 페이지 별로 n개의 아이템만..