새로운 강의는 이제 https://memi.dev 에서 진행합니다.
memi가 Vue & Firebase로 직접 만든 새로운 사이트를 소개합니다.
NEMBV 0 모던 웹 제작 소개
이 강좌는 종료되었습니다.
새로운 강좌로 시작하세요~
모던웹(NEMV) 제작 강좌
이제부터 웹사이트를 처음부터 설계해서 실제 가동까지의 과정을 기록하고 공유해보려고 합니다.
방대해 보이는 웹솔루션의 모든 것을 혼자 진행하는 데 의미가 있습니다.
다양한 기술들이 거의 영어로 되어있는데 가독성을 위해 가급적 한글로 작성합니다.
제작자 소개
쌩뚱 맞을 수도 있지만, 저는 순수 웹개발자가 아닙니다.
저는 사실 순수 프로그래머 또한 아닙니다. (생명공학 출신입니다)
어쩌다 보니 프로그램을 시작하게 된것인데요.. 아마도 저 같은 분도 상당수 있을 것이라 봅니다.
펌웨어와 윈도우프로그램을 주업으로 회사를 다니고 있습니다. 현재는 웹:펌웨어:윈도우 = 6:3:1 정도의 업무를 하고 있습니다.
당연히 고수도 아니며 업무의 남은 잉여시간을 취미인 개발로 채우면서 적당히 필요한 것을 취한 것입니다. (대략 업무 70%가 잉여시간: 회사, 대표 잘만나야 됩니다..)
현재는 잉여시간이 업무시간이 되어질 정도로 나름 사업화 진행이 잘 되고 있습니다.
웹을 시작하게 된 이유
웹을 시작하게 된 과정은 복잡했지만 그나마 요약하면 이렇습니다.
- 해외 위치관제 펌웨어를 제작: 소켓통신으로 서버에 데이터 전송
- 외주서버업체가 일정이 자꾸 늦어짐..
- 급한데로 윈도우 서버 프로그램을 만들어서 수신을 받음
- 데이터를 확인하기 위해 윈도우 클라이언트 프로그램이 필요해서 만듬
- 매번 exe,msi파일을 고객에게 전달하기 불편해서 업데이트 서버를 만들었지만 호환성, 권한 이슈등 문제가 불편함
- 웹사이트를 만들기로 결심: iis와 php (윈도우서버였기 때문에 아파치대신 기본 내장되어 있는 웹서버를 사용해봤음)
- php로 서버에 받아진 파일 데이터를 표형태로 볼 수 있게됨
- 위치관제이기 때문에 맵에 표시하고 싶어서 javascript를 배움
- 파일 찾기가 힘들어서 mysql->mariadb를 설치하고 적용
- 아무나 볼 수 있는 문제 때문에 로그인 관련 로직을 만듬
- 이때부터 외주업체 아웃
- 라이브러리를 쓰다보니 자연스레 jquery(javascript를 작성하기 편하게 해주는 언어?)를 사용하게됨
- 부드럽게 만들려다보니 ajax(페이지 내에서의 통신으로 페이지 일부 요소를 원하는 데로 바꿈)로 페이지 리프레쉬를 점차 줄임
- 디자인이 후져서 부트스트랩을 사용하게됨
- 서버사이드 렌더링(서버에서 html 만들어서 보냄)보다 클라이언트 렌더링(받은 html 안에서 ajax로 부분 요소 변경)이 많아지면서 api 위주의 심플한 서버를 찾음.
- 심플 api 서버를 위해 node&express를 이용(RESTful API 설계)
- 가변 필드와 업무상 데이터 편의성(일부 파일 데이터)을 위해 데이터베이스를 nosql로 변경: amazon dynamodb -> mongodb
- 이후 쭈욱 기타 추가
과정을 다시 한번 요약하면 결국 필요한 기능을 찾아서 덧붙임 이라고 볼 수 있습니다.
(장황한 기획하다 시간 버리지 않고 즉시 필요한 것을 도입해서 바꿔버린 것입니다.)
개발덕후이기 때문에 유난히 신상을 좋아하는 성향도 한 몫 했다고 볼 수 있습니다.(모든 개발툴, 엔진등 버전 max)
공개의 이유
재미있는 영화를 보거나 맛있는 음식이 있다면 누군가에게 알리고 싶은 것과 같은 마음입니다.
이 과정과 소스는 광고가 없으며 상업적 이용을 해도 아무 상관 없는 라이선스 입니다.
누구에게 필요할까요?
- 엔터프라이즈급이 아닌 혼자서 이것저것 다해보고 싶은 사람
- 작은 사이트를 소수의 인원으로 운영하고 싶은 분 (eg) 직원관리 사이트, 펌웨어 관리, 등)
- 잉여력이 높은 개발 덕후
- 모바일 푸쉬서버등의 기능 측면 api 서버
NEMBV란 무엇인가요?
바로 Node.js Express.js MongoDB Boostrap Vue.js 로 웹사이트를 제작하겠다는 것입니다.
NEMBV는 제가 만들어 본 작명이며 원래는 MEVN(Mongo Express Vue Node)라는 stack:명칭이 따로 있습니다.
결코 다른 플랫폼, 솔루션보다 좋다 나쁘다를 논하려고 하지 않습니다.
각각 플랫폼들간 장단점이 있다고 봅니다.
각 요소들을 간단하게 설명해보겠습니다.
node.js
웹에서만 쓰던 javascript를 밖에서도 쓸 수 있게 해주는 역활을 한다고 보면 됩니다.
javascript로 웹에서 안되는 것들 파일처리, 소켓, 디비접속등
비교 대상: python, ruby, php, java 등
장점은 역시 언어입니다. javascript를 쓰기 때문에 따로 언어를 배울 필요가 없습니다.
단점은 비동기 방식인데 사실 이건 장점이기도 한것입니다..
express.js
node.js에서 사용하는 웹서버중 하나고 쉽게 말하면 apache라고 보시면 됩니다.
비교 대상: jango, rails, spring, go, 등
장점은 RESTful API를 설계하기 적합합니다. (물론 최근 나온 솔루션들은 대부분 편합니다.)
단점은 인수가되고 핵심 개발자가 나가면서 버전이 안올라가는 중입니다. (곧 5가 나온다고는 하지만..)
mongoDB
웹서비스를 하려면 디비가 있는게 편합니다.
초반에 디렉토리와 파일로도 운영을 해봤지만 디비가 있는데 굳이 그럴 필요가 없었습니다.
무슨 데이터베이스를 쓰던 상관 없습니다. 단순하게 생각해야 합니다. (CRUD{Create Read Update Delete}: 쓰고, 읽고, 수정하고, 지우고 만 있으면 됩니다.)
생각보다 기본적인 데이터베이스 활용은 학습커브가 낮으니 꼭 디비는 사용하시는게 좋습니다. (물론 깊이 들어가면 한도 끝도 없이 어렵습니다)
noSQL db중 현재 점유율 탑으로 알고 있습니다.
node와 궁합이 좋습니다. 데이터 자체가 json(javascript형 도큐먼트)이고 odm 엔진인 mongoose까지 쓰면 단 몇줄에 쓰고 읽기가 됩니다.
비교 대상: mariaDB, oracle, msSQL, 등
장점 필드가 가변이고 안에 들어가는 데이터도 맘데로 쓸 수 있어서 자유도가 높습니다.
단점 설치가 불편하고, 자유도가 독이 됨
Bootstrap
css framework 입니다. 트위터 개발자가 처음에 만든거라 트위터부트스트랩이라도 합니다.
외국은 대부분 씁니다. 한국도 점유율이 조금 올라가고 있다고 합니다.
html의 난이도는 사실 css인데 div:style등이 디자이너가 아니고서는 실상 너무 어렵습니다.
그부분을 미리 class로 정의 했습니다.
버튼, 모달, 카드등이 어디서 본 디자인이라면 소스보기 해보면 부트스트랩일 것입니다.
제일 중요한 부분중 하나는 원소스로 모바일, 데스크탑이 가능합니다.
- 원소스: 브라우저 사이즈로 요소를 정렬
eg)4개의 div가 나란히 좌우로 있다면 데스크탑이면 그대로, 태블릿이면 2개씩 내려감, 모바일이면 1개씩 표시 - 투소스: 요청헤더정보로 판단해서 맞는 페이지를 뿌려줌
eg)xxx.com -> desktop, m.xxx.com -> mobile
그밖에 자주 쓰는 스타일들은 축약도 되어 있습니다.
eg) style=”margin-bottom:3px” -> class=”mb-3”
비교 대상: foundation, bulma, 등
장점: 비디자이너도 공대감성 유아이보다는 좋게 나옴 (큼지막한 버튼, 폼등이 모바일에서 보기가 좋음)
단점: 한국에서는 유난히 호불호가 많이 갈림 (주로 이미지 중심의 사이트를 원하는 사람들이 별로 안좋아함)
vue.js
프론트엔드엔드 엔진으로 데이터 바인딩이 핵심입니다.
MVVM(model view view model)이라고 해서 화면이 데이터인지 데이터가 화면인지 헷갈릴 정도의 신박한 설계가 되어있습니다.
(예를 들면 기존에는 데이터를 가져오고(get) 설정하고(set)의 과정을 해야했는데 get만하면 화면까지 다 반영됩니다)
기존 이런류 강자가 앵글러와 리액트인데 그 둘의 장점을 쏙 빼먹고 점유율이 상당히 올라가고 있다고 합니다.
무엇보다 학습커브가 낮고 레퍼런스 사이트가 잘되있습니다. (무려 한글)
부트스트랩과의 궁합이 좋은데 이유는 결합 프로젝트가 있기 때문입니다.
(물론 앵글러나 리액트도 부트스트랩 결합프로젝트가 있습니다.)
bootstrap-vue : bootstrap+vue
부트스트랩의 대부분의 콤포넌트를 vue 콤포넌트로 만들어 놨습니다.
jquery 없이는 도저히 못살 것 같았는데 잘 버티고 있습니다.
비교 대상: angular.js, react.js, 등
장점: 배우기 쉽다.
단점: 막상 해보면 어럽다.
준비해야할 것들은 무엇인가요?
os: 운영체제
대부분의 os가 지원됩니다. 라즈베리파이로도 시험해본적이 있습니다.
scale-out 을 지향합니다.(처음엔 작은 서버 하나 트래픽 증가시 복제서버 증가: micro service)
그래서 클라우드 서버들의 vm(virtual machine)을 이용해서 작업하는 것이 좋다고 봅니다.
(아마존 웹서비스:ec2, kt cloud등)
소스가 mac으로 작성되어 있어서 윈도우에서 약간의 문제가 있을 수 있습니다. 대부분 path 문제(unix: /aaa/bbb, window: \aaa\bbb)
현재는 mac으로 로컬 작업후 centos7에 배포하고 있습니다.
ide: 에디터
저는 webstorm을 사용합니다. 설정이나 코드 컴플리션(변수 뒤에 .등을 치면 멤버들이 나오는 정도)등이 최적화 되어있습니다.
하지만 월 $12는 부담일 수 있으니 적당한 것을 사용하면됩니다.(sublimetext, notepad++, atom, 등)
알아둬야 할 것들은 뭔가요?
몇가지 용어들을 알아두긴 해야합니다.
사전적인 의미는 검색하면 알 것이기 때문에 현재 상황에서의 의미만 적어봅니다.
back-end
서버측에서 하는 일들이라고 봐야 편합니다.
그중 징검다리 역활이 주 역활입니다.
클라이언트 요청 <> 백엔드 <> 디비
이후 줄여서 be라고 합니다.
front-end
클라이언트가 서버측으로 부터 받고 나서의 일입니다.
현재 프로젝트는 대부분 이런 로직으로 구현 되어 있습니다.
- 클라이언트가 서버에 요청
- 서버는 껍데기 html을 보냄
- 클라이언트는 받은 html 껍데기안의 자바스크립트로 서버에 ajax요청(매 버튼등의 이벤트 마다 반복)
- 서버는 api로 데이터를 보냄
- 클라이언트는 받은 데이터로 화면 표시가 변경
과거의 웹처름 단순 서버가 렌더링한 데이터 보내고 끝나는 것이 아닌 모던 웹에서는 받고나서 자체적으로 할일이 많아진 것 같습니다.
이후 줄여서 fe라고 합니다.
es6: javascript
이제 javascript는 매년 es2017,2018로 나온다고 했습니다. es6는 es5 이후의 javascript의 새로운 버전을 뜻합니다.
당연히 구형브라우저는 es6를 지원하지 않기 때문에 많은 개발자가 es5로 개발합니다.
하지만 걱정할 필요 없습니다. webpack이 es6로 작성된 코드를 es5로 변환해줄 것입니다.
그러니 es6가 불편하더라도 eslint(코드검사툴:es5로 작성이 안됨)에 걸리지 않게 어쩔 수 없이 신문물을 받아들여야합니다.
무엇을 만들 것인가요?
사실 목표가 제일 중요합니다.
목표를 이루다 보니 이것 저것 하다보니 저도 이런 것을 하고 있고요..
목표는 이프로젝트를 응용해서 상업적 이용을 할수 있을 만큼의 웹서비스입니다.
그러기 위해서는 점진적 목표가 필요합니다.
개발환경
무슨 프로젝트를 진행하던 개발환경은 진입장벽이라고 생각합니다.
node를 설치할때 같이 깔리는 npm(개발환경의 앱스토어 같은 것)이라는 존재가 있어서 많이 좋아졌습니다.
하지만 당연히 모를 땐 뭐든 어렵습니다.
api를 위한 준비
eg) 사용자가 http://xxx.com/abc/dde 라고 입력했을때 어떻게 처리해야하는 거에 대한 것입니다.
db연동과 화면
웹학습의 기본입니다.
디비 설계와 관계를 통해 어떻게 be,fe와 어떻게 소통할 지를 생각해야합니다.
게시판
웹학습의 꽃이라고 할 수 있습니다.
- db: 페이징 개념 강화
- be: api 개념 강화
- fe: table 개념 강화
게시판을 구글링 없이 혼자 구현이 가능해지면 이제 독립해도 되며..
사실 그 다음부터는 라이브러리 추가와 구현하는 시간과의 싸움만 남습니다.
현재 솔루션을 선정하기 전에 python flask, ruby on rails 로 게시판을 대충 만들어보긴 했습니다.
물론 구글링 없인 말도 안되죠..
인증
보안이 안된 웹은 실상 포트폴리오용 웹 정도 입니다.
아무나 볼 수 없게 만드는 것과 권한별 다른 행위,화면이 나오는 것은 중요합니다.
운영 및 배포
결국 목적은 서버, 즉 서비스이기 때문에 죽지 않으며 로컬에서 개발한 내용을 서버로 배포(deploy) 하는 방법이 필요합니다.
실제 운영중인 사이트의 방법을 공개합니다.
전체 소스
https://github.com/fkkmemi/nembv
시연 영상
회사 그룹 디비연동 예제
게시판 단일페이지 적용
게시판 댓글 적용
실제 테스트
만들어둔 id: aaaa, password: aaaa 로 아래 링크에서 시험해볼 수 있습니다.
피드백
기타 궁금한 사항은 fkkmemi@gmail.com으로 보내주시면 됩니다.
실제 강좌 진행중에는 경어체를 사용하지 않습니다.
수능 언어영억 반타작 했습니다. 노력은 하겠지만 맞춤법 많이 틀릴 수 있습니다.
직접 코딩하면서 바로 글 작성을 하기 때문에 정신 없으므로 구어체를 사용하니 양해 바랍니다.
커뮤니티 공개
클리앙 팁과강좌
댓글남기기