웹 개발자

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. 로그아웃 기능 2. 회원정보 수정 예외처리 3. 코드들 성능개선 및 예외처리, routes 폴더에 파일 세분화하기 로그아웃을 하는 기능이 필요할것 같아서 만들어 봤습니다. 비 로그인 상태일 때는 nav의 탭에 로그인이 로그인 상태일 때는 nav의 탭이 로그아웃으로 변하면 좋아 보입니다. ejs 파일이라 if 문을 이용하면 쉽게 구현 가능할것 같네요 nav를 include 형식으로 불러오므로, ejs 파일에서 여기서 userId를 사용하려면 nav를 사용하는 모든 ejs 파일에 req.session.userId를 보내줘야 하는데 그냥 사용하기 편하게 미들웨어 이용해서 사용하려면 이제 로그아웃 기능을 살펴보면, 로그아웃 버튼을 눌렀을때 /logout 으로 get 요청을 보내고 server.js에서 처리..

프로필 페이지를 클릭하면 이름만 나오는데 프로필 페이지에 들어갈 기능들 좀 추가해주면 좋을것 같습니다. 프로필 페이지 내부에 새로운 세로로 되어있는 nav 바 하나 있으면 편할것 같은데 간단하게 내가 쓴 글목록, 회원 정보 이렇게 두개만 추가하면 편할듯요 gpt 이용해서 만들어보겠습니다. html 이런식으로 구성해주고 gpt 한테 스타일링 부탁하면 의도한대로 왼쪽에 잘 nav 바를 만들어 줬습니다. 이제 nav 바를 클릭했을때 기능을 만들면 1. 작성한 글목록을 클릭했을떄 /posts로 get요청을 하면 2. server.js에서 /posts의 get 요청이 갔을떄 현재 유저가 작성한 글목록 정보를 가져오고 3. 가져온 정보를 작성한 글목록 파일에 보내줘서 그걸 html로 만들어서 보여준다. 이렇게 3단..

오늘 해볼것은 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. db에서 post 컬렉션에 저장되어있는 title이랑 content를 찾기 2. 메인페이지에 html을 생성하기 순서대로 하면 될것 같습니다. 1번 기능 만들어보면 find().toArray()로 post에 들어있는 모든 document를 찾아서 result에 배열 형태로 저장한다음 그 값을 render()의 두번째 파라미터로 데이터를 보내줍니다. ejs 파일이라서 js 문법을 사용해서 html을 생성할 수 있는 장점이 빛을 낼 차례입니다. ejs 파일안에서 js 문법 사용하려면 안에 감싸주면 되고 html을 생성해주려면 이런식으로 감싸주면 ok 모르면 검색하면 되서 굳이 외울필요는 없어 보입니다. ren..

게시판 기능을 만들기 전에 기능설명을 먼저 해보면 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 ..