전체 글 (20) 썸네일형 리스트형 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.. 자 이제 시작이야, Next 세계로 1. Next.js의 렌더링 방법 자, 이제 Next.js를 시작해볼까요? 먼저 신규 타입스크립트용 Next.js 프로젝트를 만들어 봅시다. // 터미널을 켜서 해당 명령어를 입력 $ npx create-next-app@latest --ts 프로젝트명 // @latest > 최신 버전을 의미함 // --ts > 타입스크립트를 의미함 저는 해당 설정으로 신규 프로젝트를 생성하였습니다. 그럼 아래 사진과 같은 파일구조로 프로젝트가 생성될 것입니다. 그럼 이제 생성된 프로젝트를 실행시켜 볼까요? $ cd next-sample $ npm run dev 로그의 내용을 보면 http://localhost:3000 에서 서버가 정상적으로 실행 된 것을 확인할 수 있습니다. 브라우저에 URL을 입력해보면 다음과 같은 .. React 맛보기 - React Hooks 지난 포스팅에서 리액트 컴포넌트에 대해서 공부해봤습니다. 이번 포스팅에서는 컴포넌트의 상태를 관리하는 리액트 훅에 대해서 알아보겠습니다. *이 포스팅 시리즈는 Next.js 공식 문서와 React 공식 문서, 타입스크립트, 리액트, Next.js로 배우는 실전 웹 애플리케이션 개발을 참고하여 작성했습니다. 예제에 사용된 버전은 다음과 같습니다. npm 9.5.0 react 18.2.0 typescript 4.9.5 훅(React Hooks) React Hooks는 React 버전 16.8에서 소개되었습니다. 훅은 함수 컴포넌트 안의 상태(State)나 생명 주기(Lifecycle)를 다루기 위한 기능입니다. 훅을 공부하기 앞서 리액트에서 말하는 상태와 생명 주기에 대해 먼저 알아볼 필요가 있었습니다. 상.. 이전 1 2 3 다음
