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

오랜만에 쓰는 글이다. 힘들 때 글이 잘 써진다고 이번 글은 술술 써졌다. 회고 글을 오랫동안 작성하지 못해서 오랜만에 끄적여보았다. 정신없게 바빴던 2023년 여름 살면서 안 바빴던 여름이 없던 것 같긴 한데 잠깐의 일상을 챙길 여유 정도는 있었다. 나는 대체로 일을 벌려서 나를 바쁜 상황을 밀어붙이는 사람인데, 이렇게 해야 발전도 있고 당장은 괴롭지만 한층 단단해지는 걸 느꼈기 때문이다. 하지만 이번 여름에는 특히나 포기와 견딤 사이에서 아슬아슬한 줄달리기를 했다. 나를 죽이지 못한 시련은.. 그런 말이 있지 않은가? ”나를 죽이지 못한 시련은 나를 강하게 만들 뿐이다“. 나는 포기하지 않는 능력이 꽤 높은 사람인 것 같다. 어릴 적 재수할 때 엄마가 나에게 ”희은이는 결국엔 해내서 별로 걱정이 안돼..

💡 gRPC와 Rest api의 차이점을 정리하고 장단점을 파악하여 상황에 맞게 적용합니다. 스트레스 테스트 라이브러리를 조사하다가 특정 툴들만 gRPC를 지원하고, gRPC를 사용 중인 코드를 찾아보니 거의 Go, Kotiin 기반 코드들 밖에 없길래 gRPC와 Rest api의 차이점이 무엇이고 언제 무얼 사용해야 하는지 / JS를 통해 자주 사용하지 않는 이유가 있을 지 궁금해서 조사해 봅니다. Rest api는 기존에 많이 사용해보셨을 것이기 때문에 별도 설명 없이 넘어가겠습니다. gRPC란? grpc란 구글에서 개발한 오픈소스 원격 프로시저 호출(RPC) 시스템이며, 전송을 위해 HTTP/2 를 사용하고 인터페이스 정의 언어로 프로토콜 버퍼를 사용하고 있습니다. client - server si..

🤔 기존에 알고 있던 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개의 아이템만을..

👉 해당 글은 데이원컴퍼니에서 진행하는 제로베이스 프론트엔드 스쿨의 강의 중 하나인 JS 기초 강의를 제작한 후기를 담은 글입니다 :) 👉 제로베이스 프론트엔드 스쿨의 강의를 맛보고 싶으신 분들은 해당 링크에서 맛보기 강의를 들으실 수 있습니다. ☘️ 첫 연락 데이원컴퍼니에서 링크드인으로 첫 연락을 주시고 꽤 고민을 많이 했더랬다. 처음 하는 교육이기도 하고 스스로 아직 실력이 부족하다고 생각했는데, 처음 공부를 시작하는 제로베이스 학습자를 기반으로 하는 교육이라고 하시길래 자신감을 되찾고 하겠다고 결정했다. 동기 애들이나 초, 중등 학생을 대상으로 코딩 교육은 경험이 있었기 때문에 쉽게 설명하는 건 자신 있었고, 이 분야를 공부하기 전에 정말 아무것도 몰랐던 사람으로 더 공감할 수 있는 부분이 있겠다고..