node js와 mongo db를 이용해서 REST API를 설계하고 계획표 웹페이지 만들기
 |
1. 가장 큰 목표는 가운데에 적힌 '새로운취미'이다. 2. 그 주변의 8칸에 원하는 취미들(수영, 자전거 등)을 적는다. 3. 왼쪽 위부터 세부목표인 '수영'을 위한 8가지 달성방안을 적어나간다. |
|---|
구성은 아래와 같으며 마우스를 가져다 댔을 때 버튼의 아이콘이 돌아감
- 비밀번호를 입력할 때 조건에 부합하는 지 체크해준다. (부합할 때는 초록색, 아닐때는 빨간색)
- 에러 메세지
| 이미 존재하는 이메일 | 두개의 패스워드가 매칭되지 않을 때 | 패스워드가 6자리 이하일 때 |
|---|---|---|
 |
 |
 |
- 에러 메세지
| 패스워드가 맞지 않을 때 | 등록되지 않은 이메일 |
|---|---|
 |
 |
- 로그인이 되면 세션이 유지되며, 페이지마다 유효한 유저인지 체크함.
-
예시 계획표 - 회원가입 후 자동으로 생성됨
-
페이지 오른쪽 아래 플러스 버튼을 눌렀을 때 - 만다라트를 잘 몰라도 직관적으로 적어낼 수 있는 단계별 모달창들
 |
1. 6가지 테마 중 하나를 고른다. |
|---|---|
 |
2. 계획표의 주제를 정한다. |
 |
3. 가장 큰 목표를 정한다. |
 |
4. 그것을 이루기 위한 세부 목표를 정한다. |
 |
5. 성공적으로 생성 |
 |
- input 박스를 눌렀을 때 커짐 |
|---|---|
 |
체크 버튼 클릭 - 생성/저장됨 |
 |
돋보기 버튼으로 들어가 내용 수정 가능 |
|---|---|
 |
원하는 테마로 즉시 수정 가능 |
 |
휴지통 버튼을 눌러 삭제 |
|---|
 |
계정 아이콘을 누르고 로그아웃 |
|---|
- rem을 사용하여 화면 크기별로 html 폰트 크기 적용(모바일, 태블릿, 노트북, 데스크탑)
- list로 element를 나열해야 하는 부분에는 flex wrap 을 사용하여 줄바꿈 자동 적용
 |
 |
 |
 |
|---|---|---|---|
 |
 |
 |
 |
-
프론트엔드
- 템플릿엔진(ejs) : 서버단에서 받은 데이터를 조작하기 용이함
-
프레임워크
- node, express : 비동기 프로그래밍 기반의 좋은 성능과 JSON을 지원하는 Javascript의 생산성, 활발한 커뮤니티 등의 장점을 가졌기 때문에 사용하게 되었다.
-
데이터베이스
- mongoDB : 지금은 데이터 구조가 정해져있지만 후에 다른 기능이 추가되면서 새롭게 구성해야 할 수도 있다. 따라서, 유연한 DB 스키마를 가지고 있는 No SQL을 이용할 필요성을 느꼈다.
-
보안
- passport : 검증된 미들웨어로 세션과 쿠키 등을 쉽게 처리할 수 있고, 후에 구글 로그인과 같은 다양한 OAuth 인증을 활용할 때 비교적 통일된 구조로 사용할 수 있다.
- bcrypt: 사용자의 패스워드를 bcrypt 라이브러리로 암호화하여 안전하게 해싱하여 저장할 수 있다.
- Google Oauth : 이미 잘 짜여진 로그인 API를 사용하여 더욱 안전하고 사용자에게 편리한 로그인을 구현할 수 있었다. (구현 중)
-
디자인
- Figma로 디자이너와 협업
- User Schema
const userSchema = new mongoose.Schema({
email: String,
password: String,
date: {
type: Date,
default: Date.now,
},
});- Box Schema
const boxSchema = new mongoose.Schema({
title: { type: String, required: true },
objective: String,
themeId: String,
smallPlans: [{ objective: String, plans: Array }],
createdBy: { type: mongoose.Schema.ObjectId, ref: 'user' },
createdOn: { type: Date, default: Date.now },
});