프론트엔드 (22) 썸네일형 리스트형 Next.js + Typescript로 NAVER MAP API 연결하기 안녕하세요. 요즘따라 날씨가 좋아서 더욱더 공부하기 싫은 인간 1입니다.이번에 새로운 프로젝트 (가제: 물고기 탐험단)를 진행하면서 네이버 지도 API를 사용하게 되었습니다. 예전에 API를 사용해 본 적은 있지만, 이번에 NextJS + typescript로 써본 적은 처음이라 간단하게 사기도 올릴 겸 포스팅을 해보았습니다. 레고.. 우선, 제가 네이버 지도를 그리는 과정은 아래와 같습니다.1. 해당 주소를 위도, 경도로 변환 (ex, '경기도 성남시 분당구 불정로 6' > 해당 주소의 위도, 경도)2. 변환된 위도, 경도로 지도 생성1. 네이버 application 등록하기 NAVER CLOUD PLATFORMcloud computing services for corporations, IaaS,.. Next.js + Firebase를 활용한 모바일 푸시 구현 요즘 코드드림팀에서는 교회를 대상으로 하는 서비스를 개발하고 있습니다. 교회 다니는 팀원이 있어 간단한 서비스를 제공해볼까라는 이야기에서 시작되었는데요. 개발할수록 기능이 하나씩 추가되고 있어요. 최근에 서비스 안에 기능 중 모바일 앱으로 푸시를 보내는 기능이 필요해졌는데요. 파이어베이스에서 Node를 지원하는 것을 보고 파이어베이스를 이용하기로 했습니다. Spring에서만 해봤던 기능을 Next.js에서는 처음 해보게 돼서 포스팅을 작성해봤고, 테스트 환경은 다음과 같습니다. *모바일앱은 Flutter를 이용했고 푸시를 받기 위한 환경은 갖춰진 상태입니다. Next.js 14 Firebase admin sdk Typescript 5 1. 서비스 키 생성 1-1) 파이어베이스에 접속 후 프로젝트 선택 1.. AWS S3 이미지 업로드하기 (with NextJS) 안녕하세요. 오랜만에 쓰는 포스팅이네요. 코드드림 어드민 프로젝트가 거의 마무리되어 가고 있습니다. 저희는 AWS S3를 사용해 이미지를 저장하게 되었는데, 이때 배우게 된 내용을 복기하고자 이번 포스팅을 기획하게 되었습니다. 생각보다 별건 없습니다. 레고 1. AWS 계정 생성하기 우선 계정을 생성해 볼까요? 아래 링크로 들어가서 무료 계정을 생성해 봅시다. Amazon S3 동영상 Amazon S3 시작하기 - 데모(7:37) Amazon S3 데이터 보호 개요 - 버전 관리, 객체 잠금 및 복제(7:41) Amazon S3 Intelligent Tiering 스토리지 클래스 소개(1:18) Amazon S3 Glacier 스토리지 클래스 소개(1:30) 자습 aws.amazon.com 기존에 계정이.. Vercel로 배포하기 드디어 코드드림의 어드민 서비스 개발이 완료되어 배포를 남겨두고 있었습니다. 기존 코드드림 사이트는 리액트로 개발되어 Git Pages를 호스팅 서비스로 사용하고 있는데요. 코드드림 어드민은 Next.js로 개발한만큼 Vercel을 이용해 배포하기로 했습니다. Next.js를 Vercel사에서 만들기도 했고, 배포 또한 매우 쉽다고 하니 고민할 필요도 없었습니다. 본 포스팅에서는 Vercel 배포, 가비아를 통해 구입한 도메인을 연결하는 방법을 소개합니다. 현재 프로젝트 버전은 다음과 같습니다. Next.js 14 Typescript 5 NextAuth 4 1. 프로젝트 등록 & 배포 1-1) Vercel에 접속합니다. 1-2) 배포하려는 프로젝트를 import 합니다. 1-3) Build Command.. Next.js + NextAuth를 활용한 로그인 구현 지난 글에서 언급했듯 코드드림의 어드민 서비스를 개발하기 시작했습니다. 팀원들과 모듈을 나누어 개발을 하기로 했고, 저는 로그인 모듈을 맡았습니다. Spring + Spring Security를 활용한 로그인은 많이 구현해봤지만 Next는 처음 해보게 되었습니다. 문법도 너무 어색하고 이게 어떻게 되는거지 싶은게 많았는데요. 기능이 잘 구현되니 꽤 재밌었습니다. 이번 포스팅에서는 로그인 기능을 구현한 과정을 소개합니다. DB를 연결해 사용하고 있기 때문에 지난 글을 통해 DB 연동을 하고 진행하시면 예제를 따라하는데 훨씬 수월하실거라 생각됩니다. 예제에 사용된 버전은 다음과 같습니다. Next.js 14 Mongoose 8.0.3 Typescript 5 NextAuth 4 먼저 로그인을 구현하기 전에 사.. MongoDB는 무엇인가? 코드드림팀은 다음 프로젝트로 [ MongoDB ]를 사용하기로 결정했습니다. 그전에 [ MongoDB ]에 대해서 알아볼까요? ※ MongoDB 설치, 사용법, 예시에 관한 건 에디님의 포스팅에서 확인해 볼 수 있습니다. Next.js + MongoDB 이제 우리는 Next.js로 프로젝트를 시작합니다. 기획 중인 프로젝트는 코드드림의 어드민 서비스를 만들어볼 계획입니다. 본 포스팅에서는 Next.js 프로젝트에서 DB를 연동하는 과정을 소개합니다. code-dream.tistory.com 몽고 DB는 크로스 플랫폼 도큐먼트 지향 데이터베이스 시스템이다. NoSQL 데이터베이스로 분류되는 몽고 DB는 JSON과 같은 동적 스키마형 도큐먼트들을 선호함에 따라 전통적인 테이블 기반 관계형 데이터베이스 구조의.. 물러가라! Next.js (기초) 오늘은 Next.js의 기본적인( = 멋진) 기능 네 가지 기능해 대해서 소개하고자 합니다. 링크 next/link 는 Next.js에서 다른 페이지로 이동하기 위한 내장 컴포넌트입니다. import Link from 'next/link' go to main 위와 같이 코드를 쓰면 HTML에서는 아래와 같이 렌더링이 됩니다. go to main 쿼리 파라미터로 지정하는 경우, href 문자열로 지정하는 방법 외에 객체를 사용해서 지정할 수도 있습니다. go to main go to main 또한, router 객체의 메서드를 활용해서 페이지를 이동할 수도 있습니다. 아래의 코드를 확인해봅시다. import { useRouter } from 'next/router' const router = useRout.. Next.js + MongoDB 이제 우리는 Next.js로 프로젝트를 시작합니다. 기획 중인 프로젝트는 코드드림의 어드민 서비스를 만들어볼 계획입니다. 본 포스팅에서는 Next.js 프로젝트에서 DB를 연동하는 과정을 소개합니다. DB는 MongoDB를 사용했으며 Mongoose라는 라이브러리를 사용했습니다. MongoDB와 Mongoose에 대해서는 메리님의 포스팅에서 확인하실 수 있습니다. 예제에 사용된 버전은 다음과 같습니다. Next.js 14 Mongoose 8.0.3 Typescript 5 1. MongoDB 설정 1-1) 프로젝트 생성 MongoDB 계정을 만들고 사이트에 접속해 프로젝트를 생성합니다. 1-2) Database 생성 생성된 프로젝트에서 Create를 통해 Database를 생성합니다. 1-3) Databa.. 이전 1 2 3 다음
