Mo's Develog

상세페이지를 어떻게 만들어야할까요? 일반 쇼핑몰들처럼 만들면 됩니다. 누군가 /detail/3 으로 접속하면 3번 게시물 데이터를 보여주면 되고 누군가 /detail/4 로 접속하면 4번 게시물 데이터를 보여주면 됩니다. 그럼... 이렇게 코드 짜면 되겠네여? app.get() 어쩌구를 상품 갯수만큼 만들면 되겠군요? 상품이 100개면 100개 만드시면 되겠습니다. 싫다면 파라미터라는 문법을 이용하시면 되겠습니다. 파라미터는 쉽게 말하면 URL 뒤에 무작위의 문자를 붙일 수 있게 만들어주는 URL 작명 방식입니다. 제가 한번 만들어보겠습니다. 저렇게 콜론 (:) 기호를 붙여주면 누군가 /detail/ 뒤에 아무 문자열이나 입력하면~ 이라는 소리입니다. 이제 사용자가 /detail/ 뒤에 어떤 숫자나 문자..

고객 요청에 응답하는 방법은 여러가지가 있습니다 send는 간단한 문자나 HTML을 보낼 수 있습니다. status는 응답코드를 보낼 수 있습니다. sendFile은 static 파일들을 보낼 수 있습니다. render는 ejs등의 템플릿이 적용된 페이지들을 렌더링해줄 수 있습니다. json은 제이슨 데이터를 담아보낼 수 있습니다. AJAX 요청 성공 또는 실패시 특정 코드 실행하기 당연히 데이터가 오거나 200 코드가 오면 성공이고, 데이터가 안오거나 400, 500 코드가 오면 실패라고 봅니다. 성공이나 실패시 각각 기능을 실행하려면 done 혹은 fail 함수를 이용하시면 되겠습니다. AJAX 성공시 done 함수 내부의 코드를 실행하고 실패시 fail 함수 내부의 코드를 실행할 것입니다. (fun..

게시물 번호를 보내려면 어떻게 합니까 JAX로 DELETE 요청시 가장 중요한 내용이 있습니다. 여러분이 원하는 게시물을 삭제하고 싶으면 AJAX요청을 할 때 삭제 원하는 게시물 번호를 보내십시오. (게시물 번호는 우리가 예전에 _id : 1 이런식으로 DB에 저장해놨으니까 그걸 보내십쇼) data : {} 부분에 삭제를 원하는 게시물 아이디를 적어 보내면 좋을 것 같습니다. 지금은 테스트해야하니 대충 _id : 1이라고 적어봅시다. 그럼 서버는 어떤 코드를 짜야 게시물이 삭제될까 deleteOne 함수를 쓰면 원하는 데이터를 삭제 가능합니다. deleteOne(삭제원하는 데이터이름, function(){} ) 이렇게 쓰시면 됩니다. 그리고 AJAX요청시 data : { _id : 1 } 이라고 적은 정..

서버를 띄워봤는데 이상한 에러메세지가 뜬다면 EJS 문법이 잘못된 것이니 잘 살펴보십시오. 이제 삭제버튼을 누르면 DELETE 요청을 하도록 코드를 짤 것입니다. 간지나는 AJAX를 써서 삭제요청을 해보도록 합시다. 요청은 4개 종류가 있다고 했습니다. GET POST PUT DELETE 하지만 HTML 폼에서 일반적으로 PUT DELETE 요청을 할 수는 없습니다. 이런거 안됩니다. 일반적인 HTML 폼 안에선 GET, POST 요청밖에 못날립니다. (HTML이라는 언어를 만들 때 잘못 만든 겁니다) 그래서 삭제요청을 할 때 쓸 수 있는 3가지 방법이 있습니다. 1. method-override 라이브러리의 도움을 받는다 2. AJAX로 DELETE 요청을 날린다 3. 그냥 POST요청을 날려서 DEL..

_id를 달아서 저장합시다. MongoDB에 데이터를 저장할 땐 _id라는 값을 꼭 넣으셔야합니다. 그래야 삭제도 쉽고 나중에 수정도 쉬우니까요. 아까 모르고 안넣으셨다고요? 괜찮습니다. 안넣으시면 MongoDB에서 알아서 ObjectId() 어쩌구 이런걸 만들어서 아이디를 강제로 부여해줍니다. 무작위의 숫자와 문자로 이루어져있는데 이게 싫으면 애초에 저장할 때 직접 _id를 강제로 달아주셔도 됩니다. 예전에 작성했던 post 요청 처리하는 서버코드를 다시 살펴봅시다. 위의 코드에 주황색으로 표시된 부분을 새로 추가했습니다. insertOne 함수 안에 _id : 1 이라는 항목을 요로케 써주시면... 번호달아서 저장하기 끝입니다. 그런데 1이라고 하드코딩을 해버렸네요. 글 쓸 때마다 항상 _id : 1..

/list로 방문하면 ejs 파일을 보내주자 그냥 HTML 파일만 보내주면 흔히 말하는 Static페이지가 됩니다. HTML에 실제 DB 데이터를 넣어서 보내줄 수가 없으니까요. 그래서 EJS, Pug같은 템플릿 엔진을 사용합니다. EJS는 서버 데이터를 HTML에 쉽게쉽게 박아넣을 수 있게 도와주는 일종의 HTML 렌더링 엔진입니다. 그럼 우리도 이걸 설치해서 DB 데이터를 HTML에 넣어보도록 합시다 설치는 터미널에서 npm install ejs 하시고 이걸 Server.js 상단에 적어주면 되겠습니다. EJS 파일 만들기 EJS 파일은 그냥 html과 똑같이 만들어 쓰시면 됩니다. 근데 중간중간 EJS 문법으로 데이터를 꽂아넣을 뿐입니다. 그래서 파일을 빨리 하나 만들어봅시다. 그 전에 주의할점 :..

자료를 저장하기 위해선 일단 MongoDB에 저장할 폴더와 파일을 만드세요 앞선 포스팅에서 접속 URL 길게 적어서 쓴건 계정에 접속하는 것이었고, 이제는 우리 계정 안에 있는 여러가지 database와 collection에 자료를 저장할 것입니다. 우린 database 이런게 없으니까 하나 만들어보도록 합시다. database/ collection 만들기 ▼ 1. MongoDB Atlas 메인 대시보드에서 Collections 라는 버튼을 누르도록 합시다. ▼ 2. 이번엔 Add my own data 버튼을 누르도록 합시다. (혹은 이미 뭐가 있다면 create database) 3. 여러분이 database 이름, collection 이름을 예쁘게 하나씩 정해준 다음 저장을 눌러줍니다. 저는 data..

MongoDB Atlas 가입 후 호스팅받기 DB를 여러분 집 컴퓨터에 설치하기도 하지만 사이트를 실제 배포할 것이라면 클라우드 서비스를 이용하는 것이 매우 안전합니다. 백업도 알아서 해주고 갑자기 사람이 터질 때 용량 걱정도 없고 그리고 무엇보다 접속 속도가 빠릅니다. 근데 이걸 무료로 호스팅 해주는 고마운 MongoDB Atlas라는 사이트가 하나 있습니다. MongoDB Atlas 가입/초기셋팅 방법 1. 구글에 Mongodb atlas 라고 검색해서 홈페이지를 방문합니다 . 2. 가입합니다. 아마 메일인증 필요? ▼ 3. 뭐 채우라고 하면 잘 채워봅니다 (나중에 변경가능) ▼ 4. 무료 티어를 선택합니다 ▼ 5. 서버위치를 선택합니다. 한국과 물리적으로 가장 가까운 곳을 골라줍니다. ▼ 6. Da..

API란? Application Programming Interface라는 어려운 용어인데 실은 별거 아닙니다. 서로 다른 프로그램간에 소통할 수 있게 도와주는 통신 규약을 뜻합니다. 근데 이걸 웹에서 사용하면 '서버와 고객간의 통신 규약'을 뜻합니다. 조금 더 쉽게 풀어말하면 '서버에게 요청해서 데이터 가져오는 방법' 이 바로 API입니다. 여러분 지금까지 짠 코드가 "누군가 /write로 접속하면 write.html을 보내주세요" 같은 거였는데 바로 이게 서버의 API입니다. 여러분 서버랑 통신할 수 있는 방법이니까요. write.html을 보고싶으면 /write로 접속하라는 API를 정의하고 있었던 것입니다. REST API는 무엇인가 Representational State Transfer 라는 ..

form 데이터를 서버로 전송해보자 1. form 태그 셋팅 폼 전송버튼을 누를 시 /add 라는 경로로 POST 요청을 하는 폼이 완성되었습니다. form 태그의 method 속성은 GET/POST 중 어떤 요청을 할 건지 정해주는 부분, action은 어떤 경로로 요청할건지를 정해주는 부분입니다. 알아서 잘 채워넣으시면 이제 전송버튼을 누를 때마다 서버에 input에 담긴 데이터들을 전송하게 됩니다. 화룡점정으로 input마다 name 속성을 이용해 각각의 input에 이름을 써주었습니다. 폼 전송할 때 input에 이름이 없으면 서버에서 이게 어떤 input에 적혔던 데이터인지 알 수 없으니까요 form 데이터를 서버로 전송해보자 2. body-parser 설치 2021년 이후로 설치한 프로젝트들은..