728x90 웹개발/Node.js20 [Node.js] Socket.io를 이용하여 실시간 통신하기 저번에 채팅기능을 구현할 SSE방식을 사용했는데 서버->유저 방향으로만 실시간 통신이 된다. socket.io를 이용하여 양방향 통신을 해보자. 우선 socket.io를 설치한다. npm install socket.io 설치를 끝냈다면 const http = require('http').createServer(app); const {Server} = require("socket.io"); const io = new Server(http); server.js파일에 위와같은 코드를 추가하고, app.listen으로 작성했던 코드를 http.listen으로 수정한다. (express라이브러리를 이용하던 것을 http로 수정) 그리고 실시간 통신을 할 HTML파일을 하나 만든다. 여기서는 socket.ejs파일.. 2023. 3. 3. [Node.js] 채팅 기능 구현하기 당근마켓을 이용해본 적 있다면 익숙할 기능. 채팅하기 기능이다. 어떠한 게시물에서 '채팅하기'버튼을 누르면 글 작성자와 1대1 채팅을 시작할 수 있다. 그리고, /chat 접속시 내가 참여중인 채팅방을 보여주자. 채팅기능 구현을 위한 단계는 이렇다. 채팅방 개설. 1. list.ejs 에 '채팅하기'버튼을 추가하고, 버튼 클릭시 post요청(채팅방 개설) 2. server.js에서 1번의 post요청 처리 3. chat.ejs 디자인 4. server.js에서 /chat으로의 get요청 처리(이 때, 현재 로그인한 사용자가 속해있는 채팅방들의 정보를 전달) 여기까지 했다면 이제부터 채팅방의 메세지들을 처리하는 코드를 추가. 5. /chat에서 메세지 전송시 post요청(어떤 채팅방에서,언제,어떤 내용인지.. 2023. 3. 2. [Node.js] 환경변수로 민감한 정보 가리기(.env) 내 DB 주소나 포트번호 등 민감정보를 .env를 이용하여 숨겨보자. npm install dotenv 우선 터미널에 다음과 같이 입력해서 dotenv를 설치하자. 이제 .env라는 파일을 하나 생성해서 민감정보를 작성하자. (.env) PORT=8080 DB_URL="abcdefg/hijk.com" 이제 원래 파일로 돌아가서, 민감정보를 사용할 위치에 process.env.변수명 을 적어주면 된다. MongoClient.connect(process.env.DB_URL, function (에러, client) { 예를들면 이렇게. 원래 URL을 적는 곳에 process.env.DB_URL을 적어주었다. 그럼 끝이다. 깃허브 등에 올릴때는 gitignore에 .env를 등록해서 .env를 업로드하지 않으면.. 2023. 2. 26. [Node.js] 이미지 서버 만들기(multer 라이브러리 사용) 이미지를 업로드하고, 서버에서 이를 처리하여 이미지를 저장하고 사용할 수 있게 만들어보자. 우선 업로드를 할 페이지 /upload를 만들어보자. (upload.ejs) 업로드페이지 전송 간단하게 form태그 안에 input태그 하나와 button태그 하나를 추가해서 만들었다. form에서 method="POST", action="/upload"로 설정하였다. enctype은 서버로 폼 데이터를 전송할 때 인코딩 형식 설정을 하는것인데 일반적으로는 enctype="multipart/form-data"로 설정하면 된다. (server.js) app.get('/upload',function(요청,응답){ 응답.render('upload.ejs'); }) 우선 /upload로의 get요청을 처리해준다. 이제 p.. 2023. 2. 26. [Node.js] router 폴더 및 파일로 API관리하기 지금까지 하나의 서버파일에 여러가지 app.get(), app.post()등의 코드를 작성했다. 이런 코드들을 비슷한 요소들을 묶어 별도의 파일로 관리하고싶을 때는 어떻게 해야할까? 우선 route를 보관할 폴더를 하나 만들었다. /route 그리고 폴더 내부에 js파일을 생성한다. var router = require('express').Router(); router.get('/shop/shirts',function(요청,응답){ 응답.send('셔츠팔아요'); }) router.get('/shop/pants',function(요청,응답){ 응답.send('바지팔아요'); }) module.exports = router; (shop.js) 이 파일에는 /shop으로 시작하는 url들의 요청을 처리하는 .. 2023. 2. 26. [Node.js] 회원가입, 회원기능 만들기 저번에 로그인기능을 만든 것에 이어, 조금의 응용을 더하여 회원가입과 회원기능(글 쓴 사람만 글 삭제 가능 등)을 만들어보자. app.post('/register',function(요청,응답){ db.collection('login').findOne({id:요청.body},function(에러,결과){ if(결과!=null){ 응답.send('이미 존재하는 아이디입니다') console.log(결과); }else{ //아이디 생성 db.collection('login').insertOne({id:요청.body.id,pw:요청.body.pw},function(에러,결과){ 응답.redirect('/'); }) } }) }) 회원가입은 간단하게 만들었다. id중복이 있는지만 체크한 후 바로 아이디가 만들어지.. 2023. 2. 25. [Node.js] 검색기능 만들기(query string) 게시판의 검색기능을 만들어 보자. (list.ejs) 검색 게시판의 글을 보여주는 페이지인 list.ejs 이곳에 검색을 위한 input태그와 검색버튼을 만들어준다. (list.ejs의 script 태그) $('#search').click(function(){ var 검색어 = $('#search-input').val() window.location.replace(`/search?value=${검색어}`) }) 검색버튼을 눌렀을 때, `/search?value=${검색어}` 경로로 이동하도록 했다. 왜 이렇게 했을까? 검색을 하려면 서버에 검색어를 넘겨줘야하는데, POST요청으로 데이터를 보내도 되지만, 특정 url뒤에 데이터를 심어 GET요청을 보내는 것으로도 데이터를 보낼 수 있기 때문이다. 이를 q.. 2023. 2. 24. [Node.js] 마이페이지 만들기(로그인 상태에서만 이용 가능한 페이지) 저번에 로그인 기능을 만들었던 것에 이어 마이페이지를 만들어보자. 처음 로그인할 때는 passport.serializeUser()함수를 이용하여 세션을 생성해주었는데, 이번에는 세션정보로 DB에서 유저정보를 찾는 passport.desrializeUser()함수를 이용해야 한다. //이 세션데이터를 가진 사람을 DB에서 찾음 passport.deserializeUser(function(아이디,done){ db.collection('login').findOne({id:아이디},function(에러,결과){ done(null,결과) }) }); db의 findOne함수로 간단하게 작성할 수 있다. 미리 만들어둔 mypage.ejs를 get요청시 렌더해주여야하는데, 렌더하기전에 유저가 로그인했는지 판별할 필요.. 2023. 2. 23. [Node.js] 로그인 기능 추가하기(Session 방식) 세션 방식의 로그인 기능을 추가해보자. 라이브러리 설치 npm install passport passport-local express-session 터미널에서 passport, passport-local express-session 이 세가지 라이브러리를 설치한다. const passport = require('passport'); const LocalStrategy=require('passport-local').Strategy; const session = require('express-session'); app.use(session({secret : '비밀코드',resave : true, saveUninitialized: false})); app.use(passport.initialize()); ap.. 2023. 2. 22. [Node.js] 글 수정 기능 추가하기 edit 페이지를 추가하고 기존의 글을 수정할 수 있게 만들어보자. 우선 edit.ejs파일부터 만든다. app.get('/edit/:id',function(req,res){ db.collection('post').findOne({_id:parseInt(req.params.id)},function(에러,결과){ res.render('edit.ejs',{data: 결과}) }) }) 상세페이지를 만들었을 때와 마찬가지로, 경로 뒤에 id값을 파라미터로 받아서, 해당 글을 수정하는 페이지가 보이게 하자. /edit/:id 경로로 get 요청을 하면, DB에서 _id값이 (파라미터)id와 일치하는 데이터를 찾아 edit.ejs로 보내 렌더링한다. 번 글 수정하기 2023. 2. 22. [Node.js] CSS파일 이용하는 법 CSS파일이나 이미지같은 자료들은 관습적으로 /public 폴더에 만든다고 한다. .html이나 .ejs파일의 헤더에 태그를 넣어 CSS를 사용할 수 있다. 그런데 public폴더를 사용한다는 것을 서버에도 알려주어야 한다. (server.js) app.use('/public',express.static('public')); 서버.js파일에 다음과 같은 코드를 추가하면 된다. 2023. 2. 19. HTML을 조립식으로 사용하기 네비게이션 바를 보면 똑같은 모양의 navbar가 index, write, list페이지에 있다. 각 페이지마다 navbar 코드를 작성해도 작동은 되지만, navbar를 수정해야 하는 경우에는 모든 페이지에서 navbar를 수정해주어야 하는 문제가 생긴다. navbar를 따로 빼두고, 조립식으로 HTML을 만들어 보자. ejs를 이용한다. (ejs를 설치하지 않았다면 npm install ejs를 터미널에 입력해서 설치하고 시작하자) 작업폴더 내에 views폴더를 하나 만들고, 모든 페이지의 확장자를 .html에서 .ejs로 바꾼 후 views폴더로 이동시킨다. Todo App Home (current) Write List Disabled 그리고 navbar 코드만 잘라내서, nav.html파일로 저장.. 2023. 2. 19. [Node.js] 글 상세페이지 만들기 글 제목을 클릭하면 상세페이지가 열리는것을 만들어 보자. 우선, 상세페이지는 하나만 있는것이 아니라, 글마다 하나씩 있어야 하기 때문에 경로를 /detail/:id로 했다. 그러면 '/detail/글번호 '경로로 해당 글번호에 해당하는 상세페이지를 볼 수 있다. (server.js) app.get('/detail/:id',function(req,res){ db.collection('post').findOne({_id:parseInt(req.params.id)},function(에러,결과){ console.log(결과); res.render('detail.ejs',{data:결과}) }) }) '/detail/:id' 경로로 오는 get요청을 처리해준다. 경로에서 콜론: 뒤에오는 것은 파라미터로, req... 2023. 2. 19. [Node.js] 글 삭제 기능 만들기 삭제버튼을 누르면 해당 포스트가 삭제되도록 만들어 보자. 삭제 우선 list.ejs 파일을 보자. button태그를 이용해서 삭제버튼을 만들어주었고, 현재 글의 id값을 저장하기 위해서 버튼태그 안에 data-id를 적어주었다. (이렇게 안하고 그냥 태그에 글번호를 적어줘도 되기는 하지만 이 방법이 더 편하고 깔끔할 것 같다.) $('.delete').click(function (e) { var 글번호 = e.target.dataset.id; var 현재요소 = $(this); $.ajax({ method: 'DELETE', url: '/delete', data: { _id: 글번호 } }).done(function(결과) { //ajax요청성공시 실행할 코드 현재요소.parent('li').fadeOu.. 2023. 2. 19. [Node.js] [MongoDB] 게시물에 번호달기(.updateOne) 게시물마다 번호를 달면 게시물들을 관리하기 좋다. 게시물 개수를 세기 위해서 DB에 'counter'라는 콜렉션을 하나 더 생성한 다음, {name: 게시물개수 totalPost: 0}를 작성해서 insert 해주었다. 이제 글을 작성할 때마다 'count' 콜렉션의 name:게시물개수인 요소의 tatalPost 값을 1 증가시켜주면 된다. app.post('/add', function (req, res) { res.send('전송완료') //console.log(req.body.title) db.collection('counter').findOne({'name' : '게시물개수'},function(에러,결과){ //name이 게시물개수인 데이터를 찾음(카운터 사용) var 게시물개수 = 결과.total.. 2023. 2. 16. [Node.js] DB에서 데이터를 가져와 사용하기 DB에 저장한 데이터를 꺼내와 사용해보자. 앞서서... DB에 데이터를 저장했었다 const express = require('express'); const app = express(); const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); . . . app.post('/add', function (req, res) { res.send('전송완료') //console.log(req.body.title) db.collection('post').insertOne({'title':req.body.title,'date':req.body.date},function(에러,결과){ console.log.. 2023. 2. 14. [Node.js] POST요청/ form 데이터 서버로 전송하기 이러한 write페이지를 미리 만들어 두었다. 오늘의 할 일 Due date 저장하기 form태그에 action='/add' method='POST' 을 설정하였다 그럼 폼 전송버튼을 누를 시 /add 경로로 POST요청을 하게 된다. (각 input에는 name도 붙여 주었음) 다시 서버로 돌아와서, const bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({extended:true})); 데이터 처리를 쉽게하기위해 body-parser 라이브러리를 사용한다. 그래서 맨 위에 이 코드를 추가해주고, app.post('/add',function(req,res){ res.send('전송완료') console.log(req.body) .. 2023. 2. 13. [Node.js] nodemon 사용하기 매번 이렇게 node 파일명으로 서버를 실행하고, ctrl+c로 끄고.. 하는것이 귀찮다 nodemon을 사용해 보자. npm install -g nodemon 을 입력해서 설치 해 주고 nodemon 파일명.js 를 입력하면... 오류가 뜬다. 이를 해결하기 위해서 windows powershell을 관리자권한으로 실행시킨 다음, executionpolicy를 쳐 보면 Restricted 라고 나오는데, set-executionpolicy unrestricted 를 입력해서 unrestricted로 변경해주면 된다. 그러고 나서, 다시 nodemon 파일명.js 를 입력하게되면? 잘 실행 된다. 이제 파일이 변경되면 자동으로 서버가 재가동된다. 2023. 2. 13. [Node.js] GET 요청 처리하기 / GET 요청시 HTML파일 보내는 법 앞선 시간에 Node.js를 설치하고 express라이브러리도 설치하였다. ... 서버를 띄우기 위해 작성한 기본 템플릿. const express = require('express'); const app = express(); app.listen(8080,function(){ console.log('listening on 8080') }); (express 라이브러리 사용법에 따름) express라이브러리 첨부 및 사용, app.listen()으로 원하는 포트에 서버를 오픈하였다. (app.listen(오픈할 포트번호, function(){오픈시 실행할 코드});) const express = require('express'); const app = express(); app.listen(8080,fu.. 2023. 2. 13. 서버란 무엇인가? 서버란 무엇인가? '클라이언트의 요청을 받으면 서비스, 데이터를 제공하는 컴퓨터 혹은 프로그램' == 요청을 받으면 데이터를 보내주는 기계. (이모 여기 사이다 한병이요~ 요청하면 이모가 사이다를 한 병 갖다주는데 여기서 이모 역할.) 서버에는 아래 4가지를 요청할 수 있다. 1. 읽기(GET) 2. 쓰기(POST) 3. 수정(PUT) 4. 삭제(DELETE) GET을 한번 살펴보자. 웹페이지를 읽을 때 GET 요청을 사용한다. (유튜브 홈을 보고싶다고 유튜브 서버에 GET요청) GET요청을 하는 가장 쉬운 방법은 브라우저 주소창에 URL을 입력하는 것이다 (브라우저의 URL 입력란이 GET요청하는 곳이었음 ㅎㄷㄷ) 그래서... 서버는 어떻게 만드는데? 누가 youtube.com으로 접속하면 메인페이지H.. 2023. 2. 12. 이전 1 다음 728x90
