IT191 [요약정리] 서비스 UX는 내가 직접 지킨다: 웹 이미지 뷰어 '포커스' 개발 및 적용기 / if(kakaoAI)2024 아래의 영상을 요약한 글입니다 .https://www.youtube.com/watch?v=bW9zbcaDfjw웹뷰어 만들기 - Svelte -> library 경량화를 위해 (작은 번들링) - Typescript - Anime.js -> Animation 일관되지 않는 UI/UX - 서비스별 다른 사용자 경험- 같은 카카오 서비스라고 인지하기 어려움 핵심기능 - 뷰어 - 슬라이더 - 확대 / 축소 - 이미지 목록 사용자 중심의 핵심기능 - 이미지 목록 -> 그리드 - 한손 사용성 피드백 (UX 용어)사용자가 수행한 행도엥 대해 시스템이 즉각적으로 반응하거나 결과를 전달하는 일련의 메시지나 신호 Gravity 효과액션의 반대 방향으로 끌어당기는 효과더 이상 액션할 수 없다는 점 예측 2025. 2. 16. [typescript] WeakRef 개념Weak Reference(약한 참조)는 프로그래밍에서 객체를 참조하되, 가비지 컬렉터(Garbage Collector)에 의해 수거되는 것을 방해하지 않는 참조입니다. 이는 일반적인 참조(strong reference)와는 다르게 동작하며, 주로 메모리 관리와 관련된 특정한 상황에서 유용합니다. 특징 1. 가비지 컬렉션과의 관계약한 참조는 객체가 강한 참조에 의해 더 이상 참조되지 않는 경우, 가비지 컬렉터에 의해 객체가 메모리에서 수거될 수 있도록 허용합니다. 2. 사용 사례캐시(Cache): 메모리 효율성을 위해, 자주 사용되지 않는 데이터를 약한 참조로 보관해 필요 시 재생성하거나 불러오는 구조.리스너 관리: 이벤트 리스너 같은 곳에서 메모리 누수를 방지하기 위해 사용.순환 참조 문제 해결: .. 2024. 12. 28. N개의 탭, 단 하나의 웹소켓: SharedWorker 아래의 영상을 보고 정리한 글입니다.https://www.youtube.com/watch?v=SVt1-Opp3Wo 개요뱅크 서비스에서는 실시간 푸시 기능이 중요함 - 실시간 차트 - 거래 채결 시 모바일에서만 서비스를 제공 할때는 유저 한명 당 하나의 웹소켓 커넥션이 필요했으나, PC 까지 서비스를 확장함에 따라 하나의 유저가 N개의 웹소켓 커넥션을 유지하는 상황이 발생됨. 아무래도 PC 이다 보니가 여러 탭을 띄워서 보는 사용성이 있다보니.. - 모바일 -> 유저 1명 1개의 커넥션 - PC -> 유저 1명 N개의 커넥션 물론 서버에서 인프라를 늘려 웹소켓 커넥션을 더 할당할 수 있도록 처리해도 되지만 FE에서도 최소화 하는 방법을 모색하게 됨. 해결 방안PWA 일부 기능 중 하나인 SharedWor.. 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. [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. 이전 1 2 3 4 ··· 32 다음
