오늘 배운 것.

react-i18next

• 장점
  1. 유연한 설정:
     다양한 설정 옵션과 플러그인을 통해 확장 가능. 고도로 커스터마이징할 수 있음.
  2. 동적 로드 지원:
     필요에 따라 번역 파일을 동적으로 로드할 수 있음. 지연 로딩을 통해 초기 로드 시간을 단축.
  3. 다양한 기능:
     번역, 간단한 플루럴라이제이션, 날짜 및 숫자 포맷팅 등 다양한 기능 제공. 네임스페이스 지원으로 번역 파일 구조를 체계적으로 관리 가능.
  4. TypeScript 지원:
     TypeScript로 작성된 프로젝트에서 타입 안전성을 제공.
  5. 플러그인 시스템:
     커뮤니티에서 다양한 플러그인을 제공하여 기능을 확장할 수 있음.
• 단점
  1. 복잡한 설정:
     초보자에게는 설정이 복잡하게 느껴질 수 있음. 다양한 옵션과 설정을 이해하는 데 시간이 걸릴 수 있음.

react-intl

• 장점
  1. ICU 메시지 포맷:
     ICU 메시지 포맷을 사용하여 복잡한 메시지 구조를 관리 가능. 다양한 언어와 문화권의 메시지를 쉽게 처리할 수 있음.
  2. 간단한 API:
     API가 직관적이고 사용하기 쉬움. 간단한 설정으로 빠르게 시작 가능.
  3. 다양한 포맷팅 옵션:
     날짜, 시간, 숫자, 통화 등 다양한 포맷팅 옵션 제공. 각기 다른 로케일에 맞춘 포맷팅이 가능.
  4. 서버사이드 렌더링 지원:
     서버사이드 렌더링(SSR)과 함께 사용하기 용이함. SEO 친화적인 애플리케이션을 만들 수 있음.
• 단점
  1. 제한된 유연성:
     react-i18next에 비해 설정과 확장이 제한적. 플러그인 시스템이 없어 커스터마이징에 한계가 있음.

비교 요약

1. 유연성과 확장성:
   react-i18next가 더 유연하고 확장성이 뛰어나며 다양한 설정 옵션과 플러그인을 제공.
2. 간단한 설정과 사용:
   react-intl은 간단한 API와 설정으로 쉽게 시작할 수 있으며, ICU 메시지 포맷을 사용하여 복잡한 메시지 구조를 관리할 수 있음.
3. 포맷팅 기능:
   react-intl이 날짜, 시간, 숫자 등 다양한 포맷팅 옵션을 제공하며, 특히 ICU 메시지 포맷을 활용한 포맷팅에 강점을 가짐.
4. 동적 로드와 네임스페이스 관리:
   react-i18next는 동적 로드와 네임스페이스 관리 기능을 제공하여 대규모 애플리케이션에서 유용함.
5. 서버사이드 렌더링 지원:
   두 라이브러리 모두 서버사이드 렌더링을 지원하지만, 설정과 사용법에 차이가 있음.
6. 사이즈:
   react-i18next가 5.7kb 로 더 작고, react-intl이 18.3kb 로 더 크다.

결론

• 초보자: 간단하고 직관적인 설정을 원한다면 react-intl.
• 복잡한 요구 사항: 고도의 커스터마이징과 다양한 기능이 필요한 경우 react-i18next.

• ngrok로 localhost:3000 열기
• PWABuilder에서 manifest 작성하기
• next-pwa 설치해서 sw.js(service-worker.js) 작성하기

tailwindcss.config 파일은 tsconfig와 다르게 빌드된다

웹페이지 스크롤 애니메이션

IP Set을 생성하여 허용할 IP 주소를 등록합니다.Web ACL에 Custom Rule을 추가하여 등록된 IP Set 이외의 IP 주소를 차단하도록 설정합니다.허용되지 않은 IP 주소로 접속하면 403 Forbidden 응답을 받게 됩니다.

참고) https://jaykos96.tistory.com/50