Boiler Plate with Node.js - Model 및 Schema생성

스키마 생성

스키마를 생성한다

nosql은 테이블 없이 아무 데이터나 다 들어가서 편리하지만 문제가 있다

몽구스의 스키마를 이용하여 DB에 데이터를 박기 전 자료형, 유니크, 대소문자, 트림,글자수 등을 설정 할 수 있다

스키마는 테이블과 비슷한 기능을 한다

모델은 스키마를 감싸는 역할을 한다

root 폴더에 Models 폴더를 만들고 User.js 파일을 생성한다

const mongoose = require('mongoose');

const userSchema = mongoose.Schema({ // 스키마 생성
  name: {
    type: String,
    maxlength: 50,
  },
  email: {
    type: String,
    trim: true,
    unique: 1,
  },
  password: {
    type: String,
    minlength: 5,
  },
  lastname: {
    type: String,
    maxlength: 50,
  },
  role: {
    type: Number,
    default: 0,
  },
  image: String,
  token: {
    type: String,
  },
  tokenExp: {
    type: Number,
  },
});

const User = mongoose.model('User', userSchema); // 모델로 감싸준다

module.exports = { User }; // 재사용을 위해 export

참고 자료

기초 노드 리액트 강의 - John Ahn

Boiler Plate with Node.js - 개발 환경 구축 및 몽고DB 연동

개발 환경 구축

Node.js와 React를 활용한 Authentication Boiler Plate 제작 강의를 찾았다.

내용도 꽤 좋아보이고 react 복습 겸 node.js 맛보기로 딱이다.

node.js 는 이미 설치가 되어있기에 패스~

npm i --save express 익스프레스 설치 후 package.json의 scripts를 찾아서 다음을 추가한다.

expressjs.com DOC의 Hello world example을 참고하여 index.js에 간단한 서버 세팅을 진행한다.

const express = require('express');
const app = express();
const port = 5000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Example app listening on port : ${port}`);
});

npm run start로 Hello World! 출력을 확인한다.

몽고 DB 연동

몽고DB 회원가입 후 cluster 생성 후 User 생성

application code를 미리 복사해놓는다

npm i --save mongoose 몽구스 설치 (몽고DB를 편하게 사용하기 위한 라이브러리)

const mongoose = require('mongoose');
mongoose
  .connect(
    'mongodb+srv://<id>:<pwd>@ytubecloneproject.rzk32.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',
    {
      useNewUrlParser: true,
      useUnifiedTopology: true,
      useCreateIndex: true,
      useFindAndModify: false,
    }
  )
  .then(() => console.log('MongoDB Connected..'))
  .catch((err) => console.log(err));

application code에 미리 생성한 User id와 pwd를 넣는다

몽구스의 메소드를 이용하여 connect를 실시

다시 서버를 가동하면 몽고DB에 정상 접속되었음을 알 수 있다

참고 자료

기초 노드 리액트 강의 - John Ahn

2021-04-26 TIL

• 오늘 한 것
  1. 학원 대면수업 (15:30~22:00) 프로젝트 기간
  1. 어드민 백엔드 연동 - 어드민에 들어가는 리스트에 페이징처리를 추가하기로 했다. 원래 사용자 페이지의 게시판에 있던 로직이 있어서 그대로 적용을 하면 되기에 편하지만 어드민에 적용을 하려하니 이게 또 대공사다. 게다가 회원관리쪽 리스트는 조장님이 내가 임시로 짜놓은 코드에 맞춰서 알아서 작업을 해주어서 편했지만 다른 팀원은 view 쪽을 아예 볼줄 몰라서 AJAX 요청 로직부터 A to Z를 모두 수정해야한다. 결국 대공사가 진행될 예정이라는 뜻..
  2. Auth boiler plate clone - 원래는 react youtube clone 강의를 수강하려했지만 강의에서 사용하는 auth 관련 boiler plate를 이해하는게 먼저라고 판단했다. 그래서 boiler plate를 만드는 강의를 먼저 듣고 있다. node.js로 코딩을 하는데 꽤나 재밌다.

• 내일 할 것
  1. 학원 대면수업(15:30~22:00) 프로젝트 기간
  2. 어드민 백엔드 연동
  3. boiler plate with react, node.js 수강

• 끝으로

학원에서는 팀 프로젝트에 최선을 다하고 아침과 밤 시간을 활용해서 내 공부를 좀 챙겨야겠다.

리액트 프로젝트, 알고리즘 공부, 면접 준비 등 할 게 너무 많다

오늘의 한 줄 총평 : Node.js 재밌다

2021-04-23 TIL

• 오늘 한 것
  1. 학원 대면수업 (15:30~22:00) 프로젝트 기간
  1. 사용자 페이지 navigation 바인딩 - 사용자 페이지의 모든 페이지에 navigation을 추가하고 링크를 바인딩하는 작업을 했다. 페이지 양이 많아지면서 기능 하나를 추가하려면 노가다를 좀 해야한다..
  2. 메인 페이지 css 수정 - 배너의 이미지에 문구를 추가하고 허전해보이는 공간에 타이포그래피를 추가해보았다. 디자이너가 없으니 창작의 고통을 매번 느끼고 있다 ㅠ 무엇을 넣어도 허전해보이는 이 느낌..
  3. 어드민 모달창 수정 - 리스트의 상세 페이지 클릭시 부트스트랩 css에 의해 input 태그 위의 작은 글씨가 위로 살짝 올라가야하는데 글씨가 겹치는 이슈가 발생했다. focus되거나 글자를 입력하면 글자가 올라가는데 javascript로 데이터를 받아서 input 태그에 입력을 해도 글자가 올라가지 않았다. 해당 부분 로직의 마지막에 input 태그에 focus를 주는 것으로 해결했다.

• 내일 할 것
  1. 학원 대면수업(15:30~22:00) 프로젝트 기간
  2. 어드민 백엔드 연동
  3. boiler plate with react, node.js 수강

• 끝으로

팀 프로젝트는 마크업이 완료되고 동적으로 데이터를 받아서 뿌려주는 부분만 맡으면 되기에 슬슬 다른 프로젝트를 시작하려고 한다. 리액트로 무언가 만들고싶은데 다 까먹었다..우선은 복습겸 클론코딩을 먼저 해봐야겠다.

오늘의 한 줄 총평 : 리액트 복습 겸 node.js 맛보기

2021-04-22 TIL

• 오늘 한 것
  1. 학원 대면수업 (15:30~22:00) 프로젝트 기간
  1. 어드민 페이지 달력 수정 - Tempus Dominus bootstrap4 datetime picker를 사용해서 달력을 구현했었는데, 버튼을 클릭했을 때 달력이 생기면서 다른 태그들을 밑으로 밀어내는 현상이 발생했었다. z-index 등 css 수정을 해봐도 이게 고쳐지질 않았다. 그러던 중 input 태그의 type을 date로 설정해서 HTML5에서 기본적으로 제공하는 달력을 출력해봤는데, 달력이 다른 화면을 밀어내지 않고 겹쳐지게 잘 출력되었다. 부트스트랩은 코드도 길고 제이쿼리까지 사용했는데 이 부분을 싹 날리고 input type date로 다 바꾸었다. 어드민 페이지는 거의 모든 페이지에 달력이 들어가서 수정하는데 꽤나 시간이 걸렸다..
  2. 전체 페이지 이미지 경로 수정 - Spring MVC 프로젝트 안에 있는 이미지를 전부 아마존 S3 서버에 옮겼기 때문에 전체 페이지 (JSP, CSS, JS)의 이미지 경로를 수정해야했다.

• 내일 할 것
  1. 학원 대면수업(15:30~22:00) 프로젝트 기간
  2. 어드민 백엔드 연동

• 끝으로

프로젝트 규모가 점점 커지면서 수정해야하는 부분이 생기면 고치기가 힘들다.

오늘의 한 줄 총평 : 오늘은 정리만 한 듯