Reactjs

Vercel에 Namecheap 도메인 설정 및 연결

Nextjs를 통해서 Vercel에 배포를 하게 되면 도메인이 필요한데 가장 싸게 구입할 수 있는 곳이 Namecheap이라고 생가합니다. 이번에도 간단한 프로젝트를 진행하기 앞서서 도메인을 하나 사서 Vercel에 배포할 프로젝트 도메인 연결을 해보려고 합니다. 먼저 도메인을 구입하기 위해서 Namecheap으로 이동해서 원하는 주소를 한번 찾아 보겠습니다. 정말 좋은 도메인 이름인데 아직 아무도 등록하지 않았고 1년에 만 사천원 정도 합니다. 이제 결제를 해주고 연결하는 방법을 본격적으로 알려드리겠습니다. 먼저 시작하기에 앞서서 Vercel에 이미 프로젝트가 있고 계발을 해왔던 것을 전제로 시작하겠습니다. 일단 프로젝트를 선택해서 Setting으로 가봅시다. namecheap 도메인을 연결 하려면 세..

Next.js를 사용해서 다국어 지원하는 방법 - next-intl, next app router

Nextjs 13/14에서 다국어(localization)를 지원 할 수 있도록 설치 부터 어떻게 다른 언어를 사용 할 수 있는지 알아보겠습니다. 예시에서 사용될 next.js에 버전은 13/14이고 여기서 app 라우팅을 사용해서 알려드리려고 합니다. Localization을 지원하기위해서 사용한 라이브러리는 next-intl 입니다. Internalization을 해야 하는 이유 한국어를 적용해서 만들어도 사이트에 많은 사람들이 들어올 수도 있지만 꼭 한국 사람들을 위한 서비스가 아니라면 전 세계를 대상으로 타게팅해서 사이트나 앱 유입을 높이는 것이 좋습니다. 한국 사람들만 사이트를 사용한다면 현재 기준으로 2천5백만 명에게 접근할 수 있습니다. South Korea 25,300,000 하지만 영어도..

react-native-vector-icons 설치하는 방법 및 사용방법

리엑트 네이티브 프로젝트를 하다 보면 아이콘이 필요한 시기가 찾아옵니다. 웹 쪽에는 react-icons가 있지만 react native에는 react-native-vector-icons가 있습니다. 설치 방법이 아주 간단할 줄 알았지만 그냥 설치만 해서는 안 되는 걸 알았습니다. 원래는 react-native에 자동으로 linking을 하게 하면 라이브러리를 복사해서 저장하게 되는데 필요한 아이콘 모음만 가져가기 위해서 이런 셋업이 필요합니다. 모든 react-native-vector-icons 보는 방법 보는 방법은 간단 합니다. 아래 웹사이트에 가셔서 브라우징을 하시면 됩니다. 처음 보는 아이콘들도 있는데 아래와 같이 14종류에 아이콘 모음이 있습니다. AntDesign by AntFinance (..

Next js로 API 만들어 사용하기(API routes)

Next js를 오랜만에 사용하려고 보니 이제 nextjs에서 바로 express로 추가해서 api 서버를 만드는 게 가능하다는 것을 알았습니다. 예전 같으면 express 서버를 따로 배포해서 사용했어야 됐지만 이제는 간단히 nextjs에 추가해서 vercel로 배포하면 되더라고요. 오늘 해볼 것은 nextjs api routes를 사용해서 sqlite 데이터 베이스에서 가저온 데이터를 response로 보내는 것을 해볼까 합니다. Nextjs API routes는 무엇인가? Nextjs는 API를 바로 추가 할 수 있는 기능을 API routes라고 부르고 있다. 이 기능은 pages/api 디렉토리 안에 만들어진 파일들이 rest api path가 된다 넥스트 js를 시작할 때 가장 먼저 해야 하는..