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

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

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

문제 베스트 앨범 문제 바로가기 코딩테스트 연습 - 베스트앨범 스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다. 속한 노래가 programmers.co.kr 풀이 우선 알아내야 할 것은 다음과 같다. 장르의 총 재생 횟수 -> 장르 순위 정하기 각 장르의 개별 곡 재생 횟수 -> 곡 순위 정하기 이걸 한 번에 알아내려고 하면 장르를 key로 두고 있는 map에 value로 (총 재생 횟수, index마다의 재생횟수)을 저장해두어야 하고 이러면 장르의 순위를 알아내기 힘들 뿐만 아니라 곡 순위도 추출해서 나타내야 한다. 따라서 map을 두개로 나누었다. 1번 map은 { key : 장..

문제 전화번호 목록 문제 바로 가기 코딩테스트 연습 - 전화번호 목록 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. 구조 programmers.co.kr 풀이 보자마자 트라이(Trie)가 생각났다. 문자열 길이도 20 이하이니 최대 높이가 20인 트리를 만들면 될 것 같다. 하지만 연결리스트 구현이 너무 귀찮기도 하고, 입력의 범위가 10^6이라 O(nlgn) 이하로 한 번에 해결할 수 있는 쉬운 방법이 있지 않을까 생각했다. 정렬되어 있는 phone_book을 한 번에 훑으면 등장했던 문자열을 포함하고 있는 지를 확인하면 되는데, 일반적으로 등장했던 모든 문자열을 다시 순..

SSO SSO(Single Sign On)는 한 번의 로그인으로 여러 서비스에 접근할 수 있는 통합 인증 방식입니다. 서비스의 규모가 커질 때 여러 서비스를 통합 관리하기 위해 SSO를 사용합니다. SSO를 구현할 때 다음과 같은 두 가지 패턴이 존재할 수 있습니다. 1. 인증 gateway 방식 각 서비스에 접근할 때 이전 레이어에 통합 인증 서비스가 존재하는 방식입니다. User는 SessionID를 가지고 있고 통합 인증 서비스를 통과하면 해당 서비스를 이용할 수 있습니다. 이 방식의 단점은 각 서비스를 이용할 때마다 인증 과정을 거쳐야 하며 인증 서비스 자체가 bottle neck이 될 수 있다는 것입니다. 2. 인증 토큰 발급 방식 유저는 우선 통합 인증 서비스를 통해 토큰이라는 인증 대행 매체..

SAML 인증 SAML은 XML 기반의 표준 데이터 포맷입니다. 인증 정보를 XML 포맷으로 생성하고 암호화한 것이 Assertion인데 이를 이용합니다. User, IDP(Identity Provider), SP(Service Provider) 가 존재하며 다음과 같이 인증이 이루어집니다. (그림) User가 SP로 서비스를 요청하면 SP는 인증된 User인지 체크합니다. 인증되지 않았으면 인증 요청(SAMLRequest)을 생성하여 User에게 전송합니다. SAMLRequest에 의해 User는 IDP로 redirect되고 로그인을 통해 인증을 진행합니다. 인증에 성공하면 IDP는 SAMLAssertion이 포함된 SAMLResponse를 User에 내려줍니다. → 그 과정에서 IDP가 설정한 Ses..

인증 Best Case 기본 flow (OpenIDC) Best Case라고 생각하는 인증 flow(OpenIDC)를 먼저 설명하겠습니다. 먼저, Auth Service가 타 서비스가 아닌 자사의 서비스일 때는 OAuth 기반의 flow가 필요없이 다음과 같이 시퀀스 다이어그램이 그려집니다. (타 서비스일 경우 OAuth 보기) Client가 id(username)와 password를 입력하여 로그인합니다. 로그인 요청은 BFF → Server → Auth Service로 전해집니다. 전달된 id와 password로 Auth Service에서 인증합니다. 인증에 성공하면 access token, refresh token, id token 를 Server로 전달합니다. Server는 id token 을 d..