독일개발자초록이

Firebase를 Next.js에 연결하는 방법. 안녕하세요! 오늘은 간단하게 Firebase를 어떻게 Next.js 13에서 이용할 수 있는지 알아보려고 합니다. Firebase란? Firebase 사용방법? 연결 방법? 마치며. 1. Firebase란? Firebase란 Google에서 제공하는 서비스입니다. Firebase에는 여러가지 부가적인 빌드를 (기능) 제공합니다. 예를 들면 Firestore database, Authentification, Hosting과 같은 빌드가 존재합니다. 기본적으로 이러한 빌드들은 다 무료인 것으로 알고 있습니다. 하지만 더 나은 성능을 기대한다면 요금제를 선택하여 사용할 수도 있습니다. Firebase를 이용하면 손쉽게 데이터를 저장하고 유저를 생성할 수 있습니..

Prettify Type을 쉽게 확인하자! 안녕하세요! 오늘은 타입스크립트에서 Type 혹은 Interface를 사용할 때 편의성을 높여주는 또 다른 타입에 관해서 알아보려 합니다. 실제로 개발을 하다 보면 한 가지 타입만을 사용하지 않고 여러 타입을 합치거나 변형해서 사용하는 경우가 대부분입니다. 타입 혹은 인터페이스를 추상화 그리고 상속화하여 사용하기 때문입니다. 이는 OOP를 공부하시다 보면 자연스럽게 배우시고 사용하게 되실 것입니다. 타입과 인터페이스 Prettify란? 사용방법? 마치며 1. 타입과 인터페이스 타입스크립트를 사용하다 보면 자연스럽게 타입과 인터페이스를 사용하게 될 것입니다. 이를 사용할 때 한 가지 타입 혹은 인터페이스에 모든 필요한 key와 그에 상응하는 타입을 지정하지는 않습..

컴포넌트의 타입을 도와주는 ComponentProps를 알아보자. 안녕하세요. 오늘은 타입스크립트로 리액트라이브러리를 사용할 때 컴포넌트가 사용하는 Props의 타입을 쉽게 가져올 수 있는 ComponentProps에 관해서 알아보겠습니다. Props의 타입을 재사용하는 방법? ComponentProps란? 마치며. 1. Props의 타입을 재사용하는 방법? 리액트로 개발을 하다 보면 빈번하게 새로운 타입을 만들고 사용하며 import 하고 export 합니다. 그리고 이는 새로운 컴포넌트를 만들 때도 동일합니다. 아래의 예시를 잠깐 보겠습니다. import { FC } from 'react'; export type TestComponentPropsType = { testId: number; testNa..

NextJS .env.local이란? 안녕하세요! 오늘은 NextJS에서 env.local이란 파일이 무엇인지 알아보겠습니다. 개발을 하다 보면 특히 협업을 한다면 필연적으로 git을 사용하게 됩니다. 이때 우리는 gitlab이나 github에 소스코드를 업로드하게 됩니다. 이때 따로 비공개로 설정하지 않는다면 소스코드는 공개되는 경우가 많습니다. 하지만 개발을 하다 보면 다른 개발자나 타인에게 보여주기 민감하거나 혹은 보이지 않아야 하는 정보들이 있기 마련입니다. 예를 들면 데이터베이스에 접근하기 위한 Id, Password, Database name 등등이 있을 수 있습니다. 이러한 정보들은 자칫 타인에게 보이게 된다면 타인이 데이터베이스에 접근할 수 있기 때문에, 당연히 접근도 할 수 없고 보이지 ..

CSR, SSR 그리고 SSG는 무엇인가? 안녕하세요. 오늘은 CSR, SSR 그리고 SSG에 관해서 알아보도록 하겠습니다. 개발을 하다 보면 필연적으로 CSR, SSR 그리고 SSG에 관해서 들어보게 될 것입니다. 오늘은 이에 관한 내용을 짧고 쉽게 알아보도록 하겠습니다. CSR이란? SSR이란? SSG이란? 마무리. CSR이란? CSR은 Client Side Rendering의 줄임말입니다. 이는 클라이언트 즉 사용자 더 쉽게 말하자면 사용자가 사용하는 브라우저에서 모든 일들이 이루어진다는 것입니다. 지금까지 홈페이지에 접속할 때 사용되는 가장 보편적이고 잘 알려진 방법으로써 클라이언트는 서버로부터 필요한 모든 자바스크립트 파일을 다운로드하게 됩니다. 이때 로직에 필요한 파일들뿐만 아니라 프레임워크 ..

Next.JS 홈페이지의 언어를 바꾸는 쉬운 방법? 안녕하세요. 요즘 홈페이지는 한 가지 언어가 아닌 여러 나라의 언어를 제공하는 경우가 많습니다. 이러한 경우 사용자가 원하는 언어를 내비게이션이나 설정에서 바꿀 수 있는 경우가 많죠. 하지만 사용자 즉 유저가 현재 사용하는 혹은 자주 사용하는 언어를 기본값으로 제공한다면, 사용자는 번거롭게 자신에게 맞는 언어 바꾸는 번거로움이 덜게 될 것입니다. 이번 시간은 Next.JS에서 제공하는 훅을 사용하여 사용자가 현재 사용하는 브라우저의 언어에 따라 그에 상응하는 언어를 기본값으로 보여주는 방법을 알아보겠습니다. useRouter 훅을 사용하자. 마치며 1. useRouter 훅을 사용하자. useRouter는 Next.JS에서 기본으로 제공하는 훅입니다. ..