포시코딩

전달 받은 값을 DB 에 저장해보자 router.post('/register', (req, res)=>{ console.log('in register post'); let id = req.body.id; let pw = req.body.pw; db.collection('login').insertOne({id: id, pw: pw}, (error, result)=>{ res.status(200).send({message: 'ajax 통신 성공 - id: ' + id + ', pw: ' + pw}); }) }) login 콜렉션 안에 insertOne 을 통해 id 와 pw 값을 집어넣는 코드 성공일 경우 error 값이 undefined 가 되고 result 값이 리턴, 실패일 경우는 그 반대로 리턴된다...

로그인 하려면 아이디가 있어야 되니까 회원가입부터 만들거임 회원가입 입력폼 회원가입 아이디 비밀번호 회원가입 뒤로 이대로 회원가입 버튼을 submit 해서 보내도 되지만 ajax 를 이용해 데이터를 보내면서 아이디 중복체크까지 하며 결과를 받을 생각이다. submit 해버리면 해당 페이지에서 응답을 받을 수 없으니깐 회원가입 버튼을 눌렀을 때 ajax 통신을 하게 코딩해봄 jquery 불러오는 코드 밑에 해야하는건 기본! 통신에 성공했을 때 받는 값을 테스트해볼겸 result 와 result.message 를 출력하게 해보았다. member.js router.post('/register', (req, res)=>{ console.log('in register post'); let id = req.bod..

const db_url = 'mongodb+srv://admin:@cluster0.pygfy.mongodb.net/?retryWrites=true&w=majority'; 이전 게시물에서 안내한대로 세팅한 db_url 의 admin 과 password 부분에는 당연히 클러스터를 만들며 세팅한 사용자명과 비밀번호가 대신 들어가면 된다. 실제로 회사 다니면서 여러 서버를 관리하며 느낀건 이런 기본 세팅들은 다 비슷하게 하고 저런 바뀔 수 있는 부분만 따로 빼내어 관리하면 해당 프로젝트 세팅을 복사해서 차기 프로젝트를 만들기도 쉽고 깃허브 같은 버전관리툴에도 코드랑 같이 업로드 할 필요가 없어서 보안적으로도 좋다는 것이다. 그래서 나는 다음과 같이 코드를 변경해봤다. // const db_url = 'mongo..

https://cloud.mongodb.com MongoDB Cloud MongoDB Cloud is a unified data platform for modern applications and includes a global cloud database, search, data lake, mobile, and application services. www.mongodb.com mongodb 사이트에 들어가 구글 아이디로 접속한 후 mongodb free tier 관련 구글링해서 클러스터를 구축한다. 설명 잘되어있는 블로그 많음 나는 Google Cloud 에 한국 리전을 선택했다. 클러스터를 만들면 아래와 같은 메인 화면일 것이다. 왼쪽 하단 빨간 동그라미 친 Network Access 누르고 Add I..

로그인 페이지와 비슷하게 회원가입 페이지도 하나 만들어주었다. - login.ejs - register.ejs 이제 server.js 에 아래처럼 두 라우터가 있는데 app.get('/member/login', (req, res)=>{ res.render('login.ejs'); }) app.get('/member/register', (req, res)=>{ res.render('register.ejs'); }) server.js 에는 앞으로 여러 라이브러리 선언 등의 코드들이 올거기 때문에 좀 더 보기 편하도록 해당 코드들을 따로 빼줄거다. 일단 nfp 프로젝트에 routes 폴더 추가 후 member.js 파일 생성 member.js 파일 오픈 후 아래 코드 추가 var router = requi..

메인은 나중에 게시글 리스트 페이지로 대체해줄거니 잠시 놔두고 로그인 페이지를 만들어보자 그전에 jquery 랑, bootstrap 쓸거라 index.ejs 에 해당 cdn 들 가져와서 추가 Hi NFP 앞으로 새 ejs 파일을 만들 때 항상 index.ejs 파일 복사해서 쓸거임 css 쪽으로는 만족하려면 한도끝도 없기 때문에 대충 부트스트랩을 이용해 최소한으로만 보기 좋게 할 생각이다. login.ejs 파일을 만들고 로그인을 위한 요소를 몇개 만들어주자. 로그인 아이디 비밀번호 로그인 아이디가 없나요? 해당 파일로 가기위해 server.js 에서 라우팅을 해주자 라우팅이 뭐냐면 간단히 말해서 server.js 에서 아까 한 app.get('/경로')~ 를 통해 ejs 파일로 경로를 지정해주는거임 a..

서버를 켰으니 접속해보자 내 컴퓨터 상에서만 서버가 돌아가고 포트는 8080 으로 설정했으니 브라우저를 열고 localhost:8080 로 접속하면 된다. 아직 아무런 페이지, 경로설정도 없이 서버만 실행시켰기 때문에 위처럼 뜨는게 정상 nfp 프로젝트에 views 폴더를 만들고 메인페이지를 위한 index.ejs 파일을 만든다. html 파일에서는 서버에서 보낸 데이터를 활용하기 힘들기 때문에 ejs 라이브러리를 사용하는거임 ejs 파일은 views 폴더 안에 위치해야 한다. server.js 에도 ejs 라이브러리 사용을 위한 아래 코드 입력 app.set('view engine', 'ejs'); 당연히 const app 선언 밑에 써야한다. 그 다음 localhost:8080 을 요청했을 때 만..

1. 서버 실행 환경 파일 설치 npm install express sudo npm install -g nodemon npm install ejs npm install express -> nodejs 프레임워크인 express 설치 sudo npm install -g nodemon -> sudo: 관리자명령 -> -g: global로 설치 -> nodemon: 서버 자동 재실행 npm install ejs -> html 을 다이나믹하게 쓸 수 있게 해주는 라이브러리 2. 서버 실행 코드 입력 server.js 파일을 생성해서 아래 내용 입력 const express = require('express'); const app = express(); app.listen(8080, ()=>{ console.l..

2년간 실무에서 자바로 개발해오다 nodejs 쓰면서 느낀 점은 유용한 라이브러리 사용이 매우 쉽고 간편하다는 점이다. 라이브러리 = 와우의 애드온 같은 느낌 나는 express 라는 nodejs 프레임워크를 사용할거기 때문에 일단 라이브러리 관리를 위한 프로젝트 세팅이 필요하다. 일단 제일 먼저 vscode 를 키고 nfp 폴더를 만들었다. (Node.js First Project) 에디터 상단에서 터미널 실행 터미널을 키면 나오는 화면. 내 맥북 사용자명이 seonghun 이라 저렇게 나오는거임 터미널은 기본적으로 리눅스 명령어를 쓴다. nfp 폴더에서 명령이 이루어져야 하므로 pwd 를 쳐서 현재 경로를 확인해보자 이제 본격적으로 시작 npm init 으로 라이브러리 관리를 위한 package...

우연히 유튜브에서 보게된 코딩애플님의 Node.js 강의 영상을 보고 처음 자바 배울 때의 재미를 다시 느끼게 되어 유료인 뒷부분까지 다 결제해서 공부를 시작했다. 위 강의를 마무리 하면서 배웠던 내용들을 복습 겸 내가 더 살을 붙여 다시 만들어 볼 생각이다. 검색 기능이 있는 게시판의 기본형태에 회원기능, socket을 활용한 실시간 채팅 기능까지 구현할거임 1. 메인화면 2. 로그인(회원가입), 네브바, 마이페이지 3. 글쓰기(수정), 검색 4. 댓글 5. 채팅 6. GCP(Google Cloud Platform) 을 이용한 웹서비스 런칭 위 순서대로 진행 예정 개발환경은 맥북, VS Code https://4sii.tistory.com/7 Node.js, MongoDB 로 웹서비스 만들기 - 1. ..