[NODE.JS] 서버 개발기1_로그인/회원가입

최소한 10월말까지는 마무리 지어야할 졸프,,,,,

 

난 10월이 영원히 안올거라고 생각했나보다.

무슨 서버를 틀만 짜놓고

데이터의 전송을 하나도 해놓지 않은 게으름뱅이가 결국 8월 26일부터 로그인/회원가입 기능을 구현하기 시작했다.

데이터의 전송까지 되는것을 확인한 것이 9월 2일(POSTMAN 만만세)

 

 

그동안 내가 무엇을 했는지 날짜별로 기록하고자 한다.

• 8월 29일 : 책을  찾기 시작했다. 블로그를 뒤지기 시작했다. 그래도 무슨말인지 전혀 이해가 가지 않았다.
• 8월 30일 : 이대로라면 망할거 같은 불안함에 코드를 뜯어보기 시작했다. 하루종일 깃허브 코드와 책을 보았다.
• 8월 31일 : 계속 코드와 블로그를 보다가 이렇게 되다가는 아무것도 못할거 같은 불안함에, 먼저 틀을 짜놓았다
• 9월 1일 : passport와 sequelize를 연결하기로 마음을 먹고, 그 코드를 이용했지만 정말 많은 오류에 좌절하고 계속 코드를 복붙했다.
• 9월 2일 : 드디어 postman으로 데이터를 뿌렸을 때 데이터베이스에서 값을 비교해서 로그인/회원가입 기능을 구현했다.

---

졸프팀의 서버는 node.js를 사용해서 구축했다. 그래서 express를 적극 이용했고, 이 express 위에 sequelize를 사용하고자 했다.

 

SEQUELIZE

sequelize를 이용해서 데이터베이스를 연결하고, 데이터 베이스에 있는 모델을 nodejs에도 js파일로 만들어 sequelize를 이용해서 동기화시켰다.

 

여기서 첫번째 문제. 내의 nodejs 지식 부족으로 인한 잘못된 const 지정으로 계속 동기화가 잘 되지 않고, 그 데이터베이스를 쓰는 모든 기능들이 다 멈춰섰다.

 

const { User } = require("../../../../models");

models이라는 폴더 안에는 index.js, userinfo.js, videoinfo.js가 있다. 이 세개의 파일 중에서 나는 user라는 것은 userinfo.js가 되야 한다고 생각해서 원래 맞는 코드가 아닌 

const { User } = require("../../../../models").userinfo;

 이렇게 기록하는 만행을 저질렀다.

 

req.body

다행히 좋은 블로그를 통해 배워서일까,, 동기/비동기를 적용해서 async와 await를 포함해서 코드를 작성했다.

 

 

 

	exports.register = async (req, res, next) => {
	res.send("register 작동 성공")
	console.log(await req.body);
	const { userid, password, name, birth } = await req.body;
	};

view raw auth.controller.js hosted with ❤ by GitHub

 

 

하지만, POSTMAN으로 데이터를 POST하면, req.body의 내용이 undefined라고 뜨는 것이다. 코드에는 아무런 이상도 없고, res.send()로 보냈을 때에는 데이터도 잘 갔었는데, 정말 이해가 안되서 app.js에 있는 모든 코드를 지우고 정말 필요한것들만 남기고 순서도 정리했다. 그랬더니, 정말 웃기게도 너무 잘 전송이 되는것 아닌가.

 

코드에 무슨 이상이 있는것도 아니고, 굉장히 어이가 없었다. 이 문제 정말 하루 종일 고민했었다.

 

Axios.post

프론트앤드에서 데이터를 보낼 때 axios를 이용해서 데이터를 보냈다. 우리의 졸업프로젝트는 프론트는 localhost:3000을 사용하고, 백앤드는 localhost:5050을 사용하기 때문에, 데이터의 전송이 제대로 되지 않고 404 오류를 내보냈다.

Error: Request failed with status code 404

이를 해결하기 위해 cors를 백앤드의 app.js에 설치 후 사용했다. 

 

- 프론트앤드

 

	axios
	.post("http://localhost:5050/api/auth/login", body)
	.then((response) => {
	//console.log(url);
	console.log(response);
	});

view raw LoginPage.js hosted with ❤ by GitHub

 

- 백앤드

 

 

	const cors = require("cors");
	app.use(cors());

view raw app.js hosted with ❤ by GitHub

 

데이터 전송 성공

프론트앤드에서 받은 데이터를 백앤드의 login 라우터로 전송했을 때 성공을 하면 "Login 라우터 작동중" 이렇게 나오게 설정했다.

passport.initialize() middleware not in use

 

모든 것을 다 했다고 생각했지만, 갑자기 passport에서 오류가 떴다. 이것은 session 설정을 해주지 않았기 때문인데, 백앤드에서 

	app.use(
	session({
	resave: false,
	saveUninitialized: false,
	secret: process.env.COOKIE_SECRET,
	cookie: {
	httpOnly: true,
	secure: false,
	},
	})
	);
	app.use(passport.initialize());
	app.use(passport.session());

view raw app.js hosted with ❤ by GitHub

이렇게 처리를 해주면 오류가 뜨지 않는다.

 

장장 5일에 걸친 로그인/회원가입이 끝났다. 이걸 하는 5일동안 충분히 괴로웠고, 불행했다.

이제 그만,,보고싶다.