개발 REPO

nodemailer 라이브러리를 사용해 gmail로 특정 email에게 mail보내는 api 실행 중 이 에러가 떴습니다.😱 찾아본 결과 이 에러의 원인은 gmail의 보안 수준때문에 생기는 에러였습니다. 여러가지 방법이 있었는데 일단 첫번째 SMTP와 기타 설정 에서 2단계에 보안 수준을 낮추는 방법이였습니다. 하지만 통하지 않았고... id에서 @gmail.com을 빼고, SSL로 바꾸어 port를 SMTPS로 바꾸는 등 여러가지 방법을 썼지만 결국은 구글 계정 관리 => 보안 => 2단계 인증을 해줍니다. 2단계 인증에서 기타를 고르고 env 파일에서 password를 2단계 인증에서 나온 password로 바꿔주면 완료입니다! 🤩 이유는 2단계 인증에서 만든 비밀번호는 한번 인증하면 계속 사용할 ..

저번에 이어서 쓴 글을 보는 기능과 글을 보고 나서 조회수가 오르는 기능을 구현해 보도록 하겠습니다. 어떻게 해야할지 갈피가 안잡혔었는데 찾아보던 와중에 주소창에 /content/:id 이런식으로 :(콜론)을 붙이면 req.params를 이용해 :id 값을 오브젝트 형태로 가져올 수 있었습니다. req.params의 로직을 보면 uri에 찍혀있는 :id값을 오브젝트로 가져와 params라는 오브젝트를 생성하는 것입니다. 그럼 받아오는 곳이 있어야하는데 저는 간단하게 게시판이 있는 home.ejs에서 제목의 부분을 a href를 이용해서 board_no로 정해주었습니다. 그래서 그걸 이용해 한 번 만들어보겠습니다. 보시면 idx라는 변수에 params 오브젝트의 id를 가져옵니다. 그리고 여기서 많이 헤맸..

게시판이 나오도록 했으니 글쓰기 버튼과 글쓰기가 있어야겠죠 이런식으로 만들 예정입니다. 글쓰기 버튼 및 글쓰기 동작 버튼은 알다시피 ejs에서 만든 후 public에서 원하는 uri로 가게 해줍니다. 글쓰기는 서버에 데이터를 저장해달라고 하는 요청하는 것이기 때문에 메서드 중에 POST를 사용합니다. 그래서 public/write.js에서 이런식으로 사용자가 입력한 data를 받고 그 데이터를 json형식에 문자열로 body에 저장하여 fetch를 이용해 보내줍니다. 콘솔로 찍어서 확인해보면 이렇게 적고 보냈을 때 아래의 사진처럼 오브젝트로 보내지는 것을 볼 수 있습니다. post형식으로 보내기만 하면 되는 것이 아니라 이 데이터들을 받아서 적용을 해줘야 합니다. 그래서 route.js에서 router...

이제 회원가입에서 비밀번호를 암호화했으니 로그인에서 그 비밀번호를 받아와야합니다. 코드를 보면 bcrypt.compareSync라는 메서드가 보이실 겁니다. 보시면 비교할 data와 hash로 바꾸어져있는 data를 비교해 맞다면 true값을 아니라면 false값을 반환한다라고 되어있습니다. .env git에 올릴때 database의 정보를 다 올리게 되면 계정이 root인 경우 database의 비밀번호를 통채로 주는 셈이 되버립니다. 그래서 환경변수를 담는 .env파일을 만들어 root 디렉터리에 넣어줍니다. 처음으로 env파일을 사용하기위해 모듈인 dotenv를 install해줍니다. npm install dotenv package.json에 들어온 걸 확인한 후에 dbConfig.js에 위 사진처..

데이터베이스에 비밀번호가 그대로 저장되면 해커가 그냥 호다닥 가져갈 수도 있으니까 비밀번호를 암호화시킬 방법을 찾고 있었습니다. 그때 나타난 bcrypt bcrypt는 어떤 데이터를 hash로 포장해서 만들어주는 모듈입니다. 좀 더 다양한 설명은 아래 공식 홈페이지에서 찾아보시기 바랍니다. www.npmjs.com/package/bcrypt bcrypt A bcrypt library for NodeJS. www.npmjs.com 설치방법 npm install --save bcrypt-nodejs 구현 다른 파일들은 건드릴 필요없이 post역할을 하는 파일인 home.ctrl.js파일만 건드려줬습니다. 먼저 require로 모듈을 가져온 후 회원가입 기능에 bcrypt기능을 넣어주면 됩니다. 여기서 gen..

🔗 시작하기 전 깔아야하는 모듈 1. express - 웹 프레임워크로써 API개발을 위해 사용합니다. 2. ejs - html 대신 ejs를 사용하기 위해 사용합니다. 3. body-parser - post request data의 body로부터 파라미터를 추출할 때 사용합니다. 4. nodemon - 변경사항이 있을 때 서버를 자동으로 업데이트하기 위해 사용합니다. 5. mysql - 저는 mysql를 데이터베이스로 사용할 것이라 깔았습니다. npm install --save express, ejs, body-parser, nodemon 📋 기능별 폴더 나누기 1. bin - 포트 설정 후 서버를 실행하는 파일 2. dbConfig - 데이터베이스와 연결하는 파일 3. public - ejs와 연결되..

ejs와 연결되는 js 파일 location.href 는 현재 화면을 입력한 페이지 주소로 바꾸는 기능입니다. location.href 파라미터만 쓰면 현재페이지를 확인할 수 있습니다. 1. text에 입력된 값들을 data 오브젝트에 저장합니다. 2. 아래 url로 들어가면 POST프로토콜로 JSON인코딩된 데이터를 보내는 방법이 있습니다. 그 방법을 이용해 body에 데이터를 넣어 보내었습니다. 3. then으로 결과값을 받아 값이 존재한다면 빈 오브젝트인 response의 값을 받아 성공인지 아닌지를 판단합니다. 4. 맞다면 사용자의 이름을 넣어 알림을 줍니다. developer.mozilla.org/ko/docs/Web/API/Fetch_API/Fetch%EC%9D%98_%EC%82%AC%EC%9..

ejs 파일들 라우터 역할 js 파일 보시면 output과 process로 나누었습니다. output은 보여지는 프런트 process는 데이터를 가공하는 기능을 합니다. output res파라미터를 받아 컴포넌트를 html로 바꾸어 브라우저에 나타나게 하는 render 메서드를 이용해 ejs파일과 연결해주었습니다. process 회원가입과 로그인할 때 db에 데이터를 입력하고 검색하는 기능을 해줍니다. req파라미터를 받아 각 js파일에서 던져준 body의 값을 저장합니다. body에는 사용자가 입력한 값이 저장되어있습니다. db.query는 첫번째인자는 sql명령어, 두번째 인자에는 배열로 된 값을 넣어줄 수 있습니다. process.signup 사용자가 입력한 값을 받아 insert문으로 데이터베이스..