[개발] Practice/Node.js MongoDB16 [Node.js / MongoDB] 채팅 기능 만들기 💡 실습 포인트! 채팅 기능을 본격적으로 만들기 전에, 댓글 기능부터 추가해보았다. 사실 댓글과 채팅을 유사하다고는 생각해본 적이 없었는데, 실시간 소통이 가능하면 그게 바로 채팅 기능이 되는 것임을 수업을 통해 알 수 있었다. 다만, 아직 코드 수정이 필요한 부분이 많아, 일부만 블로그글로 게재했다. 💜 채팅 기능 만들기 전에 🤍 댓글 기능 구상해보기 게시물에 댓글을 추가하고 싶다면 댓글 발행 기능을 추가하면 된다. 따라서, DB 에 댓글을 저장할 collection 을 생성해두고, 웹 브라우저에서 POST 요청을 하면 해당하는 collection 에 저장해준다. 이 때, 유의할 점은 어느 게시물에 단 댓글인지 구별이 가능해야 한다는 것이다. 따라서 댓글을 저장할 때 부모 게시물의 정보도 같이 저장해서.. 2022. 3. 18. [Node.js / MongoDB] 이미지 업로드 & 이미지 서버 만들기 💡 실습 포인트! 업로드 페이지를 만들어서 해당 페이지에서 파일을 업로드할 경우 이미지인 경우에만 정상적으로 업로드가 되도록 한다. 업로드한 이미지는 작업하는 하드 내에 저장되고, 저장된 이미지를 특정 페이지로 불러올 수 있도록 한다. 💜 업로드한 이미지를 저장하는 방법 알아보기 어떤 사이트를 운영하든 이미지를 업로드하고 보여줘야 하는 일이 많이 발생하므로, 이미지를 어떻게 어디에 저장할지에 대한 고민은 필요하다. 1. JavaScript 파일 근처에 폴더를 하나 만들어서 저장하는 방법 : 오늘 실습 때 사용 2. 아마존 등 하드를 구매하여 저장하는 방법 (Amazon S3) : 저장할 이미지가 많은 경우 사용 3. DB 에 직접 저장하는 방법 이 방법들 중 3번째 방법은 속도, 비용, 용량 등 다양한 .. 2022. 3. 16. [Node.js / MongoDB] 회원 기능을 포함한 게시판 기능 만들기 💡 실습 포인트! 💜 회원가입 기능 만들기 이전에 건너뛴 회원가입 기능을 만들어 사용자를 추가해보았다. (중복 아이디 확인 기능은 추후 만들 예정) 💜 게시물 작성자만 게시물 삭제 권한 주기 로그인한 사용자만 본인의 게시글을 삭제할 수 있는 기능을 만들어보았다. (로그인하지 않고 게시물 등록하는 경우 오류가 발생하는 부분은 추후 수정 예정) 💜 회원가입 기능 만들기 🤍 회원가입 EJS 파일 만들기 회원가입 아이디 비밀번호 회원가입 강사님은 빠른 수업을 위해 로그인 페이지에 회원가입 레이아웃을 추가 작성하셨는데, 나는 회원가입 페이지를 따로 만들었다. (역시 회원가입 페이지와 로그인 페이지는 분리해주어야 마음이 편안하다.) 레이아웃 자체는 로그인 페이지와 동일하게 하고 내용과 action 속성만 수정해주었.. 2022. 3. 15. [Node.js / MongoDB] 검색 기능 만들기 💡 실습 포인트! MongoDB 의 indexing 을 이용한 검색 기능을 만들어보았다. 대부분의 DB 들은 주로 영어에 최적화된 검색 기능을 제공하고 있어, 한글에 최적화된 기능을 만드는 게 쉽지 않음을 알게 되었다. 블로그를 쓰는 현재에도 검색 기능은 내가 생각한 수준에는 도달하지 못했다. (이는 추후 조금 더 고민해봐야 할 부분이다.) 한글에 초점을 맞추었더니 영어는 일부 내용만 검색하는 경우 검색이 되지 않는다. 한글을 한 글자만 가지고 검색하는 경우 검색이 되지 않는다. 💜 URL Query string 🤍 검색창 UI 만들기 검색 기존의 할일 리스트 페이지 HTML 파일에 Bootstrap 을 이용하여, 검색창 레이아웃을 추가해주었다. 후에 검색했을 때 보이는 화면도 동일한 레이아웃이 필요하므.. 2022. 3. 14. [Node.js / MongoDB] 회원인증기능 만들기 💡 실습 포인트! 💜 로그인 성공 💜 로그인 실패 누군가가 로그인을 하면 그 사람의 아이디와 비밀번호가 DB 에 있는 아이디와 비밀번호가 맞는지 검사하는 과정을 거친다. 검사 결과 일치한다면, 세션을 하나 생성하고 성공페이지로 이동한다. 검사 결과 해당하는 아이디가 존재하지 않거나, 비밀번호가 틀렸다면 실패페이지로 이동한다. (/fail 경로에 별도의 EJS 파일이나 HTML 파일을 만들어두지는 않았다.) 💜 로그인 페이지 만들기 & 아이디 비번 검사하기 🤍 준비하기 터미널에 npm install passport passport-local express-session 을 입력하여 로그인 및 세션 생성을 도와줄 라이브러리 3개(로그인, 로그인 검증, 세션 생성)를 설치한다. 설치가 완료되면 라이브러리 사용.. 2022. 3. 14. [Node.js / MongoDB] 글 수정 기능 만들기 💡 실습 포인트! 글 수정 페이지 HTML 파일을 만들어서, 할일 리스트에서 수정 버튼을 클릭하면 해당 게시글의 글 수정 페이지로 연결되도록 했다. 연결된 글 수정 페이지에서는 해당하는 게시물의 데이터를 DB 에서 받아와 input 의 내용으로 보여줄 수 있게 했다. 글 수정 페이지에서 내용을 수정한 후 Submit 버튼을 누르면 DB 의 해당 게시물 데이터의 내용이 수정되고, 브라우저에서는 글 수정 페이지에서 할일 리스트 페이지로 넘어가도록 했다. 💜 글 수정 페이지(HTML) 만들기 글 수정하기 글번호 : 할일 마감일 Submit 수정 기능을 구현할 수 있는 방법은 다양하지만, 가장 쉬운 방법이 수정 페이지를 따로 만드는 것! 따라서, edit.ejs 라는 글 수정 페이지에 해당하는 EJS 파일을 따.. 2022. 3. 12. [Node.js / MongoDB] 상세 페이지 만들기 💡 실습 포인트! 상세 페이지 경로에 id 라는 파라미터를 활용하여 게시물 _id 와 일치하는 상세페이지로 넘어갈 수 있게 코드를 작성했다. 💜 파라미터 문법으로 게시물 상세 페이지 경로 만들기 app.get('/detail/:id', function(req, res){ req.params.id = parseInt(req.params.id); db.collection('post').findOne({_id : req.params.id}, function(err, result){ res.render('detail.ejs', {detail : result}); }) }); 파라미터는 쉽게 말해서 URL 뒤에 무작위의 문자를 붙일 수 있도록 만들어주는 URL 작명 방식이다. 콜론(:) 기호를 붙여주면 /deta.. 2022. 3. 12. [Node.js / MongoDB] AJAX 로 삭제요청하기 💡 실습 포인트! 💜 브라우저 💜 MongoDB AJAX 로 삭제 요청을 했을 때, 성공하면 DB 에서 데이터가 삭제될 뿐만 아니라 화면상에서도 보이지 않게 처리했다. 💜 들어가기 전에 요청에는 GET, POST, PUT, DELETE 이렇게 4가지가 있다. 하지만 HTML 폼에서는 일반적으로 PUT, DELETE 요청은 불가하므로 다른 방법을 사용해야 한다. method-override 라이브러리를 사용한다. AJAX 로 DELETE 요청을 한다. POST 요청으로 DELETE 작업을 수행한다. (가장 편한 방법이지만 REST 한 API 를 만들기 위해 지양한다.) 💜 AJAX 개념 및 사용 AJAX 란 프론트엔드에서 JavaScript 를 이용해 서버에 다양한 요청을 할 수 있는 문법같은 것으로 새로.. 2022. 3. 12. [Node.js / MongoDB] 게시물마다 번호 달기 💡 실습 포인트! 💜 게시물마다 _id 달아서 저장하기 MongoDB 에 데이터를 저장할 때 강제로 아이디를 강제로 부여해주긴 하지만, 직접 _id 를 넣어주는 게 추후에 수정 및 삭제가 용이하다. _id 는 아래의 코드와 같이 /add 경로로 POST 할 때 데이터에 넣어주면 된다. (물론 아래의 코드는 예시라서 _id : 1 이라고 하드코딩했을 뿐 실제로는 하드코딩하면 안된다.) app.post('/add', function(req, res){ 응답.send('전송 완료'); db.collection('post').insertOne( { _id : 1, 할일 : req.body.content, 마감일 : req.body.date } , function(){ console.log('데이터 저장 완료').. 2022. 3. 11. [Node.js / MongoDB] HTML 에 DB 데이터 넣어보기 💡 실습 포인트! 글쓰기 페이지에서 작성한 새로운 데이터를 Submin 버튼을 클릭함과 동시에 서버의 DB 로 전송하고, 서버에 저장된 DB 에서 리스트보기 페이지로 데이터를 불러오는 일련의 과정을 만들어보았다. 💜 HTML 렌더링 엔진 EJS 사용해보기 이전에 sendFile() 함수를 사용해서 HTML 파일만 전송해주는 실습을 했었는데, 해당 방법으로 HTML 파일만 보내주면 실제 DB 데이터를 넣어 보낼 수 없으므로 Static 페이지가 된다. 따라서 서버의 데이터를 HTML 에 쉽게 삽입할 수 있게 해주는 일종의 HTML 렌더링 엔진이 필요한데 그 중 하나인 EJS 를 사용해보았다. 우선, 터미널에서 npm install ejs 라고 입력하여 ejs 를 설치해준 다음 아래의 코드를 JavaScri.. 2022. 3. 11. [Node.js / MongoDB] Database 에 자료 저장하는 법 💡 실습 포인트! MongoDB 에 post 라는 이름의 collection 을 생성하여 테스트로 name 이 seoyun, age 가 30 인 데이터를 추가해보았다. 테스트 코드를 토대로 하여, /add 경로로 POST 요청할 경우 폼에 입력된 데이터를 DB 에 추가하는 코드를 짜고 MongoDB 에서 확인해보았다. 💜 Database / collection 만들기 1. MongoDB Atlas 메인 대시보드에서 Browse Collections 라는 버튼 클릭 2-1. Add My Own Data 버튼 클릭 2-2. Add My Own Data 버튼이 있는 화면이 아니라 아래와 같이 화면이 뜬다면 Create Database 버튼 클릭 3. Database name, Collection name 을 .. 2022. 3. 11. [Node.js / MongoDB] MongoDB 셋팅하기 💡 실습 포인트! 💜 MongoDB Atlas 가입/초기 셋팅하기 하나하나 설명하기에는 다소 내용이 길어질 것 같아 요약하여 정리했다. 1. 구글에 Mongodb atlas 라고 검색해서 홈페이지 접속 2. 가입 진행 (이메일 인증 필요!) 3. 계정 설정하기 (빈칸 채우라고 하면 채워주기!) 4. 무료 티어 선택 5. 서버 위치 선택 (한국과 물리적으로 가까운 곳 선택) -> 계속 진행하면 Cluster 생성 6. Database Access 메뉴에서 DB 접속용 아이디/비밀번호 생성 7. Network Access 메뉴에서 IP 추가 (일종의 보안장치) 8. Database / collection 만들기 진행 💜 DB 접속 URL 찾아오기 1. 메인화면 셋팅 끝나면 CONNECT 라는 버튼 클릭 2... 2022. 3. 11. 이전 1 2 다음
