전체보기 (31) 썸네일형 리스트형 Spring Boot, Redis를 이용해 캐싱 구현하기 회사에서 Spring Boot를 주로 사용하고 있지만 이제는 업무 기반의 쿼리 개발이 많아지다보니 Spring 기술을 사용할 일이 많이 없어졌습니다. (쿼리 데이터 출력 -> 클라이언트로 서빙하는 작업의 반복..) 요즘은 스터디에서 진행 중이던 프로젝트도 종료가 되어 여유가 생겨 예전에 사용해봤던 캐싱 기능을 Redis에 접목시켜 보기로 했습니다. 현재 개발 환경은 다음과 같습니다. Spring Boot 2.7.5 jdk11 Gradle Mybatis MySQL 8 캐시란 캐시는 자주 사용되는 데이터나 값을 저장해 놓은 임시 장소를 말합니다. 캐시는 데이터 저장소 유형 중 하나로 반복되는 데이터를 돌려주는 상황에 효율적으로 사용할 수 있습니다. 캐시를 사용함으로써 반복되는 데이터의 접근을 피해 DB 서버.. Node와 MongoDB(+Mongoose) 이번에 교회 서비스를 개발하면서 MongoDB를 사용했는데요. SQL 문법에 익숙했는데 새로운 문법을 배우니 기록해두면 좋겠다는 생각이 들었습니다. 스키마 관리를 위해 Mongoose를 추가했습니다. DB 생성과 설정하는 방법은 이전 포스팅을 참고해서 진행하실 수 있습니다. SQL 문법과 비교해서 하나씩 살펴보겠습니다. 예제에서 사용될 컬렉션은 다음과 같습니다. 사용자 : users export const UserScheme = new Schema({ _id: { type: ObjectId }, userName: { type: String }, roleCode: { type: String }, createDate: { type: Date, default: Date.now }, }); 역할 : roles .. 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.. 이전 1 2 3 4 다음
