새로운 강의는 이제 https://memi.dev 에서 진행합니다.
memi가 Vue & Firebase로 직접 만든 새로운 사이트를 소개합니다.
모던웹(NEMV) 혼자 제작 하기 3기 - 58 사용자편 정리
응용편: 사용자를 마칩니다.
엄청난 코딩이 들어갔다기 보다는 그동안의 강좌를 응용해서 구현한 것들입니다.
양이 엄청 많아보이지만.. 챕터 쪼개기 위해서 짤막한 구간이 많습니다.
다음 강좌 진행 전에 정리해보겠습니다.
클라우드 서비스: 아틀라스 사용
나중에 서버를 자동확장 시키더라도 디비는 한 자원을 사용해야하기 때문에 사용해봤습니다.
로컬디비를 사용하실 분들은 패스하면 되는 것이죠..
개발할 때는 무료로 느린 코딩으로 느린 디비를 사용하기 때문에 빠른 디비보다 더 좋습니다!
기다림의 미학을 즐길 수 있는 디비입니다.
설정파일 만들기
민감한 정보를 깃허브에 올리지 않고 깃에 관리되지 않는 설정파일 제작에 대해 알아봅니다.
API 미들웨어에 대해
요청을 받을 때 바로 응답하지 않고 여러가지 양념을 할 수 있는 단계를 설명해봤습니다.
토큰에 대해
토큰에 대해 간단히 알아보고 직접 만들어봅니다.
프라미스, 어씽크에 대해
비동기로 인해 콜백지옥(코드가 보기 괴로움)을 해소하는 방법을 알아봅니다.
HTTP 헤더에 대해
토큰을 전송해줄 헤더에 대해 알아봅니다.
사이트 저장소에 대해
쿠키, 로컬스토리지에 대해 간단히 알아보고 직접 사용해봅니다.
로그인 만들어보기
백엔드와 프론트엔드가 잘 동작하는지 점검해봅니다.
사용자 모델 변경하기
몽고디비(NoSQL)의 특성을 살려 자유롭게 필드들을 추가 변경하고 직접 관리자 계정을 만들어봅니다.
실제 데이터로 로그인하기
토큰을 가지고 직접 로그인해봅니다.
토큰 인증하기
매번 토큰과 함께 요청을 하고 토큰 검사를 수행해서 이상한 토큰이면 접근을 못하게해봅니다.
로그인 해야 들어갈 수 있는 페이지 만들기
뷰 라우터의 네비게이션 가드를 이용해 페이지 접근을 허가하거나 거부해봅니다.
뷰저장소 사용하기
소스 전체에서 사용할 전역변수에 대해 알아보고 구현해봅니다.
사용자 및 페이지 관리하기
사용자 권한, 페이지 권한을 따로 두고 권한에 맞게 접근하게 하기위해서 관리 페이지를 만들어봅니다.
백엔드로 페이지 권한 얻기
권한에 따른 서버 허락을 받고 페이지를 열 수 있게 만들어봅니다.
모든 요청시 토큰 전송하기
액시오스 기본값 설정으로 편하게 토큰을 전송해봅니다.
새로고침 없이 토큰 전송하기
액시오스 인터셉터를 이용해서 토큰이 변경되어도 문제 없게 만들어봅니다.
한 소스로 사이트 다르게 사용하기
현재 소스를 이용해서 서로다른 운영자마다 다른 사이트를 만들 수 있게 해봅니다.
회원가입 유효성 판단
회원가입시 프론트에서 예외처리할 부분을 vee-validate와 함께 구현해봅니다.
회원가입 적용해보기
연습용 페이지를 실제 데이터를 사용할 수 있게 변경해봅니다.
회원가입 마무리
백엔드 프론트엔드를 모두 사용하여 회원가입이 정상 수행되게 만들어봅니다.
마치며
직접 코딩하며 영상을 먼저 만들고 강좌를 쓸 때도 있고 반대일 때도 있고해서 영상과 코드가 조금 다를 수 있습니다.
이번편으로 사용자 부분이 완전 마무리 된 것은 아닙니다.
하지만 여기까지 습득했다면, 충분히 원리를 이해한 것이고 이후는 완성도와의 싸움이 됩니다.
추후 토큰 발급도 개선해야하고 재발급 로직도 들어가야하고 비밀번호 암호화도 해야하고.. 할일은 아직 많습니다.
댓글남기기