성준이의 공부블로그

웹 개발웹 개발이란 간단하게 생각하면 웹 사이트를 만드는 것이라고 생각할 수 있다. 하지만 직접 개발을 해보면 간단하게 개발할 수 없다(ㅠㅠ). 물론 포트폴리오 사이트나 홍보 사이트처럼 정보만 전달하는 웹 사이트는 비교적 간단할 수 있다. 이런 것을 정적 웹 사이트라고 한다. 하지만 웹 사이트는 눈으로 확인 가능한 부분만 개발하는 것은 아니다. 회원을 관리해야 하거나 글을 작성해야 하거나 작성된 글에 공감을 표시하거나 쇼핑몰처럼 어떤 상품을 보고 결제하는 것 등 다양한 서비스들을 제공해야 할 수도 있다. 이러한 어떤 기능들이 있는 웹 사이트를 동적 웹 사이트라고 한다.  웹은 사용자에게 보여지는 것 뿐만 아니라 사용자가 이용할 수 있는 기능과 서비스 모두를 담을 수 있어야 한다. 프론트 엔드 앞서 말한 ..

Do it! Node.js 프로그래밍 입문 10일차 입니다. 토큰 방식 세션은 서버에 저장되어 있으면서 클라이언트에 있는 세션 ID와 비교해서 사용자를 처리했습니다. 반면에 토큰에는 사용자 정보를 비롯해 위조를 막는 서명에 이르기까지 인증할 때 필요한 모든 정보가 포함되어 있습니다. 특정 서버에 저장하는 것이 아니므로 서버 간에 공유할 수도 있습니다. 토큰을 사용하는 인증 방식은 상태가 없으므로 서버에서 사용자 상태를 저장하지 않습니다. 그 대신 토큰 안에 사용자를 증명하는 내용이 포함됩니다. 토큰 방식을 사용하는 이유 쿠키와 세션에서는 서버에 세션을 저장해 놓고 상태가 없는 http 프로토콜을 마치 상태가 있는 것처럼 사용합니다. 하지만 이 방법은 세션이 저장공간을 차지 한다는 단점이 있습니다. 이에 ..

Do it! Node.js 프로그래밍 입문 10일차 입니다. 쿠키와 세션을 활용할 때 사용하는 모듈 npm install cookie-parser npm install express-session connect-mongo 명령어로 모듈 설치 쿠키 연습 const express = require("express") const cookieParser = require("cookie-parser") const app = express() app.use(cookieParser()) // cookie-parser을 미들웨어로 사용하겠다는 의미 app.get("/", (req, res) => { res.cookie("Kim", "1234", {httpOnly: true}) // res.cookie(name, val..

Do it! Node.js 프로그래밍 입문 10일차 입니다. 쿠키와 세션 http 프로토콜의 가장 큰 특징은 상태가 없다는 것입니다. 이것의 의미는 서버 입장에서 GET 요청을 보낸 사용자와 POST 요청을 보낸 사용자가 같은 사람이라는 것을 알 수 없다는 것입니다. 요청을 보내고 응답이 끝나면 http 프로토콜이 클라이언트와 서버 사이의 연결을 끊어 버리기 때문입니다. http 연결 상태가 계속 유지되지 않으므로 이런것을 상태가 없다, 즉 stateless라고 합니다. 이러한 문제를 해결하기 위해 쿠키와 세션이 필요합니다. 쿠키를 이용해 사용자 식별 쿠키는 웹 브라우저를 이용할 때 사용자 컴퓨터에 저장되는 정보입니다. 쿠키는 사용자가 웹 사이트에 접속했을 때 컴퓨터에 다운로드되어 브라우저에 저장되는 작..

Do it! Node.js프로그래밍 입문 9일차입니다. 폼 폼은 웹 문서에서 사용자 입력을 받을 수 있는 형태를 가리키는 용어입니다. Login Form, Order Form, ... name 속성은 필수! 프론트엔드에서 폼을 다룰 때는 class, id 속성만 있어도 됩니다. 하지만 서버에서 폼 필드의 값을 인식할 때는 name 속성을 사용하므로 없다면 반드시 추가해야 합니다. 폼의 요청 방식은 GET과 POST뿐 입니다. 폼을 통해 정보를 서버로 보낼 때 사용할 수 있는 요청 방식은 GET, POST 뿐입니다. 이때 GET 방식에서는 주소 URL에 정보를 함께 넣어서 보내고, POST방식에서는 요청 본문, 즉 req.body에 정보를 담아서 보냅니다. PUT, DELETE 방식은 AJAX(Asynch..

Do it! Node.js 프로그래밍입문 9일차 입니다. 템플릿 엔진 대부분의 웹 사이트나 애플리케이션은 사용자의 동작에 반응해서 서버에서 자료를 가져와 바뀐 내용을 보여주어야 합니다. 이렇게 내용이 동작으로 바뀌는 것을 처리할 때 사용하는 것이 템플릿 엔진입니다. 템플릿 엔진은 EJS, 퍼그, 핸들바 등이 있습니다. 템플릿 파일과 템플릿 엔진 데이터베이스에서 가져온 데이터 중 어떤 값을 어느 위치에 넣을지 미리 틀을 만들어 놓은 것을 템플릿 파일이라고 합니다. 여러 템플릿 파일을 만들고 데이터베이스에서 가져온 동적인 데이터를 템플릿 파일에 연결해 주는 역할을 하는 것이 템플릿 엔진입니다. EJS 기본 문법 뷰 엔진 설정하기 npm install ejs를 설치해줍니다. app.set(key, value)..

Do it! Node.js 프로그래밍 입문 8일차 입니다. DB모델에서 사용하는 함수 controllers/contactController.js 아래 코드 추가 const Contact = require("../models/contactModel") // DB모델 연결 create() DB에 새로운 도큐먼트를 생성합니다. Contact.create({name, email, phone}) find() 지정한 조건에 맞는 도큐먼트를 찾습니다. 조건을 따로 지정하지 않으면 모든 도큐먼트를 찾습니다. Contact.find() updateOne, updateMany updateOne는 조건에 맞는 첫 번째 도큐먼트만 업데이트하고 updateMany는 조건에 맞는 모든 도큐먼트를 업데이트합니다. Contact.u..

Do it! Node.js 프로그래밍 입문 8일차 입니다. 디자인 아키텍처 코드를 읽기 쉽고 관리하기 편하도록 기능이나 역할에 따라 여러 파일로 나눈 뒤 연결해서 사용하자는 것을 디자인 아키텍처라고 합니다. MVC 패턴 Model, View, Controller을 합해서 MVC 패턴이라고 합니다. 이렇게 3개로 나눠서 코딩하면 실제 처리 로직과 데이터베이스, 인터페이스 부분이 서로 영향을 받지 않습니다. 영역 설명 모델 - 애플리케이션에서 처리할 대상 - 데이터베이스를 통해 자료를 저장하거나 검색, 수정하는 함수들이 모델에 해당 - 사용자에게 어떻게 보일지는 신경 쓰지 않고 처리할 대상에 집중 뷰 - 컨트롤러나 모델의 처리 결과를 시각적으로 보여줍니다. - 흔히 사이트나 애플리케이션에 표시되는 화면을 만..

Do it! Node.js 프로그래밍 입문 공부단 6일차 입니다. next로 미들웨어 연결하기 미들웨어 함수 특성 미들웨어 함수는 요청객체나 응답객체를 변경하고 종료할 수 있습니다. 함수를 처리할 때 함수 안에서 응답이 종료되지 않고 그 결과를 다음 함수로 넘겨야 할 경우도 많습니다. 이때 next함수를 사용해서 다음 미들웨어 함수로 연결합니다. const requestTime = (req, res, next) => { // ... next() } app.use(requestTime) app.get("/", (req, res) => { res.status(200).send("Hello Node - 07") }) requestTime이라는 미들웨어 함수는 응답을 종료하지 않고 다음 미들웨어로 연결하기 위해..

Do it! Node.js 프로그래밍 입문 공부단 6일차 입니다. 상태코드와 err 객체 코드 메시지 설명 400 Bad Request 클라이언트 요청이 잘못되었거나 유효하지 않음 401 Unauthorized 권한이 없어 거절되었지만 인증을 다시 시도할 수 있음 403 Forbidden 권한이 없어 거절되었고 인증을 시도하면 계속 거절됨 404 Not Found 해당 데이터를 찾을 수 없음 500 Internal Server Error 서버에서 요청을 처리하는 동안 오류가 발생 오류 처리를 위한 미들웨어 함수의 기본형 const errorHandler = (err, req, res, next) => { // err : 발생한 오류의 여러 정보가 담겨있음 // err.message : 오류 메시지를 나타..