[Node.js로 홈페이지 만들기] 기초

기존에 작성했던 글이 있었으나..

처음부터 다시 작성하도록 하겠습니다.

 

 

 

************************

 

 

 

- 머릿글 -

 

안녕하세요.

 

Node.js를 이용한 홈페이지 만들기 강좌를 올려보려고 합니다.

 

XE, 그누보드 등 오픈소스를 이용하여 홈페이지를 만들어보신 경험은 많이들 있으실겁니다.

간단한 검색만으로도 홈페이지 구축이 가능하고,

손쉽게 애드온, 모듈, 플러그인, 레이아웃을 설치할 수 있어 개발지식이 없는 분도 손쉽게 설치가 가능하니까요.

 

그렇다보니 게시판? 회원? 이러한 기능들이 너무나 기본적이고 쉽게만 보여질 수 있습니다.

 

이 강좌는 그러한 게시판과 회원 등의 기능을 직접 구현해보는 강좌입니다.

회원, 게시판이 어떻게 동작하는가에 대해 이해하고 어떤식으로 연결이 되는지 알아보는 시간이 될 것 같습니다.

 

스포어 회원님들은 PHP 개발자분들이 많으신 것 같으나(그냥 제 추측..)

그냥 재미로, 혹은 Node.js에 관심이 있으시거나 배워보고 싶으신 분들도 보시면 좋을 것 같습니다.

 

이 강좌에서 만드는 내용은 고급 개발자가 아닌 아마추어의 소스로, 실 운영 용도로는 부적합 할 수 있습니다.

 

 

앞으로 만들어질 홈페이지는 백엔드 서버와 프론트엔드 서버가 분리되어 있습니다.

백엔드 서버는 Express.js로 MySQL과 소통하여 데이터를 관리하는 API 통신 용도로 사용되며, 프론트엔드 서버는 Vue.js로 구성될 예정입니다.

 

(만약 추후 반응이 좋다면.. 홈페이지 만들기가 끝난 이후 node.js를 이용한 안드로이드 어플 제작, Windows 프로그램 제작 등 강좌글도 생각하고 있습니다.)

 

 

 

- 준비 -

강좌 작성중 이용할 에디터는 MS사의 VSCode(Visual Studio Code)입니다.

필수 설치사항은 아니며, 이미 기존에 사용하시던 익숙한 에디터가 있다면 그 에디터를 사용하셔도 됩니다.

다만 vue.js 템플릿 작성에도 편리하고, 콘솔이 에디터 내에 붙어있어 node.js 개발시 상당히 편리하게 이용 가능하니 설치를 권장드립니다.

 

다운 고

 

VSCode를 다운받으셨다면, 우리가 사용할 Vue.js의 .vue 확장자 파일을 예쁘게 보여주는 확장도구를 설치하시는게 좋습니다.

 

VSCode를 열어 Ctrl+Shift+X 키를 누르시거나,

 

좌측 패널의 이런 아이콘을 눌러 확장도구 메뉴를 열어 Vetur를 설치해주도록 합시다.

(검색해보시면 같은 이름의 두가지 확장프로그램이 검색될텐데, Pine Wu의 프로그램을 설치하도록 합니다.)

 

 

우리는 로컬에서 Node.js를 개발하여 배포하는 것을 목표로 하기 때문에, Node.js도 설치해야 합니다.

 

 

신뢰도 높은 안정적인 버전을 설치해주시면 됩니다.

 

 

MySQL(MariaDB)도 필요합니다.

윈도우 로컬에 mysql 서버를 직접 설치하셔도 되고, 호스팅 받으신 데이터베이스가 있다면 그걸 사용하셔도 좋습니다.

 

 

 

- Vue.js 문서 훑기 -

 

넘어가셔도 좋습니다.

하지만 알고 따라하시면 더 좋습니다.

 

Vue.js 한글 문서

 

 

Vue.js 한글 문서입니다.

정독하실 필요는 없으나, 앞으로 작성하실 코드가 어떤 구조로 짜여질지 대충 봐두시면 좋을 것 같습니다.

 

기본적인 HTML, CSS, Javascript에 대한 이해도가 있으시다면 금방 익숙해지실 수 있을거라 생각됩니다.

기존의 HTML, Javascript 작성 방식과 약간의 차이가 있습니다.