코딩 애플 Node.js, MongoDB로 일정 관리 만들기

나 이거 좋아해서 하나만 먹어야지! 가 아니고 지금 내 상황은 주는대로 아무거나 잡식처럼 마구 마구 먹어서 반복 학습을 통한 깨달음이 와야 한다.

그래서 리액트 프로젝트만 하면서 html, css, 리액트 + 리덕스를 연습이나 할까? 했지만, 이미 프로젝트를 나름 프론트엔드로 5번 소소하게 해 보아서 아예 모르는 사실은 아니기에 오늘 첫 커밋을 올려본다.

[8월 8일]

서버란?

닭갈비 집 알바생 : 닭갈비를 가져온다.

(헐 오늘 닭갈비 먹고 왔는데, 코딩 애플 강사님 미춋다ㅋㅋㅋ)

즉 서빙하는 사람. 요구하면 무언가를 가져다 준다.

 

네이버 서버에게 웹 소설 페이지 요청?

알겠습니다~하고 갖다줌 (응답)

 

서버 : 요청(HTTP)을 받으면 요청한 내용을 보내주는 프로그램

요청은 4가지 방식이 있음

  1. 읽기 : GET : 나 이 페이지 읽고 싶어 !
  2. 쓰기 : POST : 새로운 댓글 작성, 블로그 포스트 작성
  3. 수정 : PUT : 글을 수정
  4. 삭제 : DELETE : 글을 삭제

어떤 사람이 /list 라는 페이지를 GET 요청하면, 거기 해당하는 list.html 파일을 보내줌~ 끝! (이걸 프로그래밍 언어로 잘 풀이 하면 됨)

 

Node.js 란?

크롬의 자바스크립트 해석 엔진

브라우저 내에서 말고도 다른 환경에서도 Java Script 사용할 수 있도록

자바스크립트 실행창, 실행 환경임 = 런타임

서버도 만들 수 있음

장점 : Non-blocking/IO

Node.js 로 개발 시,

요청을 다 받음 : 일단 알겠음  : 처리 속도가 빠른 것 부터 결과를 갖다 줌.

기존 : 버거운 요청을 만나면 계속 대기 해야함

  1. SNS, 채팅 서비스 : 특징 -> 요청이 매우 많음 : 서버에 멈춤이 없음
  2. 코드가 짧고 쉬워서 빠른 개발 가능
  3. 웹 서비스 만들때 자주 만듦 -> 이미지 처리 서버는 별루.. : 파이썬이 강점

Java Script란?

웹페이지를 다이나믹하게 바꿔주기 가능

HTML 조작과 변경을 위해 만들어진 언어

HTML : 웹페이지에 글쓰고 그림 넣는 언어

 

자바스크립트 해석은 브라우저가 해석을 담당함 -> 각 웹사이트마다 해석 엔진이 있음

 

[8월 14일 : Part1 마무리 지음]

sudo npm install -g nodemon

서버 사용시 껏다 키기 불편할 때 입력

sudo npm install body-parser

nodemon server.js

서버 있다고 에러 뜰때

killall -9 node

nodemon server.js

다시 할 것~!

 

Post 요청으로 서버에 데이터 전송하고 싶으면 ?
1. body-parse 필요
2. from 안의 input 에 구분하기 위한 name 을 꼭 써야함!
3. name = “title”, name = “date” 와 같이서버를 REST API 하게 만들자
API란 무엇인가?
Application Programming Interface : 서버간의 통신 규약
웹 개발시 API란?
웹서버와 고객간의 소통방식 : 통신 규약REST API 원칙 6개
GET, POST, PUT, DELETE 를 REST 원칙에 의해서 쓰자
1. Uniform interface : 하나의 자료는 하나의 URL로
2. Client-Server 역할 구분 : 브라우저는 요청만 할 뿐, 서버는 응답만
3. Stateless : 요청1과 요청2는 독립적으로 의존성이 없어야 함
4. Cacheable : 캐싱이 가능해야 함 <- 크롬이 알아서 함
5. Layered System
6. Code on Demand

[8월 15일] MongoDB 설치

DB 종류

  1. 관계형

Mysql, Oracle 등이 있음 : 대부분 SQL 이라는 쿼리 언어를 사용해야 함

3차원이 데이터 저장이 어려움

2. NoSQL

MongoDB 가 유명함 – 무료 호스팅을 받아서 쓸것

자바스크립트 object data 스타일로 집어 넣기 가능

요새 속도에 조바심이 없다 보니 세팅도 문안하게 잘 따라가는 것 같다.

MongoDB 첫 설치
MongoDB 첫 설치

 

터미널 켜서 npm install mongodb@3.6.4 를 입력해서 라이브러리를 설치

mongodb+srv://디비계정아이디:디비계정패스워드@어쩌구/?retryWrites=true&w=majority

app.post(‘/add’, function (request, response) { // 1.
response.send(‘전송완료’);
console.log(request.body.title);
console.log(request.body.date); // 2db.collection(‘post’).insertOne({제목: request.body.title, 날짜: request.body.date}, function (error, result) {
console.log(‘저장완료’);
});
});
app.get(‘/list’, function (request, response) {
response.render(‘list.ejs’); // 외워서 쓸것! 누군가 /list 로 접속하면 list.ejs 파일을 보여 줌
});
EJS html 을 조금 더 쉽게 사용하기 위한 것
1. npm install ejs
2.app.set(‘view engine’, ‘ejs’);

3.항상 views 안에 ejs 파일이 있어야함

NoSQL 데이터베이스 특징

1. Scaling이 쉽다는 장점이 있습니다.

찰나의 순간에 대량의 데이터를 저장해야한다면 어떻게할까요?

기존 올드한 관계형 데이터베이스는 확장이 매우 어렵습니다. 보통 scale up 이라는 방법으로 서버의 성능을 키워야합니다.

하지만 대부분의 NoSQL 데이터베이스는 scale out이라는 방법으로 데이터를 분산저장하는 걸 기본적으로 지원합니다.

그래서 대량의 데이터를 빠르게 입출력해야한다면 보통 NoSQL이 제격입니다.

(관계형 데이터베이스도 잘 셋팅하면 분산저장 대충 잘합니다)

 

2. 대부분 다루기가 쉽습니다.

SQL 이라는 언어를 새로 배우지 않아도 데이터를 쉽게 입출력할 수 있습니다.

자바스크립트 object{} 자료형 다루듯이 데이터를 입출력할 수 있으니 사용자에게 매우 편리하죠.

그리고 여러분이 서버에서 쓰던 프로그래밍 언어로 DB를 다룰 수 있다는 장점이 있습니다. MongoDB도 그러고 있죠?

 

3. 대부분 스키마 정의 없이도 쉽게 쓸 수 있습니다. (이 열의 데이터는 정수입니다~ 라고 표현하는 짓거리 안해도 됨)

장점이자 단점일 수 있습니다. 그래서 MongoDB에선 스키마를 미리 정의하기 위한 Mongoose같은 라이브러리를 추가해서 사용하기도 합니다.

 

4.  NoSQL 데이터베이스는 기본적으로 SQL에서의 JOIN 연산을 적용하는게 기본적으로 어렵습니다.

서버 단에서 JOIN 연산을 쉽게 처리해주는 라이브러리를 이용합니다.

출처 : 코딩애플

[8월 23일 수요일]

자바스크립트 강의를 들으면서 https, request, response 등 브라우저의 기본 원리를 알아가면서 node.js 강의를 들으니 꽤 유익하다.

<!–서버데이터 집어넣어서 HTML 만드는 법 : ejs 사용 : 이상한 기호 넣어야함–>
<!–npm install ejs–>
app.set(‘view engine’, ‘ejs’); // ejs 설치후 이것 까지 써줘야함
views 파일 안에 list.ejs 파일 넣어주는 것도 잊지 말기 !

<!–서버에서 가져온 할 일 리스트 : 배열 형태로 들어옴–>
<!–반복문을 이용–>

<% for(var i = 0; i < posts.length; i++) { %>
<h4>할일 제목 : <%= posts[i].제목 %> </h4>
<p>할일 마감 날짜 : <%= posts[i].날짜 %> </p>
<% } %>
[8월 25일 금요일]
ejs 파일로 전환하기
app.use(‘/public’, express.static(‘public’));
// 미들웨어라고 불리며 css 파일 넣기에 사용
// public/main.css 생성 -> server.js에 위의 코드 추가
app.get(‘/’, function (request, response) { // 요청내용, 응답할 방법
response.render(‘index.ejs’)
});

Leave a Comment