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

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

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

 

 

 

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

 

 

 

- 머릿글 -

 

안녕하세요.

 

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

이니스프리님 이니스프리 포함 3명이 추천

추천인 3

댓글 0

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 마스터 24.02.11.17:21 382
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 마스터 23.01.14.02:23 4066
157 0. 프롤로그츄 14 image 국내산라이츄 국내산라이츄 17.10.24.23:04 900
156 서버 선택하기 - (1) 6 image NoYeah NoYeah 17.10.24.23:26 2563
155 1. 대자연 탐구생활이츄 12 image 국내산라이츄 국내산라이츄 17.10.26.17:45 819
154 서버 선택하기 - (2) 7 image NoYeah NoYeah 17.10.26.23:15 1392
153 [1강]안드로이드와 어플리케이션 구조 9 image Ciel Ciel 17.10.28.00:24 876
152 본격적으로 서버 구축하기 - 인트로 9 NoYeah NoYeah 17.10.29.00:58 1760
151 2. 제한효소츄 12 image 국내산라이츄 국내산라이츄 17.10.30.11:26 828
150 관리자 계정 활성화하기 3 image NoYeah NoYeah 17.10.30.23:15 1472
149 [Tip or 강좌] 카카오톡 미리보기 없애는 방법 10 image humit title: 황금 서버 (30일)humit 17.11.01.13:36 4481
148 웹서버 IIS 설치하기 4 image NoYeah NoYeah 17.11.01.22:43 1842
147 SSH 암호 없이 로그인 하기 4 image NoYeah NoYeah 17.11.02.02:02 8743
146 3. PCR이츄 4 image 국내산라이츄 국내산라이츄 17.11.03.11:25 886
145 IIS10에서 PHP 설치하기 image NoYeah NoYeah 17.11.04.02:33 2383
144 사이트 미러링 스크립트. 7 file NoYeah NoYeah 17.11.06.00:19 1168
143 4. 전기영동이었츄 18 image 국내산라이츄 국내산라이츄 17.11.06.12:04 1151
142 [1-1강]안드로이드 스튜디오 설치하기 9 image Ciel Ciel 17.11.08.20:13 1119
141 5. 센트럴 도그마와 4대 블로팅이었츄 4 image 국내산라이츄 국내산라이츄 17.11.09.12:15 925
140 IIS에서 MySQL 5.7 설치하기 14 image NoYeah NoYeah 17.11.09.23:14 1126
139 IIS 에서 PHP 설정하기 image NoYeah NoYeah 17.11.14.01:09 2098
138 6. 과학자들의 빵터지는 네이밍 센스에 대해 알아보겠츄 6 image 국내산라이츄 국내산라이츄 17.11.14.12:30 924