전체 글82 5. 회원가입 페이지 회원가입한 데이터를 몽고DB에 저장 -백엔드- controllers - const asynchHandler = require("express-async-handler"); const User = require("../models/userModel"); const bcrypt = require("bcrypt"); //Post Register User, /register const registerUser = asynchHandler(async (req, res) => { const { username, password, password2 } = req.body; const existingUser = await User.findOne({ username }); if (existingUser) { //아이디 중.. 2024. 3. 19. 19. 회원가입, bcrypt 해시 함수 : 비밀번호를 암호화할 때 쓰는 함수로, 입력값을 받아서 또다른 값으로 반환 -일방향 함수로, 원래 입력값으로 복원하는 것이 불가능 -해시가 노출되어도 입력값을 알아낼 수 없음 -입력값을 조금만 변형해도 완전히 다른 해시가 나오며 -입력값의 길이에 상관없이 해시의 길이는 항상 일정 bcrypt : 비밀번호를 해시로 변환해서 데이터베이스에 저장하는 모듈 >> npm install bcrypt views - : 회원가입 페이지 사용자 등록 아이디 비밀번호 비밀번호 확인 models - : User 스키마 생성 const mongoose = require("mongoose"); //몽구스 모듈 가져오기 const Schema = mongoose.Schema; //스키마 생성 const UserSch.. 2024. 3. 19. 4. 연락처 수정 페이지, 삭제 연락처를 수정하고 삭제 -update.js 페이지 추가 -alert 문이 출력되게 수정 -백엔드- controllers - (...) //Get get contact, /contact/:id const getContact = asynchHandler(async (req, res) => { const contact = await Contact.findById(req.params.id); res.status(200).send(contact); }); //Put update contact, /contact/:id const updateContact = asynchHandler(async (req, res) => { const { name, email, phone } = req.body; const contac.. 2024. 3. 17. 18. 연락처 추가, 삭제 method-override : form의 POST 요청을 덮어 씌워서 PUT, DELETE 요청을 할 수 있게 해주는 미들웨어 -form은 기본적으로 GET, POST 요청 밖에 할 수 없음 >> npm install method-override : method-override 등록 const express = require("express"); const dbConnect = require("./config/dbConnect"); const methodOverride = require("method-override"); //method-override 가져옴 const app = express(); app.set("view engine", "ejs"); app.set("views", "./views".. 2024. 3. 16. 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 2 3 4 5 6 7 8 ··· 11 다음
