백엔드없이 사이드프로젝트 로그인,회원가입 기능 구현 feat.json-server-auth

백엔드없이 사이드 프로젝트 구현 2탄 은 로그인,회원가입 기능 구현하기입니다!

만약 처음 이 게시글을 보시는분이시라면 1탄을 보고 오시면 더욱더 이해가 편합니다! 

https://taejinii.tistory.com/5  

1탄링크입니다.

백엔드없이 사이드 프로젝트 + 배포 with Vercel,json-server,glitch

 

 

본론으로 넘어와서...

저는 로그인 기능구현을위해 json-server-auth 라는 라이브러리를 추가로 사용하였습니다.

https://www.npmjs.com/package/json-server-auth

https://github.com/jeremyben/json-server-auth

json-server-auth

server.js 에 직접 라이브러리를 쓰지않고 해보려고 시도하였지만 json-server 와 json-server-auth 를 같이사용하면 매우 간단하게 구현할수있는것들이 있어 라이브러리를 쓰기로 하였습니다. ㅎㅎ..

 

1.셋팅

1. 배포한 glitch 의 프로젝트에서 하단 터미널을 열어 json-server-auth 를 설치해주세요 ! 

npm i json-server-auth

 

 

2. const auth = require("json-server-auth");  를 추가하여 라이브러리를 불러와주세요.

 

3. server.db = router.db 추가해주세요 이코드는 server.db를 통해 서버에서 데이터베이스를 직접 액세스할 수 있으므로, 예를 들어 라우팅 규칙에서 직접 데이터베이스를 수정하거나, 사용자 인증에 필요한 데이터를 가져올 수 있습니다.

 

4. server.use(auth); 추가해주면 server.js 파일의 준비는 끝났습니다.

 

5.마지막으로 db.json 에 가서 유저의 정보들을 담을 "users":[]을 만들어주세요. 자 이제  준비 끝입니다!

2.회원가입

 

https://your-glitch-address/register

포스트맨을 사용하여 /register 엔드포인트로 회원가입을 테스트해보았습니다. 밑에 결과를 보니 회원가입이 잘되는걸 볼수있습니다!!

심지어 액세스토큰도 자동으로 발급해주고 해당유저의 고유id도 설정을 해줍니다.

 

3.로그인

https://your-glitch-address/login

이번엔 /login 엔드포인트로 로그인 요청을 보내보겠습니다.

로그인도 잘되는걸 확인할수 있습니다. 여기서도 액세스토큰을주고 있습니다.

원래라면 발급받은 액세스토큰으로 사용자인증을하여 해당 유저의 데이터만을 받아오는것이 정석이지만 그러기위해선 json-server 를 쓰는 의미가 없어져버립니다. 그래서 저는 json-server 와 json-server-auth 두개의 조합을 사용하여 로그인한유저의 데이터만을 받아오겠습니다.

 

4.로그인한 유저의 데이터 렌더링

 3.로그인 사진을 보면 로그인 한 유저의 id가 응답오는걸 확인 할 수 있습니다. 저는 이 id를 통해 로그인한 유저의 데이터만을 불러와보겠습니다.

 

db.json

 

db.json 에서 items 테이블에 있는 데이터들을 아무조건없이 불러오면 두개의 객체가 불러와질것입니다.이는 로그인기능을 충실히 기능하지 못하는것이라고 생각했습니다. 왜냐하면 유저는 유저가 등록한 아이템들만 보고싶은데 남이 등록한 아이템들도 다 보여지기 때문입니다.

이를 극복하기위해 json-server- 에서 쿼리로 조건을 걸어 해결하였습니다.

json-server 는 api요청을 할때 쿼리에 조건을 넣어줄수있습니다.

json-sever 쿼리를이용한 필터 - 공식문서

 

위 사진에서 이미 봤듯이 로그인할땐 해당유저의 고유id 도 응답으로 받을수있습니다. 

로그인할때 해당유저의 id 를 로컬스토리지에 저장하여 다른 api요청에 쓰기위해  로컬스토리지에 저장했습니다.

로그인 로직 코드

로그인을 성공하여 id가 저장이 잘 되었다면 아이템을 저장할때에 id도 아이템정보와함께 같이 저장해줍니다.

아이템 추가

 

json-server공식문서에 있는 필터를 이용하여 로그인한 유저의 id를 포함하고있는 데이터만 fetching 합니다.

사이드프로젝트에서 사용한코드

 

 

그럼 이제 1번Id를 가진 유저로 로그인해보겠습니다.

해당 유저의 데이터만 잘 불러오는걸 확인 할 수 있습니다.

 

원래라면 액세스토큰을 이용하여 백엔드에서 액세스토큰으로 검증한후 검증된 데이터를 보내주는것이 맞지만 이 글은 백엔드지식없이 프론트엔드 혼자서도 비슷하게나마 구현 해볼수있다는것을 알려드리기 위해 작성했습니다.

 

json-server 는 어디까지나 개인연습을 위해 도움을 주는 라이브러리이기때문에 실제 서비스엔 적용이 많이 어려울수도있습니다.

하지만 백엔드없이 프론트엔드 개발자 혼자 연습하기엔 아주 뛰어난 도구라고 저는 생각합니다.

백엔드없이 사이드프로젝트를 고민중이신 분들에게 제글이 도움이 되었으면 좋겠습니다.

이해가 안가시는부분 댓글달아주시면 답글은 꼭 달아드리겠습니다

감사합니다.