MEAN Stack 강의 소개 및 이용법

인터넷에는 정말 방대한 양의 코딩 자료가 있습니다. 특히 영어가 가능하다면, google에 영문으로 질문하면 거의 대부분 그 질문에 대한 해답이 있습니다. 하지만 많은 강의 자료, 질문에 대한 답변들이 주제에 해당하는 코드만 부분적으로 제공하는 경우가 대부분이 였고, dependency(관련 라이브러리가 설치되어 있어야만 실행되는 경우), 프로젝트 세팅 방법 등의 문제로 코드를 적용하기 함든 경우가 많았습니다.

그래서 저는 실행가능한 전체 소스코드를 함께 제공하는 강의 사이트를 만들자고 생각하게 되었고 그 결과 탄생한 것이 A-MEAN-Blog.com입니다. 즉 소스코드의 제공이 이 사이트의 핵심입니다.

MEAN Stack 강의의 목표는 MEAN stack을 사용해서 웹사이트를 제작하는 법을 익히는 것이며 강의 대상은 1. Javascript, HTML, CSS를 이용하여 아주 간단한 사이트를 제작할 수 있는 분들, 2. 프로그래밍의 기본은 알고 있지만 웹프로그래밍은 처음이신 분들로 하고 있습니다.

Javascript를 공부하고 싶으시다면 이 블로그의 자바스크립트로 프로그래밍 입문 강의를 참고해 주세요!

강의 활용 방법

게시물들은 소스코드가 포함된 실습용 게시물과, 소스코드가 포함되지 않은 이론 게시물로 나누어집니다. 소스코드가 포함된 게시물은 아래와 같이 소스코드를 다운받을 수 있는 명령어가 게시물에 포함되어 있습니다. 


회색박스 부분이 명령어들이며 이 명령어들을 사용하기 위해서는 NPM, Git, Atom등이 설치되어 있어야 합니다. MEAN Stack/개발 환경 구축에서 설치방법과 명령어에 대한 설명이 있습니다.

여러 줄의 명령어($하나당 한 명령어)지만 한번에 드래그해서 복사한 후 터미널에 붙여넣기 하면 자동으로 한 줄씩 순서대로 실행이 됩니다. 실행하면 소스코드가 다운로드/업데이트 되어지고 Atom editor에 아래와 같이 해당 강의에서 바뀐 파일 및 코드가 표시됩니다. 

왼쪽 파일트리에서는 파일 색깔로, 오른쪽의 코드 화면에는 번호 옆에 색깔로 표시됩니다. 회색은 변화가 없는 부분, 주황색은 바뀐 부분, 초록색은 새로 생긴 부분입니다.

이처럼 소스코드가 있는 강의는 소스코드를 반드시 먼저 받은 다음 그 코드를 보면서 강의를 진행하시기 바랍니다. 이 소스코드는 강의 이해용으로만 사용하고 자신만의 프로그램을 만들어 해당 강의 내용을 직접 입력하며 코드를 익히세요.

A-MEAM-Blog.com 사이트는 모바일/테블릿에서도 기기의 사이즈에 맞게 화면이 출력됩니다. 랩탑/데스크탑으로 소스코드를 실행시키고 모바일/테블릿 기기를 이용하여 강의 내용을 확인하는 것도 좋은 방법입니다.

MEAN Stack 하위 항목 소개

A-MEAN-Blog.com의 MEAN Stack 항목에는 다음과 같은 하위 항목들이 있습니다. 

각각의 내용과 공부 순서를 알아봅시다. 공지와 0번은 제외하였습니다.

1. MEAN Stack

MEAN Stack에 대한 소개와 개발 환경을 준비(프로그램 설치 등)하는 내용입니다.
반드시 Git, Atom을 설치하셔서 강의들의 소스코드를 다운 받을 수 있게 준비합시다.

2. Node JS 첫걸음

기본적인 웹프로그래밍의 이론을 익히며 Node.js로 웹사이트를 만드는 강의입니다. 웹개발에 대한 배경지식이 부족하다면 반드시 공부하고 넘어가시기 바랍니다. Angular를 사용하지 않으므로 완벽한 MEAN stack 은 아닙니다만, 반대로 생각하면 Angular 없이 Node.js 사이트(백엔드+프론트엔드 통합)를 만드는 방법을 익힐 수 있습니다.

3. Node JS API / 4. Angular 2

MEAN stack을 2 부분으로 나누면 Angular와 API로 나눌 수 있습니다. 이 두개가 완전하게 나누어지기 때문에 실제 프로젝트에도 API만 만드는 팀과 Angular만 만드는 팀으로 나누어 지기도 합니다. 때문에 둘중에 한부분만 필요한 사람들을 위해 2 항목으로 분리하였으므로 Angular만 공부하고 싶은 분은 4번만, API만 공부하고 싶은 분은 3번만 읽으셔도 됩니다.

참고로 4번은 AngularJS(이전 버전)과 혼란을 피하기 위해 Angular 2 라고 표시하고 있지만 사실은 최신 Angular(현재 버전 4) 라이브러리를 사용하고 있습니다.

단편강좌

Node.js, MEAN Stack에 관련하여 본문과 관련은 없지만 알아두면 좋은 내용들을 단편으로 강의합니다.

이 외에 토막글 항목에 반복적으로 등장하는 개념에 대한 글들을 모았습니다.

질문은 해당 게시물에 댓글로 달아주시면 답변해 드리겠습니다.

댓글

g
genie 2017.11.19
이 블로그를 만들어주셔서 감사합니다! 열심히 따라가며 공부해보겠습니다. 
I
Ian H 2017.11.20
@genie,
반갑습니다. 질문있으시면 답글로 남겨주세요^^
D
Diane Seo 2017.11.29
블로거님 정말 최고 짱!! 멋지고 사랑스러운 블로그에요~ 앞으로 자주 들를게요!!
I
Ian H 2017.11.30
@Diane Seo,
반갑습니다. 사랑스럽다는 칭찬은 처음 들어보네요^^;  감사합니다
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP