블로그 만들기(3) - 게시판 기능 만들기 ( 글쓰기 )

게시판 기능을 만들기 전에 기능설명을 먼저 해보면

 

1. NAV바의 글쓰기 버튼을 누르면 글쓰는 페이지로 이동한다.

2. 글쓰는 페이지에서 내용, 제목을 작성하고 글쓰기 버튼을 누르면 DB에 post 컬렉션에 글제목, 내용, 첨부파일 등을 저장한다.

 

이걸 코드로 구현하면 될것 같습니다.

 

이미지 게시 기능은 클라우드 기능을 이용해서

 

1. 파일을 전송하면, 클라우드 서비스에 이미지를 저장

2. 클라우드 연동 라이브러리에 이미지를 URL로 변환

3. 변환된 URL을 DB에 저장해서 보관해서 해결

 

이러한 3단계를 거쳐서 만들어야 하는데

 

이미지 기능은 필요한것 같으면 나중에 추가하면 되니깐, 일단 기본적인 글쓰기 기능을 만들어 보겠습니다.

 

환경변수를 이용해서, DB 비번, 클라우드 비번, 공용으로 사용되는 주요 변수들을 저장하면

쉽게 사용및 제어가 가능해서

 

환경변수 env를 설치해서 사용하겠습니다.

 

mongodb 연동 해보면

 

이렇게 .then() .catch() 이용해서 db 연결 되었을때 서버 실행되도록 코드 작성하고

db = client.db('blog') 로 설정합니다.

이러면 앞으로는 db변수를 이용하여 데이터를 조작할 수 있을것 같네요.

 

시험삼아 잘 연동 되었는지 확인해 보겠습니다.

 

/test로 get요청 날리면 post 컬렉션에 test : 'test 인 값을 insert 한 후

test가 'test 인 document 를 찾아와서 배열 형태로 console.log로 출력해 보면

 

/test 를 요청할 때마다 db에 데이터가 잘 삽입되고, 콘솔에 잘 출력되는 모습입니다.

 

db 연동이 잘 되는것을 확인했으니 글쓰기 기능을 만들어 봅시다.

기능 설명을 먼저 해보자면

1. navbar의 글쓰기 버튼을 누르면 글쓰는 페이지로 이동한다.

2. 글쓰는 페이지에서 글쓰기 버튼을 누르면 db에 제목, 내용이 저장된다.

 

일단 글쓰기 버튼을 눌렀을때 이동될 글쓰는 페이지를 만들어봅시다.

 

글쓰기 기능이니깐 제목, 내용 이렇게 두 input이 있으면 좋을것 같습니다.

이렇게 write.ejs 파일도 완성해 줍니다.

 

그럼 이제 글쓰기 버튼을 누르면 write.ejs 파일로 이동되도록 코드를 변경해줘야 주면

이런식으로 a태그를 이용해서 글쓰기를 누를경우 /write.ejs요청을 하고

요청을 받았을때 write.ejs 파일로 이동하라고 server.js에 기능을 개발하면 될것 같습니다.

동작을 살펴보면

잘 동작합니다.

gpt를 이용해서 html css 파일을 조금 수정해 줍시다.

이런식으로 input, textarea 태그를 이용해서 글쓰기 필드를 꾸며줬네요

다음으로 2번을 코드로 작성하면 될것 같습니다.

 

2. 글쓰는 페이지에서 글쓰기 버튼을 누르면 db에 제목, 내용이 저장된다.

 

<form> 태그를 이용해서

 

post 방법으로 글쓰기를 누르면 /add 요청이 되도록 코드를 작성해 주고

server.js에서 /add 요청이 들어왔을때 db에 title과 content를 저장하면 될것같습니다.

 

그전에 등록해야할 코드가 있는데

폼 데이터, json 데이터를 처리하기 위한 미들웨어 입니다.

 

app.use(express.urlencoded({ extended: true })); // 폼 데이터 처리
app.use(express.json()); // JSON 데이터 처리

 

 

클라이언트가 서버로 보낸 정보를 핸들러에서 쉽게 다루기 위해서 사용하는 미들웨어라서

json 문자열을 js객체로 변환, url 인코딩된 본문형식을 파싱 하는 기능을 제공합니다.

 

그래서 라우트 핸들러에서 req.body 를 통해서 클라이언트가 보낸 데이터를 쉽게 제어할수 있습니다.

 

여기서 try catch를 사용하는 이유는 에러를 잡아내려고 하는건데

없어도 무방한것 같아서 사용의 이유가 궁금해져서 gpt에게 질문해 봤습니다.

 

async/await는 비동기 작업을 간결하고 동기적인 코드의 형태로 작성할 수 있게 해주지만, 비동기 함수에서 발생한 오류는 일반적인 방식으로는 잡아낼 수 없어서 ,try catch를 이용해서 에러상황을 효과적으로 처리하는게 효율적이라고 하네요.

 

그래서 try cahtch 이용해서 간단한 err 처리 해봤습니다.

 

글쓰기 버튼 눌렀을떄 db에 잘 저장되었나 확인해 보면

잘 동작하는걸 확인할수 있네요.

 

다음 포스팅은 작성한 게시글을 보여주면 좋을것 같아서

메인페이지 제작을 계속 해보겠습니다.