NEMV(Node.js, Express.js, MongoDB, Vue.js)를 이용해 웹사이트를 한번에 제작하는 강좌를 만들어왔었는데요..

글, 코드, 스크린샷으로 표현하는 방법 보다 영상으로 실제 구동 되는 모습을 확인하며 강좌를 진행하는 것이 훨씬 효과적일 것 같다는 생각을 했습니다.

그래서~ 유튜브에 제가 실제 개발하는 모습을 여과 없이 올려보기로 했습니다.

글로 작성된 부분은 제가 작성한 지난 강좌를 참고하면 됩니다.

전문 유튜버도 아니고 화려한 편집 까지 하기에는 너무 시간이 오래 걸리므로 iMovie를 이용해 간단한 자막 정도만 추가해서 업로드합니다.

사실 편집을 하지 않는 더 큰 이유는… 본인의 목소리를 듣는 것이 상당히 역겨워서 편집은 때려쳤습니다..
자막도 넣다가 귀찮아서 중도 포기했습니다…
파이널컷을 구매하려봤더니 40만원이라 포기했습니다.

계획도 없고 편집 따위 없으므로 진행하다 고민하는 모습과 멍청한 표현력에 당황하지 마시기 바랍니다.

처음엔 어색했는데 하다보니 글 작성하는 것 보다 빠르고 직관적이어서 좋습니다. 물론 글도 같이 작성하겠지만요..

개발자가 디버그등으로 문제를 해결하는 방법과 정 안되면 어려운 문제를 패스? 하는 방법 또한 여과 없이 올립니다.

작업하는 화면 자체가 올라가기 때문에 상단에 시간을 보시면 노편집이라는 것을 알 수 있을 것입니다~

강좌 진행 방법

기존에는 1,2시간의 장황한 설명이 붙은 페이지를 만들었다면 이번엔 챕터를 잘게 쪼개 보려고 합니다.

긴 글보다 짧은 챕터 중 원하는 것만 찾아볼 수도 것이 더 나아 보이기 때문입니다.(router만 찾아보거나, pm2만 찾아보거나)

대부분 영상을 5분 안에 끝내도록 노력해보려 합니다.

물론 헤메이고 버벅이면 30분이 될 수도 있습니다…

개발툴

크로스플랫폼의 장점을 살려서 윈도우 리눅스에서도 잘 된다는 것을 보여주려 해봤다가..

욕심인것을 깨달았습니다.. 맥에서 하는 모습만 촬영합니다.

물론 윈도우에서도 당연히 잘 되는 플랫폼입니다.

시간이 남고 남고 남으면 윈도우, 리눅스도 한번 트라이 해보겠습니다.

영상 제작

퀵타임 화면기록을 이용하고 마이크는 맥북 내장 마이크를 이용합니다.

소리가 상당히 안좋습니다. 양해바랍니다~

영상 수익

수익이 있을 리도 없으니 광고니 뭐니 관심도 없고 알아보지도 않았습니다.

정말 무식하게 쉽게 개발하는 영상을 보여주는 것에 초점을 맞췄습니다.

그러므로 구독 요청 같은 추한 행위는 있을 리가 없습니다.

강좌 이유

단순 재미 입니다.

재미 있으니 공유하고 싶은 것이죠.

트렌디한 개발플랫폼 홍수 속에서 엉성한 개발자의 고민하면서도 즐기는 모습을 보여드리고 싶습니다.

생각나는 대로 진행하기 때문에 매끄러운 진행일리는 없지만, 그게 매력입니다~

강좌 게시 시간

매주 일요일 저녁에 업로드 예정입니다.

떠들면서 해야 되는 것이라 업무중에는 무리네요..

강좌 목록

1. 에디터 설치

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

참고: https://fkkmemi.github.io/nemv/nemv-001-editor/

2. 노드 설치

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

참고: https://fkkmemi.github.io/nemv/nemv-002-node/

3. 익스프레스 설정

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

참고: https://fkkmemi.github.io/nemv/nemv-003-express-setup/

4. 익스프레스 수정

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

참고: https://fkkmemi.github.io/nemv/nemv-004-express-modify/

5. 익스프레스 라우터

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

참고: https://fkkmemi.github.io/nemv/nemv-005-express-router/

6. 뷰티파이란?

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

참고: https://fkkmemi.github.io/nemv/nemv-006-vuetify-about/

7. 뷰티파이 설치

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

참고: https://fkkmemi.github.io/nemv/nemv-007-vuetify-install/

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

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

참고: https://fkkmemi.github.io/nemv/nemv-008-express-vuetify-setup/

9. 뷰티파이 수정

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

참고: https://fkkmemi.github.io/nemv/nemv-009-vuetify-modify/

10. 뷰티파이 추가

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

참고: https://fkkmemi.github.io/nemv/nemv-010-vuetify-add/

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

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

참고: https://fkkmemi.github.io/nemv/nemv-011-express-vue-router/

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

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

참고: https://fkkmemi.github.io/nemv/nemv-012-vuetify-components-example/

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

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

참고: https://fkkmemi.github.io/nemv/nemv-013-javascript-about-start/

기초편 재생목록 링크

모던웹(NEMV) 강좌

기본편 재생목록 링크

작업 예정

마치며

우선 육성이 공개되어 매우 창피합니다..

어려운 용어 쓰지 않고 한글로 나름 최대한 쉽게 설명하려고 했는데.. 다시 보니 급하게 지나가서 이해가 어려울 만한 것들도 많아보입니다..

사실 기존 강좌 진행하며 부수입이 있었습니다.

그 부수입이란.. 구인에 성공했습니다~

구직하려는 사람이 제 강좌를 진행하고 검증 후 들어왔기 때문에 바로 실무가 가능할 정도로 유망한 젊은 인재를 얻었습니다.

덕분에 시간이 나서 이런 짓? 도 할 여유가 생겼습니다..

나름 사회 기여도 했고 저도 일이 편해져서 시너지 효과 제대로 보는 것 같습니다.

제가 쓰는 플랫폼이 너무 훌륭해서 노드나 뷰를 쓰는 것은 결코 아닙니다.

파이썬이던 루비던 리액트던 핫하고 쓸만하다고 생각되면 언제라도 바꿀 생각입니다.(리액트는 벤치마크 되었고, 이미 준비중입니다. 새로운 것을 하는 것은 늘 즐거우니까요~)

쓰려고 하는 목적과 원리만 알면 다 그게 그것이니 한번 도전해볼 생각이 늘 있습니다.

해보지도 않고 어떤 플랫폼이 좋다 나쁘다를 얘기하면 안되겠죠?

하다가 좀 아니다 싶거나 지치면 그만두면 되니까요..

일단 시작해보면 네이티브 플랫폼과 새로운 플랫폼의 장단점을 파악하고 용도에 맞는 프로젝트 진행이 가능합니다.

C/C++을 오래 해왔고 여전히 하고 있습니다.

기존 플랫폼으로도 쓰던 라이브러리 재사용으로 비교적 간단히 무언가 만들 수 있지만..

간단한 테스트 프로그램은 파이썬이나 노드가 훨씬 만들기가 편합니다~

여유가 된다면 미친척하고 한번 시작해보시기 바랍니다~~