• 목록
  • 아래로
  • 위로
  • 0
  • YGL
  • 조회 수 162

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

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

 

 

 

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

 

 

 

- 머릿글 -

 

안녕하세요.

 

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

 

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

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

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

 

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

 

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

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

 

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

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

 

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

 

 

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

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

 

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

 

 

 

- 준비 -


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

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

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

 

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and...

다운 고

 

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

 

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

image.png.jpg 

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

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

 

 

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

 

 

Node.js® is a JavaScript runtime built on Chrome´s V8 JavaScript engine.

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

 

 

MySQL(MariaDB)도 필요합니다.

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

 

 

 

- Vue.js 문서 훑기 -

 

넘어가셔도 좋습니다.

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

 

Vue.js 한글 문서

 

Vue.js - 프로그레시브 자바스크립트 프레임워크

 

Vue.js 한글 문서입니다.

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

 

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

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

NUBE님 NUBE 포함 3명이 추천

댓글 0

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 시스템 업데이트 안내 4 마스터 마스터 21.04.12.01:55 114
공지 소셜로그인이 불가능 합니다. 3 마스터 마스터 21.01.02.14:14 418
269 0. 행의 분리 및 결합 / 멀티라인 문자열 image 이니스프리 이니스프리 21.04.18.11:53 124
268 [CSS] 웹폰트 선언하기 네모 네모 21.04.09.17:03 39
267 [Swift] ARM 맥에서 Cocoapods 사용하기 1 네모 네모 21.04.04.13:36 48
266 php의 숫자 연산자 image title: 인스타그램wikiowner 21.03.13.15:50 131
265 [미디어위키 번외] 제가 유지보수 중인 나무마크를 홍보(?)합니다. 10 image 도다 title: 은메달도다 21.03.11.01:23 145
264 [Selenium] proxy를 사용하지 않고 개발자도구에서 Network 탭의 로그를 얻기 image 이니스프리 이니스프리 21.03.06.23:35 245
263 [3] php의 문자열 출력하기 (줄바꾸기, echo, print 등등) 2 title: 인스타그램wikiowner 21.03.06.18:54 62
262 [2] php코드의 작성방법 3 title: 인스타그램wikiowner 21.03.06.14:53 52
261 [1] php 강의를 시작합니다 (OT) title: 인스타그램wikiowner 21.03.06.14:34 27
260 29. 생활 속의 진법이었츄 5 image 허니버터라이츄 title: 인스타그램허니버터라이.. 21.02.25.23:43 92
259 쿨에디트로 음원 만들기 ㅋ image 랩퍼투혼 랩퍼투혼 21.02.16.21:44 75
258 <iframe> 변환기 Convert iframe to object / YouTube 변환기 Convert YouTube iframe to old embed code 2 랩퍼투혼 랩퍼투혼 21.02.07.19:22 94
257 스포어 검색기 위치 image 랩퍼투혼 랩퍼투혼 21.02.06.22:36 64
256 텍스트큐브 설치해보자 image 랩퍼투혼 랩퍼투혼 21.02.03.06:41 47
255 [XE] [PWA] 내 사이트를 앱으로 만들어보자! 4 image YGL 21.02.02.22:39 173
254 워드프레스 설치 image 랩퍼투혼 랩퍼투혼 21.01.31.10:19 41
253 테크노트 사용해보자 image 랩퍼투혼 랩퍼투혼 21.01.30.20:43 53
252 라이믹스 설치해보자 2 image 랩퍼투혼 랩퍼투혼 21.01.27.17:56 88
251 그누보드 설치해보자 3 image 랩퍼투혼 랩퍼투혼 21.01.27.14:33 76
250 [Node.js로 홈페이지 만들기] Vue.js 설치 2 image YGL 20.12.18.22:07 191