728x90 반응형 source-code/FrontEnd48 직접 두드려본 cjs esm 모듈 시스템 2023. 11. 30. 유한 상태 기계를 통한 사용자 선택 UI 개발 (feat xState) 프론트엔드 개발을 하다 보면, 다음과 같은 요구사항과 심심찮게 만날 수 있다. 1. 사용자는 여러 선택지 중 하나를 선택할 수 있다. 2. 선택된 요소는 스타일이 변경된다. 3. 선택된 요소를 다시 선택했을 경우, 해당 요소의 선택이 해제된다. 사실 여기까지는 별다른 문제 없이, 쉽게 구현이 가능하다. 현재 선택한 role 도망자 선택 수사관 선택 선택 안함 도망자 로 변경 수사관 으로 변경 도망자 선택 안함 으로 변경 선택 안함 으로 변경 수사관 도망자 로 변경 수사관 으로 변경 role을 선택하는 동작은 현재 선택된 role(상태)에 따라 각기 다른 동작을 수행하며, 만약 React로 이를 구현한다면... import React, { useState } from "react"; const page =.. 2023. 10. 11. vanilla extract 사용하기 - Selectors styling Selectors 두 가지 방법을 통해 주어진 스타일에 대한 selector를 지정할 수 있다. simple pseudo selectors 매개변수를 사용하지 않아, 알아보기 쉽고 간단하다. styles.css.ts import { style } from '@vanilla-extract/css'; const myStyle = style({ ':hover': { color: 'pink' }, ':first-of-type': { color: 'blue' }, '::before': { content: '' } }); selectors key 좀 더 복잡한 규칙은 selectors key를 통해 지정해줄 수 있다. import { style } from '@vanilla-extract/css'; .. 2023. 8. 31. vanilla extract 사용하기 - 기본 튜토리얼을 차근차근 따라해 볼 예정. Getting Started 설치 npm install @vanilla-extract/css yarn add @vanilla-extract/css 번들러 통합 vanilla-extract는 zero-runtime stylesheets를 지원하기 위해, 빌드 타임에 스타일을 최적화한다. (css class name 해싱 및 생성, 스타일 생성, 불필요 코드 제거 등) 이렇게 최적화된 스타일을 runtime시 추가적인 작업 없이 사용할 수 있도록 하기 위해, 해당 프로젝트의 번들가 vanilla-extract와 함께 동작하도록 설정되어야하는데 → 프로젝트 번들러에 맞는 vanilla-extract plugin을 추가하는 방식으로 이뤄진다! next와 함께 사용해 볼 예정.. 2023. 8. 30. testing-library/react-native를 통한 컴포넌트 테스트 2 2023.08.18 - [source-code/FrontEnd] - testing-library/react를 통한 컴포넌트 테스트 (with RN + expo) 테스트 코드 작성 중 겪었던 에러 핸들링. 1. Jest를 통한 React-Query (useQuery) 테스트 현재 서비스에서는 server data 관리를 위해 react-query를 사용하고 있다. 테스트 대상 컴포넌트에서는 토글 on/off 데이터를 서버로부터 받아온 후, 해당 데이터에 맞는 UI를 그려주고 있었다. // useGetToggleStatus const useGetToggleStatus = (options) => useQuery(['key'], getToggleApi, options) // Page const Page = ().. 2023. 8. 18. testing-library/react를 통한 컴포넌트 테스트 (with RN + expo) 2023.08.18 - [source-code/FrontEnd] - Jest를 통한 unit test Jest를 통한 unit test 테스트 코드. 초기 스타트업 개발자, 특히 프론트엔드 개발자들이 가장 놓치기 쉬운 요소가 아닐까. 왜? → 제품의 명확한 기능이나 디자인 시스템이 갖춰지지 않은 상태로 개발이 진행되는 경 23life.tistory.com Jest를 통해 특정 Class내 method가 의도대로 동작하는지에 대한 단위 테스트를 작성했었다. 하지만 (특히) 프론트엔드 개발자가 테스트하고 싶은 항목은 특정 상황에서 의도한 화면이 잘 뜨는지 사용자 액션 발생 (클릭, 타이핑, 스크롤 등) 시 의도대로 동작하는지 비동기 작업 발생 시 화면의 의도대로 표시되는지 와 같은, UI적 요소가 대부분일 .. 2023. 8. 18. aria-label 을 통한 웹 접근성 향상 대부분의 웹 콘텐츠에는 해당 요소를 설명하는 text가 존재한다. // 버튼 닫힘 // 이미지 각 element 들은 해당 요소를 설명하는 문자열을 감싸고 있기 마련이며, 이를 통해 각기 다른 상황의 사용자들도 해당 웹에서 동일한 경험을 할 수 있다. (접근성이 향상된다) 그러나 웹을 작성하다 보면 접근할 수 있는 기본 이름이 누락되거나, DOM에 해당 element에 의미를 부여할 수 있는 내용이 존재하지 않는 경우가 발생한다. (대표적 예시 = 텍스트 없이, SVG 혹은 글꼴 이미지 텍스트로 이뤄진 버튼) 이와 같은 상황에서 aria-label을 사용할 수 있다. → 해당 element와 상호작용하는 문자열 정의 가능! 이를 통해 접근성을 개선하고, 스크린 리더기 사용자 및 기타 보조 기술 사용자가 .. 2023. 8. 18. image decode method를 통한 콘텐츠 scrollHeight 계산 채팅 기능 개발 중, 다음과 같은 요구사항이 있었다. 채팅방 접근 시, 사용자는 맨 마지막 메시지를 볼 수 있어야 한다. (스크롤은 아래에서 위로 발생한다) 사용자는 한 번에 여러 개의 이미지 데이터를 전송할 수 있다. 이 때, 이미지 개수에 따라 UI가 달라진다. (카카오톡 처럼) server는 해당 이미지를 socket event로 전파한다. 이 때, 이미지는 Presigned URL 형태로 제공된다. 기존 요구사항 1을 처리하기 위해, 채팅 메세지 목록 데이터를 받아온 후, 최하단으로 강제 스크롤을 발생시켰다. 이 때 강제 스크롤은? → 채팅방 element의 scrollTop을 해당 element의 scrollHeight만큼 이동하면 간단히 구현할 수 있다. 하지만, 채팅 목록에 이미지가 생기면서.. 2023. 8. 18. 응집도 지난 주 테스트 코드에 대해 고민했다. 동시에 단일 책임 원칙에 대해 깊이 공감하고, 실제로 적용하기 위해 노력했다. 컴포넌트를 작성할 때마다, 해당 컴포넌트의 역할이 무엇인지 명확히 정의했다. 어떤 기능을 수행하는가, 이를 수행하기 위해 필요한 함수들은 무엇인가 등을 계속해서 되물었다. 그런데 문제. 각 컴포넌트 혹은 함수들의 역할 에만 집중하다보니, 대부분의 로직이 잘게 흩어지게 되었다. 물론 단순히 로직이 흩어졌다는 점을 문제라고 할 순 없다. (하나의 컴포넌트나 함수는 하나의 역할만을 수행해야하니!) 하지만 코드를 몽땅 작성하고 돌아보니... 정작 해당 로직들이 합쳐진(특정 단위 기능을 수행해야하는) 모듈에서는 그래서 이 모듈은 무엇을 위해 존재하는거지? 가 혼란스러운 상황에 빠지고 말았다. 또한.. 2023. 8. 17. 이전 1 2 3 4 5 6 다음 728x90 반응형
