전체 글

$yarn create vite를 통해 개인 프로젝트를 만드려고 했는데, 아래와 같은 오류 메시지가 뜨며 import를 찾지 못했다. 시도해본 것들1. 개발자 창 리로드cmd + shift + P로 개발자 창 리로드 시도.해결 안됨. 2. vite, @vitejs/plugin-react-swc 플러그인 다시 설치이 역시 해결 안됨. 여기서 플러그인 개별 문제가 아님을 눈치 챔. 3. 프로젝트 전체를 삭제하고 다시 생성여전히 해결 안됨. 4. @yarnpkg/sdks vscode 실행 + typescript 작업 영역 버전 사용 해결!알아보니 yarn berry 등 PnP를 사용하면 vscode용 yarn sdk를 설치해줘야 제대로 압축된 패키지를 인식할 수 있다고 한다. +) yarn berry는 패키지..

[0. 도입 이유: 결정 장애를 유발하는 UI]우테코에서 코딩해듀오 유저 테스트를 진행할 때 많은 사용자들이 페어룸 생성까지의 과정에서 예상보다 훨씬 많은 시간을 사용한다는 문제점을 발견했다.대부분은 어떤 것을 누르고 입력해야 할 지 모르겠어서 헤메는 시간이었다.이를 해결하기 위해 토스의 디자인 원칙에서 영감을 받아 UI를 다시 설계했다.[1. 구현: 경험 설계를 위한 두 가지 원칙]해결책의 핵심 아이디어는 사용자의 선택을 단순하게 만드는 것이었다. 이를 위해 두 가지 원칙을 세웠다.간단한 결정은 즉시 내리게 한다.복잡한 입력은 단계를 나눈다.이 원칙들은 토스의 'Easy to answer', '1 thing for 1 page' 철학에서 영감을 얻었으며, 우리 서비스의 구체적인 문제 해결에 맞게 변형하..

[0. 도입 이유 - 반복되는 스크롤 애니메이션 로직]최신 웹 애플리케이션에서 스크롤 기반의 애니메이션은 꽤나 자주 쓰인다. 하지만 이는 개발자에게 반복적인 코드 작성을 요구하는 문제가 되었다.프로젝트 초기에는 각 컴포넌트에서 ref, state, useEffect 훅을 사용해 스크롤 위치를 감지하고, CSS 클래스를 토글하는 방식으로 애니메이션을 구현했다.const ComponentA = () => { const [isVisible, setIsVisible] = useState(false); const ref = useRef(); useEffect(() => { // 스크롤 이벤트 리스너 등록 및 위치 계산... // isVisible 상태 변경... }, []); return ....