2025-03-09

목차

1. 숫자가 점차 줄어드는 애니메이션 효과 구현하기
2. React 프로젝트에서 발생하는 react-scripts 관련 에러 해결법
3. 다국어(i18n) 지원 시 상태 관리(useContext vs 라이브러리)
4. 다국어 번역 관리의 현실적인 어려움과 대안
5. 글자 크기 조절 기능 구현 시 고려사항 및 팁

1. 숫자가 점차 줄어드는 애니메이션 효과 구현하기 🎲

• 핵심: 숫자가 예를 들어 10억에서 5억까지 서서히 변하는 애니메이션 효과를 구현하고 싶을 때
• 설명: 이런 효과는 '카운트다운 카운터' 또는 '숫자 롤링 애니메이션'이라고 주로 부른다.
• 관련 라이브러리: motion-number, number-flow 등 숫자를 부드럽게 변화시키는 라이브러리들이 존재함.
• 검색 팁: "animating number counters", "number countdown animation" 등 키워드 사용
• 참고 링크: CSS-Tricks 관련 튜토리얼

2. React 프로젝트에서 react-scripts 관련 에러 해결법 🛠️

• 문제 상황: backend/client 분리 프로젝트에서 client에 framer-motion 설치 중, react-scripts 삭제/재설치 후 에러 다량 발생
• 에러 내용: ReactNode가 JSX element 타입이 아니라고 뜨면서 axios, i18next, react-icons 등 다수 패키지에서 오류 발생
• 해결 팁:
  • package-lock.json 삭제 후 재설치 시 의존성 버전 호환성을 꼭 확인할 것
  • React 버전과 관련 라이브러리 버전 간 충돌로 인한 문제일 수 있으니 버전 확인 및 맞춤
• 권장 방법: 에러가 발생한다면 의존성을 명확히 관리하고, 필요 시 클린 설치(clean install)를 하거나 버전 롤백을 고려

3. 다국어(i18n) 지원 시 상태 관리(useContext vs 라이브러리) 🌐

• 질문: React로 다국어를 개발할 때 useContext로 global 상태 관리가 필요한가?
• 답변 요약:
  • react-i18next 같은 라이브러리들은 자체적으로 번역 상태를 관리하는 hook(API) 제공
  • 모든 페이지에 useContext를 통한 글로벌 언어 상태 관리를 꼭 할 필요는 없음
  • 번역이 필요한 곳에 해당 언어 데이터를 주입하면 됨
• 적용 팁: 설정 페이지에서만 언어 변경 시 리렌더링을 발생시키는 게 효율적

4. 다국어 번역 관리의 현실과 주의점 🚩

• 번역 개수: 지원 언어가 20개 정도 되는 경우 실제 번역 필요한 문장은 20개 정도임
• 실제 난이도:
  • 번역 데이터가 많아질수록 JSON 파일 용량 증가 및 관리 복잡성 상승
  • 전문 번역가 없는 상태에서 ai 번역 기능 사용 가능하나 검수가 필요
  • B2B나 비즈니스용 프로젝트에서는 정확한 번역이 필수임
• 관리 팁:
  • 번역 라이브러리를 적극 활용하고 직접 관리하는 것보다 유지보수 비용 절감 효과가 큼
  • 언어별로 분기 표현(예: 일본어의 복수형, 존댓말 등) 세심한 처리 필요
• 개발자 경험: "번역 없는 상태에서 퍼블리셔가 처리하던 시절과 달리 코드를 많이 수정해야 하는 점은 번거롭다"는 의견

5. 글자 크기 조절 기능 구현하기 📏

• 요청사항: 유저가 설정에서 글자 크기를 선택하면 사이트 전체에 반영되도록 하는 기능
• 방법:
  • useContext로 텍스트 크기 비율 값을 전역 상태로 내려서 필요한 부분만 적용
  • CSS 단일 설정으로는 이미지 크기 등 디테일 조절이 어려우므로 스크립트 로직이 필요
• 유의점:
  • 단순 픽셀 고정은 권장하지 않음. 브라우저 내 확대축소나 접근성 고려 필요
  • 텍스트 크기, 이미지 크기 등 개별 요소별로 따로 비율 관리하면 효과적
• 현실적인 조언: 세심한 조절 필요해 개발과 디자인 양쪽에서 어느 정도 ‘노가다’ 작업 발생 가능

면접팁⚡

• 숫자 애니메이션 구현 경험을 물으면: 'number-flow', 'motion-number' 같은 라이브러리를 알고 있다고 말하면 좋음
• React 에러 해결 경험 질문: 의존성 충돌과 클린 설치의 중요성을 강조하고, react-scripts 문제는 버전 호환 문제일 가능성이 높다고 설명
• i18n 관련 질문 시: 꼭 useContext로 관리하는 것이 아니라 라이브러리에서 제공하는 hook 사용을 권장하는 점을 어필
• 글자 크기 조절 구현 경험: 단순 픽셀 조절의 문제점을 이해하고 있으며, 접근성 및 반응형 디자인을 고려하는 방향으로 구현 필요함을 답변

링크🔗

• 숫자 카운트 애니메이션 가이드: https://css-tricks.com/animating-number-counters/
• number-flow 데모: https://number-flow.barvian.me/
• '4.5시간'에 관한 짧은 논란 (재미 요소): https://youtube.com/shorts/gAo71ftgK08?si=HQWwdrfdWVLR5C_N