MongoDB 전 data 다루기

Req.body 불러오기

1. edit-profile.pug

extends base

block content
    form(method="POST")
        input(placeholder="이름" name="name", type="text")
        input(placeholder="이메일" name="email", type="email")
        input(placeholder="전화번호" name="phoneNo", type="text")
        input(placeholder="생년월일" name=" birthDay", type="text")
        input(type="submit", value="전송")

2. "전송"을 누르면
   

3. console.log(req.body); 를 확인해 보면

export const postEdit = (req, res) => {
  console.log('req.body :', req.body);
  return res.end();
};

4. form 에 입력한 키와 값을 보여준다
   

5. html에서 보내는 form data를 javascript 형식으로 알아 볼 수 있도록 아래 미들웨어 를 사용함**
   app.use(express.urlencoded({ extended: true }))

6. "app.use(express.urlencoded({ extended: true }))" 미들웨어 안했을때 아래와 같이 나타남
   ;

7. "app.use(express.urlencoded({ extended: true }))" 미들웨어 위치
   req.body 사용하는 router 미들웨어 이전에 위치
   

---

Req.body를 이용한 form data 수정오기

1. 가짜 data를 만든다
   

2. 가짜 data를 pug로 보여주면 이런식!, 클릭하면!
   

3. 먼저 getEdit 실행
   

4. edit-profile 렌더링,
   
   1) 여기서 req.params를 통해 받은 route에 "/:id(\d+)"를 "id"에 담고
   2) 이 "id"를 이용 가짜 data 배열안에 정보를 "customer"에 담는다
   3) "console.log(customer)" 를 보면 정보가 담겨있다
   

5. 렌더링된 edit-profile 파일에서 정보를 수정해 "전송" 클릭하면 "postEdit"가 실행되고,
   
   
   

6. "redirect(/customers/${id})" 실행되어
   1)"name"이 변경된것을 볼수있다
   
   2) 다른 email, phoneNo, birthDay가 변경 안된 것은 "customers[id - 1].name = name;" 만 담았기 때문

---

Upload profile

1. Home.pug 에 upload-profile.pug 링크걸어 클릭! 하면 "getUpload" 실행
   
   
   
   

2. 실행된 "upload-profile" 에서 정보 입력하고 "전송" click 하면 postUpload" 실행
   
   

3. "postUpload" 실행
   
   1) req.body 정보 값을 각 key에 담고,
   
   2) 담은 정보를 새로은 data로 만들어서 customers data에 "push" 하면 새로운 data가 추가!
   
   *** id에 새로운 번호를 추가하려면 "customers.length + 1"값을 구해서 처리