본문 바로가기

🌌 | WEB DEV/NodeJS16

[NodeJS+Express] 13. form태그에서 PUT, DELETE 요청하기 & MongoDB 수정문법 + form 태그를 그대로 사용하면 GET, POST 요청만 가능하다. 하지만 PUT, DELETE 등을 활용하면 더 좋은 API의 기준에 부합할 수 있을 것이다. 이를 가능하게 하는 방법에 대해서 알아보자! 1. method-override method-override 라는 라이브러리를 이용하면 가능하다. 설치 npm install method-override import //server.js const methodOverride = require('method-override') app.use(methodOverride('_method')) 서버파일 최상단에 위 코드를 작성해서 라이브러리로부터 필요한 것들을 가져온다. 1) form 태그 수정 //edit.ejs ... ?_method=PUT 을 act.. 2023. 10. 15.

[NodeJS+Express] 12. 글 수정기능 만들기 이번에는 글을 수정하는 기능을 구현해보자. 0. 들어가기전 글을 수정하는 과정을 요약해보면 아래와 같다. 1) 글 마다 존재하는 수정버튼 클릭 2) 수정페이지에서 글 수정 (수정 대상 페이지의 내용이 기입되어있음) 3) 수정완료 버튼 누르면 DB에 데이터 전송 후 수정 완료 이러한 과정을 거쳐 구현을 해보자! 1. 수정 기능 만들기 1) 수정 페이지 (1) 서버파일 세팅 수정 페이지에 들어가게 되면 수정 대상인 데이터가 기입되어있다. //server.js app.get('/edit/:num', async(request, response) => { try { let result = await db.collection('post').findOne({_id : new ObjectId(request.params.. 2023. 10. 15.

[NodeJS+Express] 11. URL파라미터 (상세페이지 만들기) 이번에는 URL 파라미터 문법을 이용해 상세페이지를 제작해보자. 0. 상세페이지 형태 지금까지는 루트('/')에서 직접 접속하는 페이지들을 제작했다면 상세페이지는 /parent/child/... 의 형태이다. 이것을 이용하면 url에 일관성을 부여할 수 있고 조금 더 간결하게 사이트를 구성할 수 있을 것이다. 상세페이지를 구현하기 위해서 어떻게 해야할까? /page/detail1, /page/detail2, ... 이렇게 하나씩 만들어도 가능하지만, 페이지 수만큼 만들어야하는 것은 너무나도 비효율적이다. 이것을 간편하게 구현하는 방법은 여럿있지만 그중 하나가 바로 URL 파라미터 문법이다. 1. URL 파라미터 문법 형태 /부모url/:자식url 위와 같이 /:자식url 이 URL파라미터 문법이다. 이를.. 2023. 10. 15.

[NodeJS+Express] 10. 글 작성기능 만들기 (MongoDB 데이터 삽입) 이번에는 글 작성 기능을 만들어보자! 0. 시작하기전.. 먼저 글 작성기능을 만드려면 어떻게 해야할까? 클라이언트가 작성한 글을 서버에 post 요청을 하면 서버는 그 데이터가 올바른 형식인지 확인을 한 후, 이상이 없다면 DB에 등록을 할 수 있도록 해주어야할 것이다. (유저가 직접 DB를 건드리도록 해서는 안될 것이다..) 1. 글 작성기능 만들기 1) 파일 생성 글을 작성할 form을 담은 파일을 하나 생성한 뒤 서버에 등록해준다. //write.ejs ... //server.ejs app.get('/write', (request, response) => { response.render('write.ejs'); }) 2) 파일 설정 글을 작성해서 보내기 위한 설정을 해주어야한다. (1) EJS파일 .. 2023. 10. 14.

[NodeJS+Express] 9. RESTful API란? 사용자로부터 데이터를 입력받아 DB에 저장하는 기능을 구현하기 전에 RESTful API 에 대한 개념을 알아보자! 1. 서버로의 요청 서버는 '요청'에 따른 처리를 하는 프로그램으로 한 줄 요약할 수 있다. 이때 요청을 아무런 방식으로 하는 것이 아닌 정해진 형식에 따라야 한다. 만약 유저가 서버에 요청을 할때에는 method 와 url 을 정확하게 명시해야한다. 1) method의 종류 GET : 데이터 받기 요청 POST : 데이터 보내기 요청 UPDATE, PUT : 데이터 수정 요청 DELETE : 데이터 삭제 요청 ... 주로 사용하는 method의 종류는 위와 같다. 2) URL /path명 과 같은 서버에 등록되어있는 url을 요청해야한다. url은 endpoint 라고 표현하기도 한다. .. 2023. 10. 11.

[NodeJS+Express] 8. EJS 문법 정리 이전 2개의 포스트에서 다루었던 EJS 문법에 대해서 간단히 정리해보자! 1. - JS 문법을 EJS 파일 내에서 사용할 때 예시 HELLO! 결과 2. - 사이에 들어오는 데이터가 html이어도 escape하여 문자열로 출력 예시 결과 3. - 사이에 들어오는 데이터가 html이라면 실제 html 블록 생성 (즉, include() 등 특수한 문법 사용 혹은 DB에서 html 받아올 때 활용) 예시 //footer.ejs @KassidBoard 결과 2023. 10. 9.

[NodeJS+Express] 7. EJS 파일 내 JS문법 사용 & 파일 내 .ejs파일 삽입 이번에는 저번 포스트에 이어서 EJS 문법에 대해서 좀 더 알아보자! 1. EJS 파일 내 JS문법 사용 ejs 파일 내에서는 JS문법을 그대로 사용할 수 있다! 사용법 위처럼 으로 JS구문을 감싸서 사용하면된다. 예시와 함께 살펴보자. 예시1 Hello 결과1 for문의 반복문을 사용하여 태그를 반복할 때 위와 같은 형식을 사용한다. 예시2 HELLO!! Hello 결과2 if문도 문제없이 정상작동한다! 2. 파일 내 ejs 파일 삽입 ejs파일 내에 다른 ejs 파일을 가져와서 붙여넣을 수 있다. nav바 혹은 footer 등 페이지마다 계속해서 반복되는 요소들을 ejs 파일로 따로 생성한 뒤 그 파일을 가져오는 방식으로 보다 간편하게 구현할 수 있다. 사용법 server.js에서 ejs파일에 데이터.. 2023. 10. 9.

[NodeJS+Express] 6. EJS로 MongoDB 데이터 바인딩하기 저번 포스트까지 MongoDB를 서버와 연결하고 DB의 데이터를 꺼내오는 것까지 완료하였다. 이번에는 그 데이터를 이용하여 페이지를 제작해보자! 1. EJS (Embedded JavaScipt Template) 1) 간단하게 알아보기 EJS는 템플릿 엔진이다. 템플릿 엔진이란, DB나 API의 데이터와 미리 정의된 템플릿을 합쳐서 하나의 HTML 파일을 출력해주는 모듈이다. 특히 EJS는 JavaScript 문법을 그대로 사용할 수 있어서 현재 프로젝트에 아주 간편하게 활용할 수 있다. 2) 세팅하기 (1) 라이브러리 설치 npm install ejs (2) server.js(서버파일) 수정 app.set('view engine', 'ejs') 위 코드를 서버파일 상단에 작성한다. (3) views 디렉.. 2023. 10. 8.

[NodeJS+Express] 5. MongoDB에서 데이터 꺼내기 이번에는 MongoDB에서 데이터를 꺼내와보자! 1. MongoDB의 데이터 형태 꺼내오기 전에 사이트에서 직접 데이터를 저장해보자. 세팅이 완료되었다면 이러한 형태로 DB / collection 이 등록되어있을 것이다. [INSERT DOCUMENT]를 눌러서 아래와 같이 {Key: Value}를 입력해보자. 이렇게 잘 들어가는 것을 확인할 수 있다! 저 한 블록이 document인 것이다. ※ _id 란? document 생성 시 _id 라는 항목도 함께 생성이 되는데, 이는 document 간 구분을 위한 id 이다. 이때 ObjectId 라는 랜덤 문자를 입력하는데 몇가지 특징이 있다. 1. 중복X / 2. 먼저 만들수록 낮은 ObjectId / 3. ObjectId 대신 임의로 설정 가능(e.g.. 2023. 9. 24.

이전 1 2 다음

티스토리툴바