안내
확인
U
회원관리
로그인
가입
찾기
회원아이디
패스워드
로그인유지
회원아이디
이름
이메일
휴대폰번호
패스워드
패스워드 재입력
회원이용약관 및 개인정보 취급방침에 동의 합니다
회원이용약관 보기
개인정보처리방침 보기
본인 이름 입력
회원가입시 이메일 입력
s
Next.JS 15.x + MySQL 로 실무 웹사이트 만들기
가. 웹사이트 기능정의서
유페이퍼
|
장선근
|
2025-04-14
9
읽음
0
0
0
3 / 71 목차보기
이전
3 / 71 목차
다음
로그인
회원가입
s
songwritersg 페이퍼
1. 프로젝트를 시작하기전에
2. 어떤 웹사이트를 만들것인지 정리해보자
가. 웹사이트 기능정의서
나. REST API 명세서
다. DB 테이블 명세서
라. 개발 명세서
3. 프로젝트를 시작할 준비를 하자
가. Next.js 프로젝트 생성
나. MySQL 서버 구동을 위한 Docker 설정
다. 필요한 의존성 패키지를 설치하자
라. Prisma 초기화
마. editorconfig
4. 데이타베이스 테이블을 설계하자
가. 스키마 파일 수정 전 준비하기
나. ENUM 필드를 정의하자
나. 첨부파일을 위한 테이블 스키마
라. 회원 관련된 테이블 스키마를 만들자.
마. 게시판 관련된 테이블 스키마를 만들자.
바. 실제 데이타베이스 테이블에 반영 및 Type 파일 생성
5. 중요 라이브러리 파일을 만들자
가. 프로젝트 전체 디렉토리 구조
나. 데이타베이스 연결을 위한 Prisma 라이브러리 작성
다. HTTP Request를 위한 Axios 라이브러리 작성
라. 서버 로그 기록을 위한 logger.ts 작성
6. 레이아웃 파일들을 만들자
가. 두가지의 레이아웃
나. 일반 레이아웃과 관리자 레이아웃 모두에서 사용되는 UI
1) 전체 UI에서 사용될 폰트 설정하기
2) 전체 UI에서 사용될 글로벌 스타일시트 파일 만들기
3) 공통 layout.tsx 파일
다. 일반 레이아웃과 관리자용 레이아웃
7. 기본 컴포넌트를 만들자
가. 컴포넌트에 사용할 Type을 정의하자.
가. Button 컴포넌트를 만들자
나. Input 컴포넌트를 만들자
다. Textarea 컴포넌트를 만들자
라. 페이지네이션 컴포넌트를 만들자.
마. 팝업레이어 컴포넌트를 만들자
바. Table 컴포넌트도 만들자
바. Select와 Switch 컴포넌트 만들기
8. 로그인 기능을 만들자.
가. 로그인 정보 처리를 위한 Context 만들기
나. 로그인 페이지 만들기
다. 로그인 처리 API 작성하기
라. 토큰 재발행 API를 작성하자
마. 회원 로그인 처리를 위한 미들웨어를 작성하자.
9. 회원가입 기능을 만들자.
가. 회원가입 페이지 만들기
나. 아이디 중복확인 기능을 만들자.
다. 휴대폰번호 자동 하이픈 기능을 추가하자.
라. 휴대폰 인증 기능을 추가하자.
마. 회원가입 처리 API 작성하기
바. 닉네임에 금지단어를 넣지 못하도록 기능을 추가해보자.
10. 관리자 페이지 레이아웃을 만들자.
가. 관리자 페이지의 기본적인 레이아웃을 만들자.
나. 게시판 관리자 기능을 만들자.
1) 생성된 게시판 목록을 볼 수 있는 페이지를 만들자.
2) 게시판을 생성하는 페이지를 만들자.
3) 게시판 생성을 처리하는 API를 만들자
4) 게시판 고유키에 사용할 수 없는 단어를 추가하자.
11. 게시판 기능을 만들자.
가. 게시판 기능의 전체 폴더 구조
나. 게시글 목록보기 페이지
다. 파일업로드 컴포넌트를 만들자
라. 게시글 작성/수정/답글 기능을 만들자.
마. 게시글 상세보기 페이지를 만들자.
바. 게시판 글 기능을 응용하여 댓글 기능을 직접 만들어 봅시다.
12. 릴리즈 서버에 배포하자.
가. PM2 를 이용하여 배포하기
나. Nginx Proxy설정하기
13. 이 책을 마치며