NEMV(Node.js, Express.js, MongoDB, Vue.js)를 이용해 웹사이트를 전체를 혼자 만들어 보는 강좌입니다.

  • node.js & express.js(백엔드): 웹서버, API서버
  • mongoDB: NoSQL 데이터베이스
  • vue.js(프론트엔드): 화면구성
  • vuetify.js(프론트엔드): 머터리얼 화면구성

강좌 소개

바로가기

소스

전체 소스를 공개합니다~

소스 확인

사용해보기

강좌에서 사용한 소스로 구동되는 사이트입니다~

https://fkkmemi.com

기초편

1. 에디터 설치

너무 쉬운 에디터(Atom) 설치이지만, 처음 부터 하는 느낌으로 만들어봤습니다.

바로가기

2. 노드 설치

node.js 설치 및 약간의 설명입니다.

바로가기

3. 익스프레스 설정

익스프레스 설치 및 약간의 설명입니다.

바로가기

4. 익스프레스 수정

생성된 익스프레스 소스를 수정해서 웹서버 동작 확인해보겠습니다.

바로가기

5. 익스프레스 라우터

생성된 익스프레스 소스에 라우터, 페이지를 추가해봅니다.

바로가기

6. 뷰티파이란?

뷰티파이라는 CSS프레임워크에 대해 간략히 소개합니다.

바로가기

7. 뷰티파이 설치

뷰티파이 설치에 대해 알아보기

바로가기

8. 익스프레스와 뷰티파이 연동

익스프레스(백엔드서버)와 뷰티파이 연동하기

바로가기

9. 뷰티파이 수정

뷰티파이 기본 설치된 파일을 수정해서 브라우저로 확인해보기

바로가기

10. 뷰티파이 추가

뷰티파이 기본 설치된 상태에서 페이지 추가해서 브라우저로 확인해보기.

바로가기

11. 익스프레스와 뷰라우터

뷰 라우터의 히스토리모드 이해와 백엔드 라우터의 연결

바로가기

12. 뷰티파이 콤포넌트 사용해보기

뷰티파이의 콤포넌트(버튼, 칩)를 사용해보기

바로가기

13. 자바스크립트 언어 사용 시작에 대해

기존 네이티브 언어와 자바스크립트와 비교

바로가기

기본편

14 자바스크립트 기본 익히기

바로가기

15 뷰티파이 레이아웃

바로가기

16 깃허브 등록

바로가기

17 SPA란

바로가기

18 api 설정하기

바로가기

19 AXIOS 시작하기

바로가기

20 RESTful한 api 만들기

바로가기

21 몽고디비 설치

바로가기

22 몽고디비 설치 확인

바로가기

23 몽구스 설치 및 확인

바로가기

24 api와 몽구스 연결

바로가기

25 API와 프론트 통신 정리

바로가기

26 기본편 정리

바로가기

응용편: 서버

27 클라우드 서버가입

클라우드 서버는 무엇이고 왜 쓰는 지 대략적인 내용을 담았습니다.

그 중 강좌에 적합해보이는 한글이며 무료티어가 있는 NHN 토스트로 진행해봤습니다.

바로가기

28 서버 만들기

클라우드에서 서버를 추가하고 접속해봅니다.

바로가기

29 클라우드 서버 리눅스 다루기

모던웹 개발에서 리눅스는 10개 이하의 커맨드만 알아도 충분하다는 것을 알려드립니다.

바로가기

30 클라우드 서버 노드 설치

리눅스 서버에 모던웹을 서비스할 수 있도록 요소들을 설치해보겠습니다.

바로가기

31 클라우드 서버 깃 설치 및 테스트

깃 설치하고 ssh방식으로 소스를 다운로드 받는 방법입니다.

바로가기

32 클라우드 서버 디비 설치 및 테스트

서버가 개발했을 때와 같이 동작하게 하려면 얀, 몽고디비를 설치해야합니다.

바로가기

33 배포를 위한 개발환경 설정

깃헙을 이용해서 소스를 내려받기 위해 깃헙 인증등에 대해 설명합니다.

바로가기

34 pm2로 안정적인 서버 만들기

pm2라는 것을 이용해서 모던웹 서버가 죽어도 되살아나게 설정해봅니다.

바로가기

35 pm2로 실제 서버에 배포하기

개발피씨에서 pm2는 사실 켜둘 필요가 없습니다.

서버에 문제가 생기면 디버그를 해야지 재시작하는 것이 바람직하지는 않겠죠?

바로가기

36 서버 자동 확장/축소 오토스케일 정리

갑작스러운 트래픽에도 무너지지 않는 스케일아웃 서버환경을 구성합니다.

바로가기

응용편: 사용자

37 몽고 클라우드(ATLAS) 가입 및 테스트

나중에 서버를 자동확장 시키더라도 디비는 한 자원을 사용해야하기 때문에 사용해봤습니다.

로컬디비를 사용하실 분들은 패스하면 되는 것이죠..

개발할 때는 무료로 느린 코딩으로 느린 디비를 사용하기 때문에 빠른 디비보다 더 좋습니다!

기다림의 미학을 즐길 수 있는 디비입니다.

바로가기

38 깃헙에서 안보이는 설정파일 만들기

민감한 정보를 깃허브에 올리지 않고 깃에 관리되지 않는 설정파일 제작에 대해 알아봅니다.

바로가기

39 API 미들웨어란?

요청을 받을 때 바로 응답하지 않고 여러가지 양념을 할 수 있는 단계를 설명해봤습니다.

바로가기

40 토큰(JWT)이란?

토큰에 대해 간단히 알아보고 직접 만들어봅니다.

바로가기

41 프라미스(promise) 어씽크(async) 이정도만 하자!

비동기로 인해 콜백지옥(코드가 보기 괴로움)을 해소하는 방법을 알아봅니다.

바로가기

42 HTTP 헤더 알아보기

토큰을 전송해줄 헤더에 대해 알아봅니다.

바로가기

43 사이트 저장소 다루기

쿠키, 로컬스토리지에 대해 간단히 알아보고 직접 사용해봅니다.

바로가기

44 로그인 간단히 만들어보기

백엔드와 프론트엔드가 잘 동작하는지 점검해봅니다.

바로가기

45 사용자 모델 정리하기

몽고디비(NoSQL)의 특성을 살려 자유롭게 필드들을 추가 변경하고 직접 관리자 계정을 만들어봅니다.

바로가기

46 실제 데이터로 로그인하기

토큰을 가지고 직접 로그인해봅니다.

바로가기

47 토큰 인증하기

매번 토큰과 함께 요청을 하고 토큰 검사를 수행해서 이상한 토큰이면 접근을 못하게해봅니다.

바로가기

48 로그인 해야 들어갈 수 있는 페이지 만들기(네비게이션 가드)

뷰 라우터의 네비게이션 가드를 이용해 페이지 접근을 허가하거나 거부해봅니다.

바로가기

49 뷰저장소(vuex) 이정도만 쓰자

소스 전체에서 사용할 전역변수에 대해 알아보고 구현해봅니다.

바로가기

50 사용자 및 페이지 관리하기

사용자 권한, 페이지 권한을 따로 두고 권한에 맞게 접근하게 하기위해서 관리 페이지를 만들어봅니다.

바로가기

51 백엔드로 페이지 권한 얻기

권한에 따른 서버 허락을 받고 페이지를 열 수 있게 만들어봅니다.

바로가기

52 모든 요청 토큰 설정으로 접근 막기

액시오스 기본값 설정으로 편하게 토큰을 전송해봅니다.

바로가기

53 새로고침 없이 로그인 하기(by 인터셉터)

액시오스 인터셉터를 이용해서 토큰이 변경되어도 문제 없게 만들어봅니다.

바로가기

54 한 소스로 사이트 다르게 사용하기

현재 소스를 이용해서 서로다른 운영자마다 다른 사이트를 만들 수 있게 해봅니다.

바로가기

55 회원가입 유효성 판단

회원가입시 프론트에서 예외처리할 부분을 vee-validate와 함께 구현해봅니다.

바로가기

56 회원가입 프론트 적용하기

연습용 페이지를 실제 데이터를 사용할 수 있게 변경해봅니다.

바로가기

57 회원가입 완성하기

백엔드 프론트엔드를 모두 사용하여 회원가입이 정상 수행되게 만들어봅니다.

바로가기

58 사용자편 정리

바로가기

고급편

59 비밀번호 암호화 하기

비밀번호를 평문으로 저장하면 큰일나겠죠?

노드 기본 모듈인 crypto 와 scrypt를 이용해서 단방향 암호화시켜서 비밀번호를 보호합니다.

바로가기

60 뷰 컴포넌트 사용하기

코드, 화면을 모듈화 하여 재사용 합니다.

뷰티파이가 어떻게 이루어져 있는 지 확인해 볼 수 있습니다.

바로가기

61 시간 계산하기: 모먼트(moment.js) 맛보기

날짜/시간 라이브러리중 가장 유명한 moment.js에 대해 간단히 알아봅니다.

바로가기

62 로그인 시한 제한하기(토큰 갱신)

공공장소에서 로그아웃을 까먹으면 큰일입니다.

토큰에 만료시간을 주고 재발급 토큰을 발급하는 방법을 만들어봅니다.

바로가기

63 게시판 관리 만들기

여러 게시판을 한 소스로 만들기 위해 게시판을 설계하고 관리를 해봅니다.

바로가기

64 게시판 모델 만들기(populate)

게시판과 게시물을 이어주기 위한 관계에 대해 생각해보고 설계해봅니다.

바로가기

65 게시판을 위한 메뉴 구성

뷰티파이의 그룹리스트를 이용해서 메뉴에 상하개념을 추가합니다.

바로가기

66 게시판 정보 읽기

게시물을 가져오기 위해 먼저 게시판 정보를 읽어서 표현해봅니다.

바로가기

67 게시판 게시물 API 만들기

게시판 데이터를 제공하기 위한 API를 설계하고 만들어봅니다.

바로가기

68 게시판 게시물 쓰고 읽기

게시물(article) API CRUD중 게시판 정보가 필요한 CR(Create Read)를 프론트에서 확인합니다.

바로가기

69 게시판 뷰티파이 테이블 사용하기

뷰티파이의 데이터테이블(v-datatable)을 이용해서 화면에 표시합니다.

바로가기

70 게시판 내용 읽기

게시물의 리스트는 용량이 얼마 안되지만, 내용은 엄청 클 수 있습니다.

리스트와 내용을 분리해서 API를 적용해봅니다.

바로가기

71 게시판 내용 수정과 삭제

게시물(article)을 선택하여 UD(Update Delete)를 프론트에서 구현해봅니다.

바로가기

72 게시판 페이징과 정렬 처리하기

많은 양의 데이터를 처리하기 위해 페이징과 정렬을 구현해봅니다.

바로가기

73 게시판 재활용하기(뷰라우터)

게시판 코드는 하나지만 뷰라우터를 통해 코드 재활용해서 다른 게시판을 운영합니다.

바로가기

74 공용 알림 메세지 만들기(vuex)

모든 페이지에 있는 알림 메세지 처리를 한 곳에서 해봅니다.

바로가기

75 HTTP 예외처리 제대로 하기

임의로 만든 응답(모든 상태 200)이 아닌 HTTP 공식 에러코드를 사용해 상태(400, 401, 404등)와 함께 응답하게 만듭니다.

바로가기

76 반응형 게시판 만들기

모바일, 태블릿, 데스크탑등의 다양한 장에서 적절하게 표현되게 변경합니다.

바로가기

77 구글 리캡챠로 로봇 막아보기(recaptcha)

로봇(매크로)를 이용해 무한 게시물, 혹은 회원가입을 하는 요청을 막아봅니다.

바로가기

78 고급편 정리

바로가기

활용편

79 보안연결(ssl) 적용하기

바로가기

80 구글 애널리틱스로 사이트 현황 파악하기

바로가기

81 대시보드 게시판 다르게 표현하기

바로가기

82 대시보드 꾸며보기

바로가기

83 파일 업로드 하기(multer)

바로가기

84 이미지 변환하기(base64, sharp)

바로가기

85 이미지 컴포넌트로 업로드하기(filepond)

바로가기

86 사용자 정보 표시하기

바로가기

87 위지웍 에디터 사용하기(toast ui editor)

바로가기

88 게시물에 댓글 추가하기

바로가기

89 활용편 정리

바로가기

보너스편

90 알림창 쉽게 구현하기(vuetify-dialog)

바로가기

91 국제화 쉽게 구현하기(vue-i18n)

바로가기