1️⃣ 이 책을 선택한 이유는?최근에 진행된 특강에서 Node.js를 메인으로 서버 개발을 하는 개발자를 만났고, 그 경험은 나에게 큰 영향을 주었다. 프론트엔드 개발자로서 백엔드 기술에 대한 이해는 선택이 아닌 필수가 되어가고 있다고 생각한다. 그리고 Node.js는 그 중심에서 매우 중요한 역할을 차지한다고 생각한다(프론트엔드 개발자라서 그렇게 생각하는 것일지도!). 그리고 다가오는 백엔드 개발자의 소통이 필요한 프로젝트에서 효율적인 소통을 위해, Node.js에 대한 기술을 이해하는게 중요하다 생각했고, 이 책을 결정했다.2️⃣ 책을 읽으며 느낀 점들접근성이 좋은 설명이지만, 추가적인 학습이 필요하다고 생각된다."업무에 활용하는 Node.js"는 초보자도 부담 없이 접근할 수 있도록 쓰여졌다. 쉬운..
이전 시간 카카오와 Supabase앱을 만들어 연동하였습니다. ⬇️ 이전 포스팅을 못보셨다면 아래로 이동하여 세팅을 먼저 해주세요! ⬇️ Next.js 환경에서 Supabase를 이용해 간단하게 카카오 로그인 구현하기 (1) 이번 시간에는 Next.js 환경에서 Supabase를 이용하여 아주 간단하게 카카오 로그인을 구현해 보려고 합니다! Supabase | The Open Source Firebase Alternative Build production-grade applications with a Postgres database, Authen lurgi.tistory.com 이제 본격적으로 간단한 화면을 구현해 보겠습니다! 우선 Next App을 만들어 줍시다. npx create-next-app@l..
이번 시간에는 Next.js 환경에서 Supabase를 이용하여 아주 간단하게 카카오 로그인을 구현해 보려고 합니다! Supabase | The Open Source Firebase Alternative Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free. supabase.com Supabase는 구글의 Firebase와 유사한 서비스인데요, 쉽게 생각하면 백엔드 기능을 가지고 있는 서비스라고 생각하시면 됩니다. 데이터 베이스를 쉽게 다룰 수 있게 해주기 때문에 풀스택 개발에..
Next.js와 Typescript 환경에서 “모듈에 대한 선언 파일을 찾을 수 없습니다” 라는 에러가 발생하였습니다. 그리고 이 문제를 해결하는 방법을 소개하려고 합니다. 1️⃣ 사용하고자 하는 해당 라이브러리가 TS를 지원하는지 확인하자 우선적으로 살펴봐야 하는 것입니다. 옛날 라이브러리 같은 경우 pure esm.js파일만 가지고 있고 타입설정을 따로 해놓지 않는 경우가 있을 수 있습니다. 이런 경우에는 @node_modules/@types//index.d.ts 파일을 생성하여 직접 작성해주어야 합니다. 제가 사용하고자 하는 use-sound는 업데이트 한지 꽤 되긴 했지만, TS를 지원하는 라이브러리입니다. 2️⃣ TS를 지원한다면 npm의 @types/ 를 확인하자 npm i -D @types/..
Clerk | Authentication and User Management The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”. clerk.com ✨Clerk.js ? clerk.js 라이브러리는 로그인 구현을 도와주는 무료 JS라이브러리입니다. clerk.com 홈페이지의 메인 화면에는 인증 뿐만 아니라, 유저 매니징까지 할 수 있는 라이브러리라고 소개하는데요, React, Next.js 뿐만 아니라 다양한 프레임워크, 바닐라 JS에서도 사용할 수 있는 도구라고 합니다! clerk.js는 정말 간단하게 ..
Optimizing: Fonts | Next.js Using App Router Features available in /app nextjs.org Next.js 공식 문서와 영상을 참고했습니다. import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout..