모던웹(Node.js Express.js MongoDB vue.js)를 이용한 제작 강좌 고급편 올립니다.
지난 강좌
기초편: https://www.clien.net/service/board/lecture/12640795CLIEN
기본편: https://www.clien.net/service/board/lecture/12713811CLIEN
응용편(서버): https://www.clien.net/service/board/lecture/12746648CLIEN
응용편(사용자): https://www.clien.net/service/board/lecture/12790194CLIEN
개요
활용해야 할 실제 서버의 프론트는 다 오픈됩니다.
공개소스이기 때문에 백엔드도 오픈되어있죠.
그래서 실제 서버로 가기 위한 최소한의 공사를 했다고 생각하면 됩니다.
과정
비밀번호 암호화 하기
비밀번호를 평문으로 저장하면 큰일나겠죠?
노드 기본 모듈인 crypto 와 scrypt를 이용해서 단방향 암호화시켜서 비밀번호를 보호합니다.
뷰 컴포넌트 사용하기
코드, 화면을 모듈화 하여 재사용 합니다.
뷰티파이가 어떻게 이루어져 있는 지 확인해 볼 수 있습니다.
시간 계산하기: 모먼트(moment.js) 맛보기
날짜/시간 라이브러리중 가장 유명한 moment.js에 대해 간단히 알아봅니다.
로그인 시한 제한하기(토큰 갱신)
공공장소에서 로그아웃을 까먹으면 큰일입니다.
토큰에 만료시간을 주고 재발급 토큰을 발급하는 방법을 만들어봅니다.
게시판 관리 만들기
여러 게시판을 한 소스로 만들기 위해 게시판을 설계하고 관리를 해봅니다.
게시판 모델 만들기
게시판과 게시물을 이어주기 위한 관계에 대해 생각해보고 설계해봅니다.
게시판을 위한 메뉴 구성
뷰티파이의 그룹리스트를 이용해서 메뉴에 상하개념을 추가합니다.
게시판 정보 읽기
게시물을 가져오기 위해 먼저 게시판 정보를 읽어서 표현해봅니다.
게시판 게시물 API 만들기
게시판 데이터를 제공하기 위한 API를 설계하고 만들어봅니다.
| 요청 유형 | 파라메터(params) | 내용(body or query) | 설명 |
|---|---|---|---|
| Create, POST | _board | 게시물 내용 | 어떤 게시판에 내용을 씀 |
| Read, GET | _board | 없음 | 어떤 게시판의 게시물들을 가져옴 |
| Update, PUT | _id | 수정된 게시물 내용 | 어떤 게시물의 내용을 변경 |
| Delete, DELETE | _id | 없음 | 어떤 게시물의 내용을 삭제 |
게시판 게시물 쓰고 읽기
게시물(article) API CRUD중 게시판 정보가 필요한 CR(Create Read)를 프론트에서 확인합니다.
게시판 뷰티파이 테이블 사용하기
뷰티파이의 데이터테이블(v-datatable)을 이용해서 화면에 표시합니다.
게시판 내용 읽기
게시물의 리스트는 용량이 얼마 안되지만, 내용은 엄청 클 수 있습니다.
리스트와 내용을 분리해서 API를 적용해봅니다.
| 요청 유형 | 파라메터(params) | 내용(body or query) | 설명 |
|---|---|---|---|
| Create, POST | _board | 게시물 내용 | 어떤 게시판에 내용을 씀 |
| Read, GET | list/_board | 없음 | 어떤 게시판의 게시물 목록을 가져옴 new! |
| Read, GET | read/_id | 없음 | 어떤 게시판의 게시물 내용을 가져옴 new! |
| Update, PUT | _id | 수정된 게시물 내용 | 어떤 게시물의 내용을 변경 |
| Delete, DELETE | _id | 없음 | 어떤 게시물의 내용을 삭제 |
게시판 내용 수정과 삭제
게시물(article)을 선택하여 UD(Update Delete)를 프론트에서 구현해봅니다.
게시판 페이징과 정렬 처리하기
많은 양의 데이터를 처리하기 위해 페이징과 정렬을 구현해봅니다.
게시판 재활용하기(뷰라우터)
게시판 코드는 하나지만 뷰라우터를 통해 코드 재활용해서 다른 게시판을 운영합니다.
공용 알림 메세지 만들기(vuex)
모든 페이지에 있는 알림 메세지 처리를 한 곳에서 해봅니다.
HTTP 예외처리 제대로 하기
임의로 만든 응답(모든 상태 200)이 아닌 HTTP 공식 에러코드를 사용해 상태(400, 401, 404등)와 함께 응답하게 만듭니다.
반응형 게시판 만들기
모바일, 태블릿, 데스크탑등의 다양한 장에서 적절하게 표현되게 변경합니다.
구글 리캡챠로 로봇 막아보기(recaptcha)
로봇(매크로)를 이용해 무한 게시물, 혹은 회원가입을 하는 요청을 막아봅니다.
사용해보기
테스트용 코드를 실제 서버에 포팅해봤습니다.
소스
공개소스 입니다. 맘껏 쓰셔도 상관 없지만 학습을 위해서라면 각 커밋 부분을 참고하시기 바랍니다.
영상
영상은 게시된 강좌의 글을 위한 참고용으로 보시면 됩니다.
실제 코드에 대한 검증용입니다.
사용 화면
고급편 재생목록
전체 강좌 재생목록
마치며
전혀 고급스럽지 않은 고급편이 끝났습니다.
고급편은 고급져서 고급편이 아닌.. 활용편 전 과정이라 이름 지어 본 것입니다.
이제 활용편에서는 코드를 서버에 올려두고 하다 둘씩 기능을 추가 할 것입니다.
서버에 올라갔다는 얘기는 모든 포트(80, 443)가 개방되어 공격의 대상이 되기도 한 것입니다.
완벽하지는 않지만 리캡챠나 토큰등으로 방어하며 서버에 올려볼 수준은 된 것입니다.
매주 2,3개씩 강좌를 진행하는데 그때 그때 따라오시기 보다는 이렇게 큰 챕터 끝나면 술술 따라오시는 것이 학습에 도움이 될 것 같습니다.
감사합니다.
창을 띄워놓고 .. 기한이 만료 됐을 경우 무조건 로그인을 새로 해야 하는건가요?
만료를 3분으로 해놓고 ... 3분동안 아무것도 안하면 만료가 될텐데
그 이후는 무조건 로그인을 새로 해야 하는지요?
저는 은행권 사이트 들어가면 10분에서 가감하고 로그아웃 되는 것을 떠올리고 만들어 본것입니다..
사실상 공공장소에서 정말 위험할 수도 있고요.
그래서 로그인할 때 기억하기(체크박스)를 누르면 거의 무제한 급으로 사용하게 해놓은 것이고요.
기억하기 없이 3분 기한이 너무 짧다면 config/index.js 에서 조금 길게 넣으시면됩니다.
경험상 토큰이 경과후에는 아예 풀어지지도 않아서 주의해야합니다.
그밖에 다른 로직은 응용해서 사용해볼 수 있습니다.
우선 공공장소라고 생각하고.. 생각해보면
긴 만료의 토큰을 주고
클라이언트의 토큰이 오래되었는지 판단하고 브라우징 시작시 파괴한다던지,
브라우저 클로즈 이벤트 등에서 파괴한다던지~
따라서 일반적으로 설계시 유저가 어느정도의 세션을 유지하는게 만족스러운지 계산하는것도 보안 및 UX에 포함됩니다.
사용자 입장에서 편의를 가지면서(갱신이 된지 모르게) 로그인 유지되면서 안전하게 이용하려면..
뭔가 조금 복잡한 정책과 시나리오가 필요하다 생각은 하고 있습니다.
복잡한 정책이 강좌에서는 부담이 될 수도 있고.. 저도 아직 미숙한 부분이라.. 강좌에서는 이런식으로도 가능하다 정도의 설명입니다.
보안전문가 권장하시는 것을 봐서는 아무리 암호화 되어 있어도 토큰을 오래 가지고 있는 것은 좋은 일은 아닌 것 같습니다.
이런건 진짜 찾기도 힘들고 찾아도 영어의 압박이....ㄷㄷ
하지만 전 강좌로 돈 받을만큼 고수도 아니고.. 혹시라도 돈 벌어보려고 했다면 이미 다른 길을 선택했을것 같습니다.
강좌는 제 나름의 소확행이기도 하고 공익실현도 하고자 하는 마음에 진행중입니다.
강좌를 아무리 찾아봐도 인터넷에는 책 구매 유도나 인강 유도로 이어져서 답답해서 직접 만들고 있는 것입니다.
복잡하고 고급스러운 코드 해설이 아닌 최대한 한글로 표현하고 원리와 구현에 목적을 둬서 누구나 접근할 수 있게 만들고 싶은 마음입니다.(하다보면 의도치 않게 어려워지기도 하지만..)