dada's

일단 만들어놨던 list.ejs 파일안에 삭제 버튼을 하나 만들어준다 html파일에서는 get요청과 post 요청만 할 수 있다 (삭제요청, 수정요청 없음) 📍삭제 요청을 하기 위해서는 3개의 방법이 있다📍 1. method-override라는 라이브러리의 도움을 받는다 2. ajax로 삭제요청을 한다 3. post요청으로 삭제작업을 수행한다 근데 여기서 rest한 api를 만들기 위해서 1번이나 2번을 쓰는데 나는 2번 방법으로 진행했다 [ ajax로 삭제 요청하기 ] 1. jquery설치 자바스크립트로도 ajax요청을 할 수 있지만, 좀 더 편하게 요청하기 위해 설치해주자 해당 html 파일에 jquery를 CDN방식으로 설치해준다 그리고 코드는 이 하단에 작성해야한다 2. ajax 기본 문법 이거는..

MogoDB에 데이터를 저장하고 보면 '_id'라는 값이 추가되어 저장된다 이 값을 설정하지 않고 저장하면 MongoDB에서 알아서 만들어서 강제로 부여해준다 데이터를 구분하고 관리하기 위해서는 데이터만의 고유한 값을 가지고 있어야 관리하기 편하기때문이다 이 아이디를 활용해서 데이터를 가져다 쓰기 쉽게 하기 위해 게시물마다 1,2,3....이런식으로 순서대로 번호를 부여해보자 [게시물마다 아이디 부여하는 방법] 1. MongoDB사이트에 접속하고 대시보드에서 collection을 하나 더 만든다 프로젝트 진행중인 todoapp저 부분에 마우스 가져다 대면 +버튼 나오니 그걸로 counter라는 collection을 하나 더 생성했다 그리고 insert document버튼을 클릭해서 데이터를 하나 만들어주..

HTML에 실제 데이터를 넣어서 보내주기 위해서는 EJS, Pug같은 템플릿 엔진을 사용한다 EJS는 서버 데이터를 HTML에 쉽게 넣을 수 있게 도와주는 HTML 렌더링 엔진이다 이것을 사용하여 DB의 데이터를 HTML에 넣어보자 1. EJS설치 터미널에 npm install ejs를 하고 server.js 상단에 이 코드를 넣어준다 app.set('view engine', 'ejs'); 2. EJS파일 만들기 EJS는 HTML과 똑같이 만들어 쓰면 된다 주의할점 : 작업폴더 내에 views라는 이름의 폴더를 하나 만들고 거기에 ejs파일을 만들어야함 나는 list.ejs라는 파일을 하나 생성했다 3. MogoDB에서 데이터 꺼내기 db.collection('post').find() db.collect..

실제 서버를 만들어 배포하고 하기 위해 데이터를 저장 할 수 있는 데이터베이스를 사용해야한다 데이터베이스는 SQL이라는 언어를 써서 데이터를 입출력 할 수 있는데, SQL을 배우기에는 시간이 걸려 좀 더 쉽게 쓸 수 있는 MongoDB를 사용한다 MongoDB Atlas 가입 후 호스팅받기 https://www.mongodb.com/cloud/atlas/register?utm_content=rlsapostreg&utm_source=google&utm_campaign=gs_apac_rlsamulti_search_brand_dsa_atlas_desktop_rlsa_postreg&utm_term=&utm_medium=cpc_paid_search&utm_ad=&utm_ad_campaign_id=144126464..

일단 post요청을 하기 전에 '/write'라는 url로 들어왔을시 Todo List작성을 할 수 있는 페이지를 하나 만들었다 나는 Bootstrap을 이용해서 만들어줬다 이런식으로 간단한 ui를 만들어 놓고 post요청을 해보자 1. html의 form 태그 셋팅 Todo List SAVE 폼 전송버튼 클릭시 /add라는 경로로 POST요청을 하는 폼이다 form태그 안에 method속성은 이 폼을 GET/POST 중 어떤 요청을 할건지 정하는 부분이다 그리고 action은 어떤 경로로 요청할건지를 정하는 부분이다 마지막으로 input태그마다 name속성을 적용하여 서버에 이게 어떤 input의 데이터인지 알 수 있도록 한다 2. form데이터를 서버로 전송전 라이브러리 설치 일단 데이터들 처리를 쉽..

일단, 서버를 껏다 다시 키는 작업이 번거로우니 nodemon을 설치 한다 nodemon은 파일을 저장할때마다 알아서 서버를 새로 시작해준다(브라우저 새로고침 필요) 설치방법은 새터미널에서 npm install -g nodemon을 입력하면 된다 yarn으로 설치를 한다면 yarn add global nodemon을 입력하면 된다 설치 후엔 nodemon server.js (server.js는 파일명이다)라고 입력해주면 된다 GET요청시 HTML파일 보내주기 html파일을 하나 만들어준다 나는 index.html파일을 만들었고 이것은 메인페이지이다 그리고 이와같이 코드를 짜준다 app.get('/', function (요청, 응답) { 응답.sendFile(__dirname + '/index.html')..

express 라이브러리까지 설치 후 entry point에서 입력한 파일명으로 작업폴더에 파일을 하나 생성한다 나는 server.js로 만들었다 그리고 server.js에 기본 셋팅을 해야한다 [기본셋팅] const express = require('express'); const app = express(); app.listen(4040, function () { console.log('lisening on 4040'); }); //서버를 띄우기 위한 기본 셋팅 (express라이브러리) // .listen(파라미터1, 파라미터2) // .listen(서버띄울 포트번호, 띄운 후 실행 할 코드) 이 기본 셋팅을 설명하자면 첫 두줄은 express라이브러리를 첨부하고 사용하는거고 밑에 app.listen..

node.js로 프로젝트를 시작하기에 앞서 express라이브러리를 설치 해 보자. 참고로 에디터는 vs code를 사용하였다. 1. 작업파일을 열어 일단 어떤 라이브러리를 설치했는지 기록하기 위해 package.json을 만들어 준다. [package.json 만드는 방법] 1. 작업폴더에서 터미널을 열고 npm init 입력 2. 엔터키를 치다보면 entry point: ? 라는 부분에서 원하는 파일명을 입력 한 후 끝날때까지 엔터 3. 그러고 나면 package.json 외에 등등이 저절로 생성된다. 2. package.json 생성 후 터미널에서 npm install express를 입력한다. 💡용어 정리💡 • npm : 노드 패키지 매니저라는 건데 라이브러리를 쉽게 설치 할 수 있게 도와주는 도..