웹 개발자

댓글 기능을 만들어 보겠습니다. 댓글 기능을 말로 설명하면 1. 글의 상세페이지에 댓글을 작성할 공간, 보여줄 공간을 만들기 2. 작성할 공간에서 작성버튼을 누르면 서버로 데이터를 보내기 3. 서버에서 받은 데이터를 검증한 후 db에 저장하기 4. 서버에서 db에서 저장한 데이터를 가져와서 html을 생성해준다. 이렇게 4단계를 순서대로 만들면 될것 같습니다. 1. 먼저 댓글을 작성할 폼을 만들어 줍니다. 이렇게 input 하나 button 하나 구성하고, 폼태그로 감싸서 post 요청 해주면 될듯 댓글 보여줄 공간 댓글 작성 이제 댓글작성 버튼을 클리갛면 /comment 로 post 요청을 해줄듯합니다. 이제 insertOne() 함수를 이용해서 저장해주면 되겠네요 comment 컬렉션의 documne..

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; //..

오늘 해볼것은 1. 회원가입이랑 로그인 할때 사용자가 허튼짓 못하게 사전에 server.js에서 예방해 두고 2. 게시판 기능을 회원만 이용 가능하도록 해보고 먼저 기존 코드중 회원가입 기능을 보면 각 input의 아이디, 비밀번호에 자체적으로 type속성으로 input을 받고는 있는데요 이렇게 예외가 없어버리면 아무거나 id가 되버리고, 글자수도 제한이 없겠는데요? 그러면 누가 document 보다 큰 용량의 id와 ps를 이용해서 회원가입을 하려고 하면 오류가 발생하겠는데요? 그렇기 때문에 글자수를 제한해 주는게 좋아보입니다. 기존 코드인데요 이건 폼 데이터 처리 미들웨어를 기존에 등록했기 때문에 input에 입력된 내용은 req.body.name, req.body.password 이렇게 값을 다뤄줄..

게시글을 그냥 누구나 작성가능하고, 작성자의 구분없이 수정 삭제가 되버리면 너무 난잡하므로 회원기능을 활성화 해봅시다. 회원가입 기능을 전부 구현하는것보단, 이것도 이미 만들어져 있는 라이브러리를 사용하는게 좋아보이네요 express-session 방식이랑, JWT 방식이 대표적인데 express-session 방식이 express.js 와 쉽게 통합되서 세션 관리를 조금더 효율적으로 사용 가능할것 같네요 그래서 express-session 방식을 이용하겠습니다. 먼저 설치하고 npm install express-session 사용하기 위한 코드를 추가해줍니다. 그럼 이제 회원 기능을 만들어 볼겠습니다. 그럼 만들기 전에 기능설명 먼저 해보면.. 회원가입 기능은 1. 회원가입 기능을 누르면 회원가입 페이..

게시글 작성하는기능, 작성한거 보여주는기능 만들었으니깐 게시물 클릭하면, 상세페이지로 이동하고 게시글 마다 삭제 수정이 가능하도록 만들어 보겠습니다. 상세페이지 기능을 만들기 전에 기능설명 부터 해보자면.. 1. 게시글의 제목을 클릭하면 get요청을 통해서 상세페이지로 이동하기 2. 보여줄 상세페이지를 만들기 이거면 끝날것 같네요 1. 게시글의 제목을 클릭하면 get 요청을 보내기 위해서 태그로 링크를 걸면 될것 같은데 이런식으로 걸면 될듯, detail 요청을 게시글마다 다르게 해줘야 다른 페이지를 보여줄탠데 이것도 URL 파라미터 문법 사용하면 될듯합니다. 이렇게하면 get 요청을 태그로 하는 형태가 되는데 태그로 document 의 _id를 detail:/_id 형태로 get요청 하고 findOne..

게시판 기능을 만들기 전에 기능설명을 먼저 해보면 1. NAV바의 글쓰기 버튼을 누르면 글쓰는 페이지로 이동한다. 2. 글쓰는 페이지에서 내용, 제목을 작성하고 글쓰기 버튼을 누르면 DB에 post 컬렉션에 글제목, 내용, 첨부파일 등을 저장한다. 이걸 코드로 구현하면 될것 같습니다. 이미지 게시 기능은 클라우드 기능을 이용해서 1. 파일을 전송하면, 클라우드 서비스에 이미지를 저장 2. 클라우드 연동 라이브러리에 이미지를 URL로 변환 3. 변환된 URL을 DB에 저장해서 보관해서 해결 이러한 3단계를 거쳐서 만들어야 하는데 이미지 기능은 필요한것 같으면 나중에 추가하면 되니깐, 일단 기본적인 글쓰기 기능을 만들어 보겠습니다. 환경변수를 이용해서, DB 비번, 클라우드 비번, 공용으로 사용되는 주요 변..

메인페이지를 상세히 만들어 볼겁니다. 메인 페이지를 만들기 전에 navbar를 먼저 만드는게 좋아보입니다. nav 바는 모든 ejs 페이지에 공통적으로 들어갈것 같은데 ejs 문법중에 를 사용하면 같은 views 폴더에 있는 파일들의 ejs 파일을 가져다 쓸수 있습니다. 이렇게 쓰면 앞으로 상세 페이지 만들때마다 nav 복붙할필요 없이 include 문법을 사용하면 간단할것 같습니다. nav.ejs 파일 view에 추가하고 일단 포괄적으로 이정도만 구성하고 css는 gpt-4 를 이용해서 작성해 보겠습니다. 이렇게 css 파일을 작성해 줬습니다. 3. 서버를 통해 메인페이지를 보여주기 get요청을 통해서 /경로로 get요청 받을경오 main.ejs 파일을 렌더링 해줍니다. 잘 실행되는것 같습니다. 메인페..

메인 페이지 만들기 위해서 구현해야할 기능들을 나열해보면. 1. 서버를 실행하고 2. 메인페이지를 제작하고 3. 서버를 통해서 메인페이지를 보여주자. 이렇게 3단계 거치면 될것같습니다. 1. 서버를 실행하기 일단 터미널에 npm install express. 이용해서 express 설치해주고 server.js에서 express를 사용하기위해 작성해야 하는 코드도 작성해 줍니다. (라이브러리 쓰는법 검색해서 복붙하기) 이제 서버 port 3000을 통해서 열리네요. 잘 동작하나 확인하기 위해서 app.get 사용해서 한번 확인해주려 하는데 그러면 서버 시작하는 방법을 알아야 할것 같습니다. node 파일명.js 이렇게하면 실행한다고 뜨는데 근데 이러면 귀찮은게, 새로운 코드를 작성할때마다. 1. Ctrl ..