본문 바로가기

전체 글307

N개의 탭, 단 하나의 웹소켓: SharedWorker 아래의 영상을 보고 정리한 글입니다.https://www.youtube.com/watch?v=SVt1-Opp3Wo  개요뱅크 서비스에서는 실시간 푸시 기능이 중요함 - 실시간 차트 - 거래 채결 시 모바일에서만 서비스를 제공 할때는 유저 한명 당 하나의 웹소켓 커넥션이 필요했으나, PC 까지 서비스를 확장함에 따라 하나의 유저가 N개의 웹소켓 커넥션을 유지하는 상황이 발생됨. 아무래도 PC 이다 보니가 여러 탭을 띄워서 보는 사용성이 있다보니.. - 모바일 -> 유저 1명 1개의 커넥션 - PC -> 유저 1명 N개의 커넥션 물론 서버에서 인프라를 늘려 웹소켓 커넥션을 더 할당할 수 있도록 처리해도 되지만 FE에서도 최소화 하는 방법을 모색하게 됨. 해결 방안PWA 일부 기능 중 하나인 SharedWor.. 2024. 12. 28.
당랑거철 당랑거철개념자기 분수를 모르고 큰 힘을 가진 상대에게 덤비는 무모함혹은 자기를 압도하는 상대에게 덤빌 정도로 용맹함 예) 국힘 방향, 국민들과 싸워보자. 이런 태도 당랑거철 같은 느낌 역사의 거대한 수래바퀴를 거역하면서 그 알량한 힘을 믿고 버텨보겠지만.. 우여격절을 격겠지만 역사의 흐름은 막지 못할거다. 한문풀이螳螂拒轍螳: 사마귀 당螂: 사미귀 랑拒: 막을 거轍: 바퀴자국 철 2024. 12. 28.
시니어 사용자가 어려워하는 UX 5가지 아래의 포스트를 정리한 글 https://toss.tech/article/senior-usability-research 시니어 사용자가 어려워하는 UX 5가지시니어 UX 설계 가이드라인을 만들기 위해, 리서치로 시니어 사용자들의 공통된 사용성 패턴을 찾는 과정을 들려드릴게요.toss.tech  시니어 정의1980년 이전 시대 1. 컴포넌트 오인지목적에 맞는 진입점을 찾을 수 있도록, 각 컴포넌트가 명확하게 의도를 드러내도록 적절하게 사용되어야 한다 2. 예시 이미지예시 이미지를 자신의 정보로 오인하는 상황을 방지할 수 있도록 개인화된 문구는 주의해서 활용해야 한다. 3. 모션 그래픽시니어가 따라 하기 쉽도록 실제 사용자가 해야 하는 행동을 최대한 유사하게 반영해야 한다. 4. 문구'어떤 서류가 필요한가요.. 2024. 12. 28.
FE 개발자가 바라보는 FE 개발자의 미래 아래의 두 영상을 보고 느낀점을 적는다. 첫번째 영상 '엔비디아 GPU 쓰느라 허리가 휘어져요' 에서 핵심 로직은 한국에서 만들고 그외 나머지는 외주를 준다고 한다. 외주는 인도네시아에서 진행되고 한국 신입 연봉에 인도네시아 중급 개발자 3-4명을 고용할 수 있다고 한다. 이 말을 어떻게 해석했냐면, 저 회사에서는 FE개발자가 그렇게 중요한 역할이 아니라고 생각들었고 많은 회사들도 이럴거 같다는 생각이 들었다. 그래서 한국에서 FE 개발자의 자리는 더더욱 없어질거 같다는 생각이 들었다. 내가 사장이라도 한국 개발자 고용안할거 같다. 두번째 영상 '혼자만 hwp. 한국은 AI 시대 하나도 준비 안돼 있습니다 (한빛미디어 박태웅 의장)' 에서는 게임회사에서 디자이너 30% 해고시켰다고 하는데 이것도 적게 해.. 2024. 12. 16.
[typescript] AtLeastOneRequired AtLeastOneRequired 타입은 특정 객체에서 적어도 하나의 속성이 필수로 존재하도록 강제하는 타입입니다. 이를 구현하려면 TypeScript의 유틸리티 타입과 조건부 타입을 조합하여 각 속성마다 최소 한 개가 필수인 상태를 표현해야 합니다. AtLeastOneRequired 타입 구현type AtLeastOneRequired = { [K in keyof T]-?: Required> & Partial>;}[keyof T]; 동작 원리Mapped Type:K in keyof T를 통해 각 속성 K를 반복합니다.이때, Pick를 사용하여 속성 K만 포함된 객체를 만듭니다.Required>는 해당 속성을 필수로 지정합니다.Partial Omit:Omit를 사용하여 나머지 속성들을 제외합니다.Part.. 2024. 12. 16.
[typescript] -? 의미 아래의 코드에서 `-?` 는 무슨 의미인지 알아보자type Required = { [P in keyof T]-?: T[P];} 의미TypeScript에서 -?는 옵셔널 속성을 제거하는 데 사용되는 문법`?`는 Mapped Types에서 사용되며, ? (옵셔널 속성 표시)를 제거해 해당 속성을 반드시 포함해야 하는 속성 (Required)으로 변환합니다. 이를 통해 옵셔널 속성을 강제적으로 필수 속성으로 바꿀 수 있습니다. Exampletype Test = { a?: string; // optional b: number; // required};type RequiredTest = { [P in keyof Test]-?: Test[P];}; 위 코드를 자세히 보면:Test 타입의 a는 옵셔널 .. 2024. 12. 5.