블로그 만들면서 사용했던 코드들 https://github.com/uijeongjin/blog GitHub - uijeongjin/blog: express + mongodb를 이용해서 블로그 만들어봤습니다. express + mongodb를 이용해서 블로그 만들어봤습니다. Contribute to uijeongjin/blog development by creating an account on GitHub. github.com 코드들은 깃헙에 올려뒀습니다. 블로그 express + mongodb 로 만들기 2024.01.13
블로그 만들기 - 완성 첫 프로젝트 끝났네요. 일단 기쁩니다. 어떤 기술을 배워도, 직접 만들어 본적이 없었는데 이번에 직접 만들어 보면서 개발 이라는게 무엇인지 생각해 볼 수 있던것 같아요 개발 포스팅 둘다 처음이라 많이 서툴렀지만 조금이라도, 꾸준히 개발하고 꾸준하게 기록하는데 초점을 맞추려 했습니다. 취업을 위해 만들어 보려고 했던건데 이러한 명확한 목적이 없는 프로젝트는 그렇게 매력적이지는 않은것 같아요. 성능을 개선하고, 여러가지 기능들을 개선해볼까 생각해봤는데 만들려했던 서비스가 아니라, 직전에 express + mongodb 기능설명을 들으면서 forum을 만들었는데, 활용한 기술들중 간단한 것들을 이용해서 직접 어떤 프로젝트를 만들어보려는게 목적이였습니다. 그래서 블로그 프로젝트는 여기서 마무리 하려고 합니다. .. 블로그 express + mongodb 로 만들기 2023.12.29
블로그 만들기(11) - 검색 기능 검색기능 만들기전에 저번에 댓글기능을 만들었는데 게시글을 삭제하면, 댓글도 보이지는 않지만 comment collection에 그대로 남아있을것 같습니다. 그래서 게시글을 삭제할 경우, 댓글도 삭제되도록 기능 수정을 좀 했습니다. 댓글 작성할때 comment 컬렉션에 postId : req.params.id 저장해뒀기 때문에 글 삭제할때 deleteMany()를 이용해서 postId : req.params.id 인 comment들 전부 삭제해주면 게시글을 삭제할때 댓글도 삭제될것 같네요 await db.collection('comment').deleteMany({ postId : req.params.id }); /delete/:id 요청에서 이거 하나 추가해주면 끝인듯 합니다. 이제 검색기능을 만들어 볼.. 블로그 express + mongodb 로 만들기 2023.12.29
블로그 만들기(10) - 댓글 기능 댓글 기능을 만들어 보겠습니다. 댓글 기능을 말로 설명하면 1. 글의 상세페이지에 댓글을 작성할 공간, 보여줄 공간을 만들기 2. 작성할 공간에서 작성버튼을 누르면 서버로 데이터를 보내기 3. 서버에서 받은 데이터를 검증한 후 db에 저장하기 4. 서버에서 db에서 저장한 데이터를 가져와서 html을 생성해준다. 이렇게 4단계를 순서대로 만들면 될것 같습니다. 1. 먼저 댓글을 작성할 폼을 만들어 줍니다. 이렇게 input 하나 button 하나 구성하고, 폼태그로 감싸서 post 요청 해주면 될듯 댓글 보여줄 공간 댓글 작성 이제 댓글작성 버튼을 클리갛면 /comment 로 post 요청을 해줄듯합니다. 이제 insertOne() 함수를 이용해서 저장해주면 되겠네요 comment 컬렉션의 documne.. 블로그 express + mongodb 로 만들기 2023.12.27
블로그 만들기(중간점검) - (gif 파일로 몰아보기) 1. 회원가입 기능 조건문을 이용해서 적절한 조건을 만들고, 적용하기 id는 1~8글자 영어 + 숫자조합 ps는 특수문자 무조건 포함하도록 조건을 설정함 만약 조건에 맞지않게 회원가입을 시도할경우, 경고문을 보여주도록 동적으로 html을 생성 bcrypt 를 이용해서 비밀번호는 암호화 해서 db에 저장함 // 정규식과 길이 제한 설정 const MIN_LENGTH = 1; const MAX_LENGTH = 8; const idRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]+$/; // 문자와 숫자 조합 const passwordRegex = /^(?=.*[!@#$%^&*])/; // 특수 기호 포함 const { username, password } = req.body; //.. 블로그 express + mongodb 로 만들기 2023.12.26
블로그 만들기(9) - 코드정리 및, 코드 세분화하기 1. 로그아웃 기능 2. 회원정보 수정 예외처리 3. 코드들 성능개선 및 예외처리, routes 폴더에 파일 세분화하기 로그아웃을 하는 기능이 필요할것 같아서 만들어 봤습니다. 비 로그인 상태일 때는 nav의 탭에 로그인이 로그인 상태일 때는 nav의 탭이 로그아웃으로 변하면 좋아 보입니다. ejs 파일이라 if 문을 이용하면 쉽게 구현 가능할것 같네요 nav를 include 형식으로 불러오므로, ejs 파일에서 여기서 userId를 사용하려면 nav를 사용하는 모든 ejs 파일에 req.session.userId를 보내줘야 하는데 그냥 사용하기 편하게 미들웨어 이용해서 사용하려면 이제 로그아웃 기능을 살펴보면, 로그아웃 버튼을 눌렀을때 /logout 으로 get 요청을 보내고 server.js에서 처리.. 블로그 express + mongodb 로 만들기 2023.12.26
블로그 만들기(8) - 프로필 페이지 만들기 프로필 페이지를 클릭하면 이름만 나오는데 프로필 페이지에 들어갈 기능들 좀 추가해주면 좋을것 같습니다. 프로필 페이지 내부에 새로운 세로로 되어있는 nav 바 하나 있으면 편할것 같은데 간단하게 내가 쓴 글목록, 회원 정보 이렇게 두개만 추가하면 편할듯요 gpt 이용해서 만들어보겠습니다. html 이런식으로 구성해주고 gpt 한테 스타일링 부탁하면 의도한대로 왼쪽에 잘 nav 바를 만들어 줬습니다. 이제 nav 바를 클릭했을때 기능을 만들면 1. 작성한 글목록을 클릭했을떄 /posts로 get요청을 하면 2. server.js에서 /posts의 get 요청이 갔을떄 현재 유저가 작성한 글목록 정보를 가져오고 3. 가져온 정보를 작성한 글목록 파일에 보내줘서 그걸 html로 만들어서 보여준다. 이렇게 3단.. 블로그 express + mongodb 로 만들기 2023.12.25
블로그 만들기(7) - 회원 기능 예외 사항 서버에서 검증하기 오늘 해볼것은 1. 회원가입이랑 로그인 할때 사용자가 허튼짓 못하게 사전에 server.js에서 예방해 두고 2. 게시판 기능을 회원만 이용 가능하도록 해보고 먼저 기존 코드중 회원가입 기능을 보면 각 input의 아이디, 비밀번호에 자체적으로 type속성으로 input을 받고는 있는데요 이렇게 예외가 없어버리면 아무거나 id가 되버리고, 글자수도 제한이 없겠는데요? 그러면 누가 document 보다 큰 용량의 id와 ps를 이용해서 회원가입을 하려고 하면 오류가 발생하겠는데요? 그렇기 때문에 글자수를 제한해 주는게 좋아보입니다. 기존 코드인데요 이건 폼 데이터 처리 미들웨어를 기존에 등록했기 때문에 input에 입력된 내용은 req.body.name, req.body.password 이렇게 값을 다뤄줄.. 블로그 express + mongodb 로 만들기 2023.12.24
블로그 만들기(6) - 회원 기능 만들기 게시글을 그냥 누구나 작성가능하고, 작성자의 구분없이 수정 삭제가 되버리면 너무 난잡하므로 회원기능을 활성화 해봅시다. 회원가입 기능을 전부 구현하는것보단, 이것도 이미 만들어져 있는 라이브러리를 사용하는게 좋아보이네요 express-session 방식이랑, JWT 방식이 대표적인데 express-session 방식이 express.js 와 쉽게 통합되서 세션 관리를 조금더 효율적으로 사용 가능할것 같네요 그래서 express-session 방식을 이용하겠습니다. 먼저 설치하고 npm install express-session 사용하기 위한 코드를 추가해줍니다. 그럼 이제 회원 기능을 만들어 볼겠습니다. 그럼 만들기 전에 기능설명 먼저 해보면.. 회원가입 기능은 1. 회원가입 기능을 누르면 회원가입 페이.. 블로그 express + mongodb 로 만들기 2023.12.23
블로그 만들기(5) - 게시판 기능 만들기(상세페이지, 삭제 , 수정) 게시글 작성하는기능, 작성한거 보여주는기능 만들었으니깐 게시물 클릭하면, 상세페이지로 이동하고 게시글 마다 삭제 수정이 가능하도록 만들어 보겠습니다. 상세페이지 기능을 만들기 전에 기능설명 부터 해보자면.. 1. 게시글의 제목을 클릭하면 get요청을 통해서 상세페이지로 이동하기 2. 보여줄 상세페이지를 만들기 이거면 끝날것 같네요 1. 게시글의 제목을 클릭하면 get 요청을 보내기 위해서 태그로 링크를 걸면 될것 같은데 이런식으로 걸면 될듯, detail 요청을 게시글마다 다르게 해줘야 다른 페이지를 보여줄탠데 이것도 URL 파라미터 문법 사용하면 될듯합니다. 이렇게하면 get 요청을 태그로 하는 형태가 되는데 태그로 document 의 _id를 detail:/_id 형태로 get요청 하고 findOne.. 블로그 express + mongodb 로 만들기 2023.12.22