daehyuntstory

저번 글에선 SSE를 이용하여 채팅기능을 만들고 서버에서 일방적으로 실시간 응답을 해줄 수 있다고 했는데 실시간으로 소통할 수 있는 방법이 하나 더 있습니다. 서버와 유저간 Web Socket을 뚫으면 됩니다. 그럼 양방향으로 실시간 응답이 가능합니다. Web Socket은 쌩자바스크립트 문법으로 개발할 수도 있지만 대부분의 상황에선 브라우저간 호환성이 좋은 socket.io 라이브러리를 설치해서 사용합니다. socket.io 설치는 npm install socket.io 입력하시면 끝입니다. 그리고 우리의 server.js에서 셋팅이 조금 필요합니다. 1. 하단과 같은 코드를 const 많이 모여있는 곳 하단에 추가해주시면 됩니다. const http = require('http').createServ..

이전글 https://daehyuntsory.tistory.com/94 Node.js + MongoDB 채팅기능 만들기2 소켓x[EventSource](SSE) 메세지 발행을 해봅시다. 메세지 발행은 그냥 게시물 발행이랑 똑같습니다. 근데 댓글개념이기 때문에 부모 게시물도 기록해주면 끝이라고 했습니다. - /chat 페이지에서 원하는 채팅방을 하나 daehyuntsory.tistory.com 채팅방 누르면 서버에서 데이터를 보내주고 있습니다. 그 데이터를 실제 채팅메세지처럼 html로 보여주라고 했습니다. 그럼 자바스크립트로 "데이터 수신시 html 저기다가 만들어주세요" 라고 코드짜면 끝입니다 (chat.ejs) var selId; var eventSource ; // 채팅방 누를시 이벤트 발동 $('..

이전글 https://daehyuntsory.tistory.com/93 Node.js + MongoDB 채팅기능 만들기1 소켓x(SSE) 채팅기능 구현전 우선 댓글에 대하여 알아보자 우리가 지금 구현할려는 채팅기능은 댓글기능과 굉장히 유사하다 밑의 글에서 함수중간에 있는 미들웨어 loginCheck 함수 없으시면 지우시면 됩니 daehyuntsory.tistory.com 메세지 발행을 해봅시다. 메세지 발행은 그냥 게시물 발행이랑 똑같습니다. 근데 댓글개념이기 때문에 부모 게시물도 기록해주면 끝이라고 했습니다. - /chat 페이지에서 원하는 채팅방을 하나 누르고 - 메세지입력하고 전송버튼을 누르면 ▲ 이런 게시물이 DB에 저장되면 됩니다. (부모 게시물은 채팅방 게시물을 뜻합니다) 채팅 메세지 저장하기..

채팅기능 구현전 우선 댓글에 대하여 알아보자 우리가 지금 구현할려는 채팅기능은 댓글기능과 굉장히 유사하다 밑의 글에서 함수중간에 있는 미들웨어 loginCheck 함수 없으시면 지우시면 됩니다. (작동 안됌 없으면) 댓글을 어떻게 만드냐면 게시물에 댓글기능을 추가하고 싶습니까. 그러면 댓글 게시물 발행기능을 추가하면 됩니다. 그냥 댓글 collection 하나 새로 만들어서 모든 댓글을 저장하면 됩니다. ▲ 근데 collection안에 대충 전부 집어넣어버리면 대체 무슨 글에 달린 댓글인지 구분이 안되겠죠? 잘 생각해보면 댓글들은 부모 게시물이 존재합니다. 모든 댓글은 부모 게시물에 달려있어야하니까요. 그것까지 기록해놔야 나중에 댓글을 불러올 때 내가 원하는 댓글만 불러올 수 있을텐데 댓글을 저장할 때 ..

무슨 사이트를 운영하든 이미지를 업로드하고 보여줄 일이 많습니다. 이미지는 어떻게 어디에 저장해야하는지 알아보도록 합시다. 1. server.js 근처에 폴더를 하나 만들어서 거기 저장하거나 2. 아마존 이런데서 하드를 구매해서 거기로 저장하거나 (Amazon S3) 3. DB에 직접 저장하거나 합니다. 하지만 3번은 너무 느리거나 비싸거나 용량문제 때문에 보통 1, 2번 방법을 씁니다. 그리고 이미지를 누가, 어디에, 어떤 이름으로 업로드했는지 같은 메타 정보들은 DB에 저장하는게 일종의 웹개발 관습입니다. 아무튼 우린 1번으로 배워보도록 합시다. 저장할 이미지가 백만개라면 2번으로 하셔야합니다. 구글에 튜토리얼 100만개 있음 일단 이미지 업로드할 수 있는 페이지를 하나 만들어줍니다 이 새로운 페이지..

배포 전 여러분 프로젝트 준비 1. 여러분 프로젝트 폴더에 app.yaml파일을 하나 만들어줍니다. app.yaml 파일은 구글 클라우드 배포시 프로젝트 설정 등을 내포한 파일입니다. 에디터를 이용해 server.js랑 동일한 위치에 app.yaml 파일을 하나 만드시면 되겠습니다. 그리고 다음 코드를 복붙합니다. runtime: nodejs env: flex manual_scaling: instances: 1 resources: cpu: 1 memory_gb: 0.5 disk_size_gb: 10 위 코드는 구글에서 샘플로 보여주는 app.yaml 파일 예시입니다. 그대로 따라 적으면 되겠습니다. 서버의 CPU, 메모리 용량도 셋팅 가능합니다. 위 예시는 돈많이 안쓰려고 극 저용량으로 셋팅한 예시입니다..

실제 사이트를 개발하실 땐 app.get() app.post() 이런 코드가 100개 200개가 넘어갑니다. 그럼 다른 파일로 관리하고 싶은 욕구가 저절로 샘솟는데 그건 어떻게 하는지 알아봅시다. 연습용으로 URL route 2개를 만들었습니다. app.get('/shop/shirts', function(요청, 응답){ 응답.send('셔츠 파는 페이지입니다.'); }); app.get('/shop/pants', function(요청, 응답){ 응답.send('바지 파는 페이지입니다.'); }); 이제 이 route들을 다른 파일에서 관리해보도록 합시다. route 보관용 폴더와 파일을 하나 만들어줍니다. server.js와 나란한 곳에 routes라는 폴더를 만들고 그 안에 shop.js라는 파일을 만..

회원들이 자유롭게 게시물을 올릴 수 있다면 그것이 게시판아니겠습니까 만들어봅시다. 근데 게시판 기능은 이미 다 만들어놨는데요 CSS 디자인만 게시판이 아닐 뿐 write/list 페이지 보니까 게시판 맞습니다. 다만 지금은 누구나 게시물을 삭제가 가능한데 이걸 본인 글만 삭제가능하게 제한을 두면 되겠습니다. 그러려면 유저가 몇명 필요해서 일단 회원가입기능부터 만들어봅시다. 회원가입기능 어떻게 만들죠 이런건 알아서 만들 수 있지 않겠습니까 그냥 만들고 거기다가 아이디/비번 입력할 수 있게 만듭니다. 그리고 전송 누르면 서버로 보내고, 그걸 DB에 저장시키면 끝 아니겠습니까. 여기까지 배운 이상 여러분이 혼자 못만들 기능은 없습니다. 그래서 저는 login.ejs에 가입창을 하나 만들어놨습니다. (login..

(참고) 프론트엔드에서 Query string을 쉽게 만들려면 jQuery 문법 중에 param, serialize를 쓰면 됩니다. var 자료 = { 이름1 : '값1', 이름2 : '값2' } $param(자료) //이름1=값1&이름2=값2 이거가 남음 이렇게 하면 object 자료를 query string으로 쉽게 변환가능하고 $(폼태그를찾고).serialize() 이렇게 하면 폼태그 안에 있는 모든 을 query string으로 쉽게 변환해줍니다. 다만 에 name 속성이 있어야합니다. 인덱스를 활용하여 검색하려면 정확한 문법을 쓰셔야합니다. app.get('/search', (요청, 응답)=>{ console.log(요청.query); db.collection('post').find( { $te..

https://daehyuntsory.tistory.com/85 Node.js + MongoDB 검색(Query형식 GET로 처리하기) 우리가 발행한 게시물의 검색기능을 만들어봅시다. 검색창 UI 그리고 검색결과 보여주는 html 페이지가 필요하겠군요. 검색창 UI를 다음과 같이 list.ejs 아무데나 추가합시다. 검색 Bootstrap 설치되 daehyuntsory.tistory.com 위에서 검색기능을 구현하였다 하지만 문제점은 정확히 일치하는 것만 찾아줍니다. "글쓰기"라고 검색하면 "글쓰기를 잘해야합니다" 이런 게시물은 못찾는 겁니다. 어떻게 해결하냐면 간단한 해결책 : 정규식을 씁니다. 정규식은 문자를 검사하는 식입니다. // 안에다가 문자를 담으면 검사해줍니다. /abc/ 이렇게 적으면 문자..