문제 베스트 앨범 문제 바로가기 코딩테스트 연습 - 베스트앨범 스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래는 고유 번호로 구분하며, 노래를 수록하는 기준은 다음과 같습니다. 속한 노래가 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..

❣️버킷 플레이스❣️에 합류한 지 벌써 약 8개월의 시간이 지났습니다. 시간이 정말 빠르네요! 이번에는 2022 오페스티벌 런칭 기념으로 입사 후 8개월 간 총 6개의 이벤트를 진행하며 발전했던 경험에 대해 정리해 보려고 합니다. 제가 런칭한 이벤트들을 보고 있자니 새삼스레 느껴지는 디자이너 분들의 노고..! 이벤트들을 정성스레 돌봐오면서 당연히 발전한 것도 있고 아직 못한 것도 많고 느낀 점도 많은데요, 가만히 두면 또 금새 잊어버릴 까봐 글로 정리해보려 합니다. 팔로미~! 처음 이벤트를 시작할 때의 기억이 아직도 생생 한데요... github 저장소부터 만들고 환경 설정을 시작 했었습니다. TLM(Team Lead&Manager)분과 함께 아예 처음 구성부터 컴포넌트 하나하나 직접 구현 해와서 그런지..

오늘은 Next JS에서 Client Data fetching 사용 시 마주할 수 있는 Anchoring 이슈에 대해 정리하려 합니다. Next JS docs에서 권장하고 있는 코드 스타일을 적용했을 때 생길 수 있는 이슈이기 때문에, 관련 이슈가 생겼을 때 저는 디버깅에 시간을 꽤나 썼습니다. 먼저 Next JS의 Data fetching에 대한 지식이 전무할 분들을 위해 개념부터 정리하고 이슈에 대한 해결 과정을 차례로 적어보겠습니다. Data fetching Next JS를 이용한 Data fetching에는 다음과 같은 방법을 사용할 수 있습니다. 자세한 내용은 공식 문서를 참조해주세요! getStaticProps / getServerSideProps : Server Side에서 미리 page h..

Sticky 스펙을 구현하는 방법 스펙에 필요한 조건을 하나씩 추가해가면서 어떻게 해결할 지를 고민해보자. css의 poistion: sticky; 를 이용하자. 우선 Sticky되어야 하는 Element가 최상단에 위치해있다면 쉽다. css를 이용하면 position: relative; 인 부모의 상단에 해당 Element가 sticky된다. .sticky{ position: sticky; top: 0; } https://codepen.io/bucketressi/pen/GROoeKE Sticky-1 ... codepen.io sticky container를 만들자. 이번에는 sticky header(첫번째 Sticky Element) 아래에 sticky sub-header가 위치해야 한다고 생각해보자...