rhanziy

서버에 해당 글 삭제 요청을 하기위한 delete기능. html에서는 불가능하다. form의 method는 GET 과 POST만 가능하기때문에 어떻게 구현하면 좋을까나 1. method-override 라이브러리 이용(node.js) 2. JavaScript AJAX 이용 jQuery라이브러리로 2번 방법을 써보자. AJAX란 ? 새로고침 없이 서버랑 통신할 수 있게 도와주는 JS문법. 제이쿼리 cdn먼저 복붙하고... ajax 기본문법. // list.ejs 원하는 기능은 게시물에 맞는 삭제버튼을 누를 때 해당 게시물을 삭제하는 기능이기 때문에, button태그에 data-id 속성으로 id값을 부여해준다. // list.ejs . 할일 제목 : 할일 마감 날짜 : 삭제 그리고 삭제버튼을 버튼을 누르면..

/write페이지에서 할일을 등록했을 때 만들어진 post 컬렉션의 id 값은 자동 어지러운? 값으로 부여가 됐었다. 글 관리를 쉽게하기 위해 등록 시 id 값을 게시물 갯수 + 1로 설정해주자. 일단! todoapp데이터베이스에서 총 게시물 갯수를 담을 새로운 컬렉션을 생성해야함. 게시물 갯수를 셀 totalPost와 접근할 이름~ 여기서 totalPost 값은 int형으로 자료형을 지정해줘야한다. 아래서 구현할 제한자 increase 는 셀 수 있는 값만 들어가기때문. 이제 server.js에서 천천히.. add.post에 추가해주자... 1. 누가 폼에서 /add로 POST 요청을하면 2. counter 콜렉션 안에서 이름이 '게시물 갯수' 인 데이터를 찾아와서 3. 총게시물 갯수라는 변수에 tot..

저번 글에서는 MongoClient 안에서 데이터베이스 연결 후, 컬렉션에 원하는 데이터를 넣는 법을 기술했다. 하지만 내가 구현한 입력폼에서 submit 했을 때 사용자가 입력한 값을 post하려면 이렇게 코드를 짜주면 된다. app.post('/add', function(req, res){ res.send('전송완료'); db.collection('post').insertOne({ title : req.body.title, date : req.body.date}, function(error, result){ console.log('전송완료'); }) }); 이제 입력 값을 예쁜 html로 확인해보려면, 렌더링 해주는 ejs 라이브러리를 하나 설치해야함. // 터미널 npm install ejs // ..

무료로 서버호스팅이 가능한 몽고디비를 사용해보자. 공식웹사이트에가서 일단 가입하고 내 db만들어주면됨. db접속 계정은 admin/qwer1234 로 쉽게.. 내 데이터베이스 페이지에서 connect를 누른다. 창이 뜨면 connect your application. node.js선택 후 버전 골라주고, 아래 코드를 복사해서 vscode로 넘어오자. 연결할 server.js 파일에 기본 세팅해주고, 터미널에서 mongodb 설치 const MongoClient = require('mongodb').MongoClient; //터미널 오픈 후 npm install mongodb@버전 설치완료면 다시 올라가서 셋팅해보자. MongoClient.connect('mongodb+srv://admin:qwer1234..

API(Application Programming Interface) ? 명칭은 프로그램간의 통신규약을 뜻한다. 웹개발 환경에서 API는 웹서버와 고객간의 소통방법. 어떻게해야 서버랑 통신을 할 수 있을까?를 명시해놓은 규약 초기에 API는 일관성도 없고 지저분해보였기 때문에 HTTP 요청 시스템(GET, POST, PUT, DELETE)을 하나 짜놓고 쓰면 좋겠다~ 해서 만들어진 REST 원칙. REST 원칙 6개 1. Uniform interface : 하나의 자료는 하나의 URL로 예측가능하게✨ 2. Client-Server 역할의 구분 : 브라우저는 요청만하고 서버는 응답만 하게. 3. Stateless : 요청1과 요청2는 서로 독립적인 존재로 다루자. 4. Cacheable : 서버에서 보내주..

get으로 응답하는 법은 알았으니... 이제 입력폼에서 서버로 전송된 값을 어떻게 확인하나 알아보자. 할일 Due date Submit submit 버튼을 누르면 입력값을 post방식으로 전송하는 간단한 form. 서버에서 input 값을 구분하기위해 name태그를 부여해준다. app.post('/add', (req, res)=>{ res.send('전송완료'); console.log(req.body.title); // req.body면 form에 적힌 데이터 수신가능 console.log(req.body.date); }); server.js 에서 간단하게 post 구현. 이제 어떻게 확인하냐면.... 라이브러리 추가 설치가 필요합니다요. npm install body-parser 1. 터미널에서 bod..

자바스크립트는 html을 조작해서 동적인 효과를 얻기위해 사용되는 언어다. 브라우저마다 javascript 해석엔진을 탑재하고있는데, 크롬은 v8을 사용한다. node.js는 javascript를 브라우저 외에서도 v8엔진을 이용해 실행할 수 있게 도와줌. 그냥 자바스크립트 실행창. node.js를 사용해 서버를 만들면 Non-blocking I/O의 장점이 있는데, 요청이 차례대로 들어오면 빨리 완료된 것 부터 처리해준다. 그래서 SNS나 채팅서비스 웹서버를 만들 때 강점을 보임. 스타트업이나 프로토타입 만들기에서도 빠르게 시범서비스를 만들고 싶다면 node.js는 좋은 선택이다. node.js 공식 홈페이지에가서 설치한다. 웬만하면 안전한 왼쪽버전으로 이미 깔려있으면 버전 확인을 위해 powershe..

type 작명 = (파라미터 type) => return type; 으로 함수의 alias타입을 지정해준다. type Func3 = (a :string) => number; let func3 :Func3 = (a) => { return 10;} 이해하기 쉽게 예시를 들어보면 type UserInfo = { name : string, age : number, plusOne : (a:number) => number, changeName : () => void } let userInfo :UserInfo = { name : 'kim', age : 30, plusOne(a){ return a + 1; }, changeName : () => { console.log('안녕'); } } 조금 복잡하지만 함수의 al..