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

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

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

 

 

 

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

 

 

 

- 머릿글 -

 

안녕하세요.

 

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 작성 방식과 약간의 차이가 있습니다.

OAUTH2님 포함 2명이 추천

추천인 2

댓글 0

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 서버 작업 안내 정정 1 image new 마스터 마스터 4시간 전11:22 17
공지 미션 시스템이 도입됩니다. 10 마스터 마스터 4일 전04:39 152
공지 [추가 작업 공지] 프록시 서버의 네트워크 시스템 점검 및 서버 업데이트 안내 3 마스터 마스터 21.01.20.03:54 340
공지 소셜로그인이 불가능 합니다. 3 마스터 마스터 21.01.02.14:14 270
공지 출석부 모듈에 오류가 있습니다. 6 마스터 마스터 20.07.13.14:14 3641
251 그누보드 설치해보자 imagenew 랩퍼투혼 랩퍼투혼 1시간 전14:33 1
250 [Node.js로 홈페이지 만들기] Vue.js 설치 1 image YGL 20.12.18.22:07 104
[Node.js로 홈페이지 만들기] 기초 image YGL 20.12.11.23:46 95
248 [Web development with Flask] 1. Introduction image title: NEW투명 시간버그 수정(오버플로우)OAUTH2 20.11.21.08:14 91
247 28. 탈리도마이드츄 1 image 허니버터라이츄 title: 인스타그램허니버터라이.. 20.09.20.02:37 201
246 [번외편 - 한컴한글] 스마트한 문서 작성을 위한 팁 (작성 중) 이니스프리 이니스프리 20.08.08.13:50 201
245 27. 멘델의 유전법칙이였츄 (부제: 파란 장미는 어떻게 교배해야 나오나요) 1 image 허니버터라이츄 title: 인스타그램허니버터라이.. 20.05.31.03:29 12222
244 26. Next generation sequencing이었츄 2 image 허니버터라이츄 title: 인스타그램허니버터라이.. 20.05.17.02:01 316
243 [Requests-HTML] Requests와 비교할 때의 장점! (네이버 뉴스 등 크롤링) 7 image 이니스프리 이니스프리 20.05.14.19:08 586
242 [생화학] 세포호흡 Part I (에너지 투자기) 2 image sweetenpotato sweetenpotato 20.04.10.01:24 471
241 ['Till Shutter Die] Chapter I. 카메라의 종류 12 image 협스 title: 포토샵협스 20.04.02.11:22 362
240 [샷투샷] 오티 3 image 협스 title: 포토샵협스 20.04.01.16:04 351
239 [XE] 관리자 권한을 보유한 경우에만 애드온 작동하도록 하기 2 네모 네모 20.03.23.16:08 516
238 [XE] 회원가입 시 사용자 IP를 설명란에 기록하기 3 네모 네모 20.03.23.16:08 447
237 [mod_rewrite] Apache2 의 mod_rewrite 사용 시 index~ 만 Rewrite가 되지 않을 경우 네모 네모 20.03.23.16:07 348
236 [jQuery] jQuery로 Checkbox 제어하기 1 네모 네모 20.03.23.16:06 452
235 22. [OpenPyXL] 엑셀 문서 저장하기 / 시트 추가하기 / 셀에 입력하기 14 image 이니스프리 이니스프리 20.02.02.00:46 1778
234 21. [OpenPyXL] 엑셀 문서를 열고 시트에서 셀의 값을 얻기 3 image 이니스프리 이니스프리 20.02.01.23:46 709
233 특별편-보건용 마스크란 2 image 허니버터라이츄 title: 인스타그램허니버터라이.. 20.01.30.00:14 844
232 [Java] 아무튼 대충 알아보는 NPE 예방법! 네모 네모 20.01.21.11:50 647