[개발] Practice/Node.js MongoDB16 [Node.js / MongoDB] POST 요청해보기 💡 실습 포인트! 이번에는 글쓰기 페이지에서 폼 내용을 작성한 후, POST 요청을 해보았다. POST 요청을 했을 때, 내가 작성한 내용들이 제대로 전송이 되는 것이 목표! 💜 form 태그 셋팅하기 오늘의 할일 날짜 Submit form 태그에 action 과 method 속성을 넣어, Submit 버튼을 누를 때 /add 라는 경로에 POST 요청을 하도록 설정해주었다. action 은 어떤 경로로 요청을 할 것인지, method 는 어떤 요청을 할 것인지를 정해주는 부분에 해당한다. 또한, input 이 여러 개이므로 name 이라는 속성을 넣어, 서버가 어느 input 의 데이터인지 구별을 할 수 있게끔 해주었다. 💜 body-parser 설치하기 2021년 이전에 설치한 프로젝트들은 body-.. 2022. 3. 11. [Node.js / MongoDB] Bootstrap 을 이용해 빠르게 UI 개발해보기 💡 실습 포인트! Node.js / MongoDB 강의가 HTML / CSS 를 중점적으로 다루는 수업이 아니므로, Bootstrap 을 이용하여 기본적인 구조를 다듬는 것만 빠르게 진행했다. 💜 Bootstrap 으로 글쓰기 페이지(write.html) 만들기 우선, 본격적으로 레이아웃을 만들기 전에 Bootstrap 에서 starter template 을 먼저 복사해와서 html 파일에 붙여넣어주었다. 이후, Bootstrap 의 Navbar 양식과 form 양식을 이용하여 간단한 레이아웃을 만들었다. 🤍 Navbar 만들기 Todo App Home Write 임시 🤍 글쓰기 form 만들기 글쓰기 오늘의 할일 날짜 Submit 💜 JavaScript 작성하기 app.get('/write', func.. 2022. 3. 11. [Node.js / MongoDB] 서버에서 HTML 파일전송해보기 💡 실습 포인트! GET 요청 시 HTML 파일을 보내주어 브라우저에 해당 HTML 파일의 내용이 뜰 수 있게 했다. 💜 HTML 파일 만들기 우선 적당한 HTML 파일을 하나 만들어준다. 나는 index.html 라는 파일명으로 HTML 파일을 생성한 후 아래와 같이 내용을 간단히 작성해주었다. 홈페이지입니다. 💜 JavaScript 작성하기 // 누군가가 / 경로에 접속하면 app.get('/', function(req, res){ // index.html 이라는 파일을 보낸다. res.sendFile(__dirname + '/index.html'); }) sendFile() 함수를 사용하면 파일을 보낼 수 있다. __dirname 은 현재 파일의 경로를 의미한다. 💜 브라우저에서 확인하기 HTML .. 2022. 3. 11. [Node.js / MongoDB] GET 요청 처리해보기 💡 실습 포인트! express 라이브러리를 설치하고 사용하는 방법을 간단하게 알아보았다. node.js 를 미리 설치해주고, 터미널에서 node 라는 명령어를 사용해서 서버를 띄워보았다. ( + nodemon) 특정한 경로로 GET 요청하는 방법을 공부했다. 💜 express 라이브러리 사용법 터미널에서 npm install express 로 express 라이브러리를 설치한 후, express 를 사용할 JavaScript 파일에 아래와 같이 작성하면 서버를 띄울 수 있다. 첫 두 줄은 express 라이브러리를 첨부하고 사용하는 문법이고, app.listen() 은 원하는 포트에 서버를 열어주는 문법이다. listen() 함수는 파라미터로 서버를 오픈할 포트번호와 함수를 필요로 한다. 나의 경우 J.. 2022. 3. 11. 이전 1 2 다음
