app router
-
[Next.js 14][Swiper] 스와이프 가능한 카드 리스트 만들기 (Carousel Slider)웹 개발/Nextjs 14 2024. 3. 13. 02:42
포스팅을 너무 각 잡고 쓰려니까 오히려 안 쓰게 돼서, 아예 간단하게 작성하는 버그 해결 / 궁금한 점 해소 용 카테고리를 하나 팠다. 암튼 이 편한 카테고리의 첫 포스팅은 Swiper, 너로 정했다! 쓰고 보니 본 카테고리로 올려도 될 것 같아 격상시켰다. 렛츠고. 구현해야 하는 UI 사용자가 등록한 카드를 아래의 형태로 보여주고, 슬라이드 / 화살표 버튼을 이용하여 변경하는 UI를 작성하고자 한다. 이런 형태를 보통 Carousel Slider라고 하는데, 위의 키워드랑 Card list 등등의 키워드로 찾아본 라이브러리 중에서는 확장하기 편함 + 쓰기 쉬운 놈을 못 찾았다. React Swiper 처음부터 내 입맛대로 만드는 게 마음 편하긴 하지만, 내가 개발할 수 있는 시간은 한정되어 있어서 아래..
-
[Next.js 14] App router 기반 Localization / Internationalization [i18next]웹 개발/Nextjs 14 2024. 2. 24. 20:12
다국어를 지원하는 웹에 들어가보면 드롭다운으로 언어를 바꾸고, 그에 맞게 텍스트가 휙휙 바뀌는 것을 본 적이 있을 것이다. 이번 포스팅에서는 i18next 모듈을 이용해서 앱 라우터 기반의 Next.js 프로젝트에 다중 언어 기능을 추가하는 방법을 다루고자 한다. 나라마다 중요하게 받아들이는 정보가 다르고, 익숙한 디자인도 다르므로 사실 정확하게 현지화를 한다고 하면 국가별로 따로 웹 페이지를 만들어야 한다. 하지만, 우리는 개발 리소스가 한정되어 있고 언어만 바뀌면 웹 서비스를 사용할 수 있으니 이 방법으로도 충분하다. 사실 웹 개발이 어느 정도 진행된 지금, 초반에 추가한 Localization(Internationalization라고도 하지만 앞으로의 내용에서는 Localization으로 통일하겠다..