서버구성
nodejs 12.19.0
기본세팅
간단하게 프로젝트부터 만들어보자
PackgeManager는 npm과 yarn 중에 많이 고민을 하였는데,
사실상 요즘에 와서는 성능격차가 많이 줄었다고 하니 원하는대로 사용하면되나, 여기서는 yarn을 사용하기로 하였다.
cmd창에 다음을 입력한다.
npm install -g yarn
npm install -g nodemon
npm install -g express-generatoryarn 은 위에서 언급했던 packagemanager이고, nodejs로 프로젝트를 하는동안 모듈들을 관리해줄것이다.
그리고 nodemon은 주로 개발할때 쓰지만, 수정 시 서버를 자동으로 재시작해주는 모듈이다. 이 둘을 우선 설치해준다.
express-generator은 express를 프로젝트를 생성을 편리하게 해주는 도구라고 생각하면 되긴하지만, 의외로 여기에서 쓰는 코드들은 잘 안쓰게 되는 것 같다.
다 설치가 되었으면 원하는 폴더로 이동을 해준 뒤 다음을 작성을 해준다
express [폴더명]그러면 여러 폴더들이 나오는데,
package.json을 제외하곤 다 지워주겠다. (bin과 app.js는 굳이 안지워도 되긴합니다.)
그리고 package.json으로 들어가서
start는 node src/index.js
start:dev를 추가하여 nodemon src/index.js 로 지정을 해준다.
프로젝트에 src폴더를 만들어 index.js 파일을 생성해준 뒤
다음을 작성해준다. (포트번호는 아무거나 사용해도되나 겹치지 않아야한다.)
포트번호
const express = require('express'); // -- express 모듈을 불러들인다.
const app = express(); // --불러들인 모듈을 app에 붙임
app.listen(port, () => { // -- 서버를 실행시킨다.이후 yarn start 또는 yarn start:dev 를 입력해주면 서버가 실행되는 것을 볼 수 있다.
하지만 이렇게 완성된 서버는 아무것도 응답하지못한다.
실제로 인터넷에서 localhost:5000 을 들어가보면
표시되지않는다. 이는 당연한것이다. 아무런 처리도 하지않았는데,
이제 한번 다음의 코드를 추가해보자
yarn start로 실행을 했으면 ctrl+c를 통해 서버를 종료시키고 다시 키면되고
yarn start:dev로 실행을 했으면 저장과함께 자동으로 서버가 재실행 되었을것이다.
잘 나오는 것을 알 수 있다.
이를 통해 간단한 로그인 api를 만들어보도록 하자
로그인
우선 로그인을 하기전에 rest api가 무엇인가 싶을것인데 rest api에 대해 알아보도록 하자
Rest Api(Wiki Pedia)
솔직히 저거 읽어도 와닿는 경우는 거의 없을것이다. 요약하자면
자원을 정의하고 자원에 대한 주소를 지정하는 방법
이라고 할 수 있을 것이다.
인터넷 사이트에는 수많은 폴더와 파일로 얽혀 있을 것이다.
velog에도 다른 사람의 게시물을 확인하면 velog.io/@[아이디]/[게시물제목] 이런식의 주소가 형성이 될 것이다.
쉽게말하면 이게 Rest Api를 이용했다 볼 수 있다.
딱 봐도 자원이 어떻게 되어있는지 알 수 있다
velog.io라는 사이트에 [아이디]에 해당하는 사람에 대한 [게시물 제목]을 열람한다.
깊숙히 들어가면 너무도 많은 사례가 존재하지만 이해를 위해 간단히 요약을 한다면 이렇게 될 것이다.
이제 다시 로그인을 구성해보도록 하자
간단하게 아이디는 admin, 비밀번호 password로 하고 데이터는 각각 다른 방식으로 받아보도록 하겠다.
GET
app.get('/user/login', function(req, res) {
const { username, password } = req.query;
if(username === 'admin' && password === 'password')
res.send("로그인 성공");
else
res.send("로그인 실패");
})너무도 간단한 기초적인 코드이다.
아이디와 비밀번호가 admin / password라면 로그인성공 아니면 실패를 출력한다.
결과를 확인해보도록 하자
localhost:5000에서 /user/login으로 이동을 하여 query문을 작성해준다
username과 password를 입력해줘서 확인하는 형태인데, 무언가 보안이 약해보인다.
주소창에 모든 정보가 보이기때문에 보안에 많이 취약하다.
일반적으로 서버에 요청을 하는 방식은 두가지가 있는데, Get방식과 Post방식이 존재한다.
위는 Get방식으로 주소 뒤에 ?를 붙여 key=value 형태로 보내게되면 서버에서 읽을때 query로 읽게된다.
추가로 더 많은 쿼리를 붙일때는 &를 통해 붙이게된다.
Post방식은 Body에다가 데이터를 넣어 보낸다.
Header / Content-Type / Body를 보내게되는데 여기서 주로 읽는 정보는 Body 정보를 읽게 되는것이다.
POST
이번에는 위에 작성했던 코드를 지우고 다음 코드를 작성해보자
app.get이었던것을 app.post로 req.query였던것을 req.body로 변경하면 나머지 코드는 똑같다.
그리고 다시 같은 주소로 접속해보자
아깐 됬는데 왜안되지? 라는 생각이 들 수도 있는데 이는 전송방식에 따른 차이일 뿐이다.
우리가 흔히 주소창에 입력해서 접속하는 방식은 get 방식이고, post방식은 다른것이 필요하다.
지금은 웹페이지를 만들지 않을것이니 프로그램을 하나 받아야 한다.
PostMan 여기서 PostMan을 받고 실행을 시켜보면 다음과 같은 화면이 나온다
여기서 좌측상단에 GET을 POST로 바꾸면 Body가 활성화되는데 다음을 작성하고 send를 해본다
Body에 작성해서 보냈더니 성공이라는 메시지가 뜬다
하지만 이 또한 조금 더 손을 봐야 할 뿐이지 정보가 그대로 노출된다는 점은 동일하다.
다음번엔 더 보안을 신경써 로그인처리를 하는 과정을 해보아야겠다.
