분류 전체보기82 3. 연락처 추가 페이지, react-router-dom 입력값을 몽고DB에 저장 후 표시 -add.js 페이지 추가 -백엔드- controllers - (...) //Post all contact, /contact/add const createContect = asynchHandler(async (req, res) => { const { name, email, phone } = req.body; if (!name || !email || !phone) { res.status(400).send("No Input Value"); } const contact = await Contact.create({ name, email, phone }); res.status(201).redirect("/contact"); //성공 시 /contact로 이동 }); (...) r.. 2024. 3. 15. 17. 연락처 추가 views - : 연락처 추가 페이지 ※action : 어떤 경로로 요청할 것인지 지정 연락처 목록 연락처 추가 연락처 정보를 추가합니다. 이름(Full Name) 메일 주소(E-mail) 전화번호(Mobile) 저장하기 controllers - : 입력한 name, email, phone을 POST 요청해서 추가 ※.redirect() : 요청 경로를 강제로 바꿈 (...) //GET view add contact form, /contact/add : add.ejs 파일을 렌더링해서 보여주기 const addContactForm = (req, res) => { res.render("add"); }; //Post contact, /contact/add : 입력한 name, email, phone을 추가 .. 2024. 3. 15. 2. 연락처 목록 페이지, Axios 몽고DB에 저장된 데이터를 가져와 표시 -header.js, main.js 페이지 추가 -백엔드- controllers - (...) //Get all contact, /contact const getAllContact = asynchHandler(async (req, res) => { const contact = await Contact.find(); res.status(200).send(contact); //모든 자료가 담긴 contact 변수를 전송 }); (...) -프론트엔드- Axios : 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 >> npm install axios index.js App.js component -header.js pag.. 2024. 3. 14. 16. include, 연락처 표시 include : 하나의 파일을 다른 파일에 끼워 넣는 것 : public 파일을 정적인 파일(.css, .js, 이미지 파일 등)로 연결 ※express.static() : 정적인 파일을 연결 const express = require("express"); const dbConnect = require("./config/dbConnect"); const app = express(); app.set("view engine", "ejs"); app.set("views", "./views"); dbConnect(); app.get("/", (req, res) => { res.status(200).send("Hello Node"); }); app.use(express.static("./public")); //.. 2024. 3. 14. 이전 1 ··· 7 8 9 10 11 12 13 ··· 21 다음
