실시간 소통을 하고 싶으면 서버와 유저간 Web Socket 을 뚫으면 된다. socket.io 라이브러리를 설치해서 한번 사용해보자. 사용 방법 npm install socket.io npm 을 이용해서 설치를 완료한 후에 server.js 에 3줄의 코드를 추가한다. (const app = express() 보다 아래에 위치해야한다.) 그리고 app.listen 코드를 http.listen 으로 바꿔준다. 이전에는 express 를 이용해서 서버를 띄웠던 걸 http 라는 node.js 라이브러리 + socket.io 를 이용해서 띄우는 것이다. socket.ejs 라는 파일을 하나 새로 만든다. https://cdnjs.com/libraries/socket.io socket.io - Librarie..
채팅기능을 만들어보자 채팅메세지도 결국 게시물 발행기능과 똑같다. 새로운 점이 있다면 채팅메세지는 채팅방 게시물에 종속이 되어야한다. 댓글 만드는 법 댓글은 댓글 collection 을 하나 새로 만들어서 모든 댓글을 저장하면 된다. 하지만 그러면 그 댓글들 하나하나가 어떤 글에 달린 댓글인지 확인할 수 없게될 것이다. 때문에 모든 댓글은 부모 게시물이 무엇인지 를 명시해야한다. 따라서 게시물 collection 과 댓글 collection 을 만들고 댓글 1의 부모게시물은 게시물 2고, 댓글 2의 부모 게시물은 게시물 4이다... 이런식으로 collection 끼리 관계를 맺어야한다. 채팅방 만드는 POST api 만들기 채팅 버튼을 누르면 chatroom 이라는 collection 에 document..
이미지 업로드 하는 방법에 대해서 배워보자 이미지 업로드 할 수 있는 페이지 만들기 upload.ejs 라는 파일명으로 view 를 하나 만들어줬다. enctype은 서버로 폼 전송하는 방식이다. enctype을 multipart/form-data 로 설정할 경우 인코딩하지 않고 그대로 전송한다는 의미이다. application/x-www-form-urlencoded 으로 설정하는 경우 base64라는 인코딩형식으로 인코딩되어서 전달됨. 일단 업로드 페이지는 위와같이 마련했다. upload페이지를 렌더링해주는 GET api를 만들어봤다. /upload 경로로 get 요청을 보내면 upload.ejs 를 렌더링 해줄거다. 업로드한 이미지를 하드에 저장 라이브러리를 하나 설치해준다. npm install m..
두 route 들을 다른 파일에서 관리하려고 한다. routes 라는 폴더를 만들고 shop.js 라는 파일을 만들어줬다. 아래와 같이 작성한다. 기존에 app 으로 사용했던걸 router 로만 바꾸어주면된다. module.exports 란? module.exports = 변수명; 이런식으로 쓰면 다른 곳에서 쓸 수 있게 저 변수를 내보내준다. 그리고 require('./파일경로'); 이런식으로 쓰면 다른 파일을 불러올 수 있다. 여기서 불러온 파일이 내보내는 변수가 있을 것이다. 그걸 가져다 쓸 수 있다. import 나 export 문법으로 대체 가능하다. 그러면 기존에 server.js 에 있던 route 대신에 아래와 같이 적어줄 수 있다 app.use() 는 미들웨어를 사용하고 싶을 때 쓰는 함..
지금은 삭제버튼을 누구나 누를 수 있다. 하지만 회원가입기능이 있으니까 내가 썼던 글만 삭제가능하도록 해보자 /register 로 POST 요청이 들어오면 서버는 DB에 저장하면 될 듯하다. /register 경로로 POST 요청이 오면 login 이라는 collection 에 insertOne 함수로 데이터를 삽입한다. 콜백함수로 / (홈 경로)로 redirect 해서 돌아가도록 해줬다. 글 작성자만 삭제가 가능하도록 하기 일단 회원가입을 해서 계정을 하나 만들어준다. 지금을 글을 발행할 때에 글작성자가 따로 추가되지 않는다. 그래서 writer 라는 속성을 따로 만들어줬다. req.user._id 에는 현재 로그인한 유저의 정보가 들어있을 것이다. 따라서 writer 의 값을 이걸로 넣어줬다 post..
검색 기능 일단 검색 창을 만들어주자. list.ejs 이 검색창에서 키워드를 입력하고 검색을 누르면 새로운 페이지에서 검색결과를 보여주도록 구현해보자 1. 검색 버튼을 누르면 서버에 POST 요청을 해야한다 2. 서버는 DB에서 데이터를 꺼내줘야한다. collection().findOne() collection().find().toArray() 등을 활용하면 되겠다. 그런데 GET 요청으로도 서버로 데이터를 전달 가능하다. GET 요청 시에 URL 뒤에 데이터를 심는 방법이다 URL query string query string 작성법은 다음과 같다. localhost:8080/list?데이터이름=데이터값 여러개를 입력한다면 데이터이름1=데이터값1&데이터이름2=데이터값2 이런 식이다. 이걸 query ..
실제로 서버를 배포할 때 필수라고 할 수 있는 .env 파일에 대해서 알아보자 server.js 를 작성했을 때 위와 같은 코드를 작성했었던 적이 있다. 이때 8080 이라는 포트번호를 사용했었고, mongodb+srv 라고 시작하는 db 접속 문자열이 있었다. 이런 값들은 개발환경이 달라지거나 다른 컴퓨터로 코드를 옮겨서 작업하면 수정이 필요할 수도 있다 이런 환경에 따라 가변적인 변수 데이터들을 보통 환경변수라고 한다. 개발자들은 환경변수를 보통 한곳에 모아서 관리하는데 .env 파일이다. 이곳에 중요한 환경변수들을 넣어두고 server.js에서 .env 파일에 있는 데이터를 쓰는 식이다. 중요한 정보들이 .env 파일에 있기 때문에 보안상으로 좋기도 하다. 방법 일단 환경변수 사용을 위한 라이브러리..
마이페이지 만들기 로그인을 한 사람만 들어갈 수 있는 페이지를 만들어보자 일단 마이페이지 역할을 할 ejs 파일을 하나 생성해줬다(mypage.ejs) 그럼 서버에서 /mypage 로 접속했을 때 이 페이지로 라우팅을 시켜주자 loggedin 이라는 미들웨어를 생성해주고, app.get('/mypage', loggedin, funtion(req, res){ ... 이런식으로 중간에 넣어주면 /mypage 요청과 mypage.ejs 응답 사이에 loggedin 이라는 함수를 실행시켜준다. loggedin의 내용은 다음과 같다 req.user 가 있다면 next()로 통과시키고, 없다면 '먼저 로그인 해주세요.' 라는 메세지를 res.send() 해달라- 라는 의미이다. 로그인을 하고 /mypage 로 접속..
세션 방식 로그인 기능을 구현해보자 일단 라이브러리 3개를 설치한다. npm install passport passport-local express-session 위 코드까지 server.js 에 작성해주면 시작전 세팅은 끝이다. app.use(미들웨어) 웹서버는 요청-응답해주는 머신 미들웨어 : 요청-응답 중간에 뭔가 실행되는 코드 1. 로그인 페이지 제작 & 라우팅 일단 로그인 페이지인 login.ejs 를 만든다 이 폼을 전송하면 /login 경로로 POST 요청을 한다. 몽고디비에 login 이라는 collection 을 만들어서 document 를 하나 생성해보자 임시 계정이 하나 만들어졌다. 2. 아이디와 패스워드 검사하기 누군가 /login 으로 GET 요청을 하면 일단 보여줄 화면이 있어야..
회원인증방법 1. session-based 아이디랑 패스워드로 로그인을 하면, 서버는 쿠키라는 걸 발행한다. (쿠키 = 브라우저에 저장할 수 있는 긴 문자열) 이 쿠키에는 세션 아이디가 적혀있다. 그럼 브라우저는 쿠키를 저장한다. 이제 로그인 후 활동을 하는데 예를 들어 마이페이지를 보여달라고하면, 쿠키 데이터가 서버로 전송이 되는데, 쿠키에 적힌 세션 아이디를 가지고 (이 사람은 로그인을 했었다는 기록이 담긴)세션 데이터에서 찾아보는 것이다. 만약에 이 세션 데이터에 세션 아이디가 있다면, 마이페이지.html 을 보내줄 것이다. 2. token-based (JWT)(JSON Web Token) 로그인을 할 때 서버는 JSON Web Token 이라는 걸 발행한다.(긴 문자열임) 그럼 브라우저는 이 JW..
각 게시글마다 수정을 할 수 있는 수정 페이지를 만들려고 한다. edit.ejs 라는 파일을 만들어준다. 전체적인 폼은 write.ejs 랑 거의 같다. 일단 수정하기 폼에 들어가면 아래와 같이 기존에 들어있던 데이터가 폼에 디폴트 값으로 들어가있어야 한다. server.js 에 edit/:id 로 접속했을 때 post 라는 collection 에서 url 파라미터로 데이터를 찾아서 result 라고 하고, 이걸 post라는 변수에 넣어서 edit.ejs 에서 쓸 수 있도록 했다. edit.ejs 파일이다. 아까 server.js 에서 결과로 받아온 데이터들을 post라는 변수에 넣었기 때문에 저런식으로 랜더링 할 수 있다. 여기까지 하면 디폴트 값을 폼에 넣어둘 수 있다. 이제 폼을 전송했을 때 db ..
https://overcome-the-limits.tistory.com/548 [자바스크립트] 블로킹과 논블로킹, 동기와 비동기 들어가며 여행을 떠나보면, 언젠가 왜 이 여행을 하려 했을까 하는 생각이 들 때가 있었습니다. 공부를 할 때도 마찬가지였습니다. Node.js를 활용해서 개발을 하고 있는데, 왜 Node.js를 활용하는지 overcome-the-limits.tistory.com 항상 헷갈리고 확실히 정리하지 않았던 것 같은데 잘 정리되어 있는 것 같아 스크랩
https://overcome-the-limits.tistory.com/790 [자바스크립트] express 미들웨어 들어가며 여행을 떠나보면, 언젠가 왜 이 여행을 하려 했을까 하는 생각이 들 때가 있었습니다. 공부를 할 때도 마찬가지였습니다. Node.js를 활용해서 개발을 하고 있는데, 왜 Node.js를 활용하는지 overcome-the-limits.tistory.com
server.js 의 코드 app.get("/detail/:id", function (요청, 응답) { db.collection("post").findOne( { _id: parseInt(요청.params.id) }, function (에러, 결과) { console.log(결과); 응답.render("detail.ejs", { data: 결과 }); } ); }); db에서 _id가 요청.params.id 인 것을 하나 찾아서 그 결과를 data 라는 이름으로 detail.ejs 파일로 전송하고 있다. 여기서 요청.params.id 는 /detail/:id 할때의 id 이다. 즉 url 의 파라미터라고 한다. detail.ejs 의 코드 상세페이지 title : date :
HTML 폼에서 PUT이랑 DELETE 요청은 일반적으로 불가능하다. (GET, POST 만 가능. ) 그래서 삭제 요청을 할 때에는 다음과 같은 3가지 방법을 사용한다. 1. method-override 라이브러리의 도움을 받는다 2. AJAX로 DELETE 요청을 날린다 -> REST한 API 3. 그냥 POST요청을 날려서 DELETE 작업을 수행한다 -> 제일 편함 AJAX 란? 프론트에서 js를 이용해서 서버에 여러 요청을 할 수 있는 문법같은것 !!새로고침 없어도 서버에 요청 가능(스무스한 사이트) 쌩js 쓰면 코드가 기니까 jQuery를 설치한다. (부트스트랩 설치 할때에 jQuery를 CDN 방식으로 설치하는 부분이 있다. 그부분을 이렇게 수정한다.) 이 코드를 위에 두고 그 아래부터 AJ..
mongoDB에 데이터를 저장할 때 _id 를 넣어야하는데 자동으로 1,2,3... 이렇게 달아주면 좋겠다 결국 총게시물 갯수에 +1을 해주는 형태로 만들어줘야하는데 방법은... 아예 counter 라는 collection을 만들어서 totalPost 라는 항목을 만들어 값을 int 형인 0으로 준다. 그래서 데이터가 db에 올라올때마다 이 totalPost 값을 1씩 증가시키려고 한다. 이런식으로... 게시물 갯수를 관리하겠다는 뜻! app.post("/add", function (요청, 응답) { 응답.send("전송완료"); db.collection("counter").findOne( { name: "게시물갯수" }, function (에러, 결과) { console.log(결과.totalPost)..
지금 서버에 들어가 있는 데이터 들을 list.html 을 통해서 화면에 보여주려고 한다. (GET 요청) -> /list 로 GET 요청으로 접속하면 실제 db에 저장된 데이터가 있는 html을 보여주기 이때 라이브러리 하나가 필요하다. npm 으로 설치하고(npm install ejs) view engine 을 ejs로 set 해주는 코드를 써주고 list.html 과 list.ejs 는 같은 역할이다 근데 list.ejs 는 views 라는 폴더를 만들어 넣어줘야한다. EJS 기본 문법 중간에 서버 데이터 넣을 때에는 저렇게 렌더링하고 js 문법을 사용하고 싶을 때에는 안에 담으면 된다. 서버에서 가져온 데이터를 콘솔창에 출력해보자 app.get("/list", function (요청, 응답) { ..
database 는 일종에 폴더 같은 개념이고 collection 은 그 안에 들어가 있는 파일 개념이다. db 는 todoapp 이라는 db로 설정한거고 collection은 post 라는 collection 으로 설정한거다. 데이터하나를 insertOne 으로 삽입하도록 했다. 만약 수행하고 나면 콘솔에 저장완료라고 뜨도록 했다. 들어가서 refresh 하니 잘 들어간 것을 확인할 수 있다. (자료 저장할 때 _id 를 꼭 적어야하는데 안적으면 하나를 강제로 부여해준다) 폼에 입력한걸 db에 저장해보는 코드를 짜봤다. const express = require("express"); const app = express(); const bodyParser = require("body-parser"); a..
DB 의 종류 1. 관계형 : 가로 세로 칸 나뉘어져 있음 - 대부분 SQL 언어를 써야(빠르고 효율적) - ex) MySQL, MariaDB, Oracle 2. NoSQL - Object 자료형으로 입출력 가능 - ex) Dynamo, MongoDB, Redis, Oracle NoSQL MongoDB 무료 호스팅 받기 저 코드를 추가하고 npm 으로 mongodb 를 설치한다. mongodb atlas에 들어감 connect 버튼을 누름 mongodb에서 복사한 url을 저기에 복사해서 추가한다. mongodb+srv://디비계정아이디:디비계정패스워드@cluster0-qaxa3.mongodb.net/데이터베이스이름?retryWrites=true&w=majority ... const MongoClient..
API란? Application Programming Interface API 규약에 따라 데이터 전달 웹 개발시 서버랑 통신하는 방법 어떻게 만들어야 좋은 API 일까? REST 원칙 6개를 지키면 RESTful 하다고 함 1. Unifom interface 를 지키자 - 하나의 자료는 하나의 URL로 - 요청과 응답은 정보가 충분히 있어야 2. Client-Server 역할 구분 - 브라우저는 요청만 하고 - 서버는 응답만 하기 3. Stateless - 요청들 사이에는 의존성이 없어야(독립적이어야) 4. Cacheable - 서버에서 보내주는 정보들은 캐싱이 가능해야 - 캐싱을 위한 버전같은것도 관리 잘해야 (브라우저가 해줌) 5. Layered System 6. Code on Demand + 그리..
폼에 입력한 데이터를 서버에 전송해보자 (POST 요청) 오늘의 할일 날짜 Submit form에는 속성 두개가 들어가야 한다 action 이랑 method 여기서는 action을 /add 로 해주고 method를 POST 로 해줬다 /add 경로로 POST 요청하는 것이다 (보통 글쓰기는 POST 를 사용한다) POST 요청 처리를 하려면 아래와 같은 문법으로 작성한다 app.post("/add", function (요청, 응답) { 응답.send("전송완료"); }); 여기서 Submit 을 누르면 /add 경로로 이동한다. 이때 입력했던 데이터 들은 app.post("/add", function (요청, 응답) { 응답.send("전송완료"); }); 여기에서 에 들어가 있는 거다. 데이터를 편하게..
저번에 npm 으로 이것저것 세팅할 때 entry point 를 server.js 로 설정했었다 그러니 server.js 라는 파일을 만들어준다. 여기에 코딩 시작하면됨. GET 요청 처리하기 const express = require('express'); const app = express(); app.listen(); 위는 서버를 띄우기 위한 기본 셋팅 (express 라이브러리) listen(서버 띄울 포트 번호, 띄운 후 실행할 코드) const express = require("express"); const app = express(); app.listen(8080, function () { console.log("listening on 8080"); }); 서버에 접속해보자 GET 요청을 처리..
서버란 비유하자면 알바생 같은것! 누가 페이지 달라고 요청하면 갖다줌(응답) 서버 : 요청을 받으면 요청한 내용 보내주는 프로그램 여기서 요청이란? HTTP 요청이라고 부르는게 몇가지 있는데 서버한테 하는 요청은 크게 4가지 방식이 있음 읽기 GET : 페이지 읽고 싶을 때 쓰기 POST : 새로운 거 생성하기.(댓글 작성, 포스트 작성) 수정 PUT 삭제 DELETE node.js 란? : javascript 런타임 JavaScript 란? HTML 을 조작하고 변경할 수 있음. -> 웹페이지를 다이나믹하게 만들어줌. javascript의 해석은 브라우저가 한다. 브라우저마다 해석하는 엔진이 있기 때문 ex) 크롬은 V8, 고질라는 spidermonkey, 익스플로러는 chakra... 여기서 V8 엔..
자바스크립트는 완전한 객체 지향 언어. 객체 지향 하면 제일 먼저 떠올리는 개념은 다음과 같다. 클래스 객체 메소드 속성 캡슐화 집합 재사용 상속 변형 하지만 js 는 자바나 c++ 과는 조금 다르다 자바가 c++ 는 클래스 기반의 언어이고 js 는 프로토타입 기반의 언어이다. 객체지향 컨셉에서 대상의 특성은 객체의 속성 이라고 하며 대상의 동작은 객체의 메소드 라고 함. 클래스의 개념이 사실 js 에서는 존재하지 않는다 js 에서 모든 것들은 객체에 기반을 두고 있다 js 에서는 프로토타입 이라는 표기법이 있는데 이를 이용해서 객체가 생성된다 ex) 전통적인 객체지향에서는 박지성이라는 새로운 객체 block-level var 같은 전통적인 js 변수들 -> function-level 이라고 할 수 있다..
배웠지만 다시 기초 복습한다치고 정리해보자 기본 문법 세미콜론 ; 으로 문장 종료 { } 이용해서 구역나눔. 조건문. 반복문 있음 var a = 1; b = 2; // 2 console.log("a:" + a); console.log("b:" + b); var c = 3, d = 10; var str1 = "Hello"; var str2 = "World!"; var str3 = null; console.log("c:" + c); console.log("d:" + d); console.log(str1); console.log(str2); console.log(str3); //결과 a:1 b:2 c:3 d:10 Hello World! null 연산자 산술연산자에는 + - * / 랑 ++ -- 가 있다 var..
Node.js 를 배워보고 싶은데 goorm에 [한눈에 끝내는 Node.js]라고 기초 강의가 있길래 한번 들어보려고 한다. Node.js 는 웹프로그래밍에서 서버 만들때 쓰는 언어다. 간단하게 Node.js 는 1. js 기반 2. 싱글 스레드, 비동기 방식 이다. 처음에 프론트 배울 때 js 쓰곤 하는데 백도 js로 쓸 수 있다는게 큰 이점이라 요즘 노드는 성장세! AJAX : Asynchronous JavaScript and XML 의 약어인데 자바스크립트가 중심역할을 담당하는 기술이다. 구글의 각종 서비스, 페이스북, 트위터, 네이버 등에서 개발한 웹애플리케이션들은 모두 AJAX를 적극적으로 활용한 동적인 웹을 표방하는 서비스들. js 말고도 동적 웹페이지 만들수 있는건 JSP, Servlet, ..
https://blog.naver.com/koys007/222213888318 [windows] NVM 설치하기 1. 필요 개발 환경 - Windows 10 - NVM (Node Version Manager) - nodejs & npm NVM은 nodej... blog.naver.com 현재 Jupyter는 설치한 상태인데 사용할 수 있는 언어가 python 밖에 없어서 javascript도 사용할 수 있게 하고 싶은 상황이다. http://melonicedlatte.com/web/2017/02/19/013033.html Jupyter NoteBook에 nodeJS 환경 구축하기 - Easy is Perfect 기존에 Jupyter Notebook 이 설치되어 있는 상태에서 Python 3 만 사용하..
