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

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

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

 

 

 

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

 

 

 

- 머릿글 -

 

안녕하세요.

 

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

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 시스템 점검 작업 완료 안내 10 마스터 마스터 24.09.05.16:25 3147
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 마스터 23.01.14.02:23 10598
299 48. CAS번호에 대해 알아보시츄 1 image 국내산라이츄 국내산라이츄 24.07.08.22:49 719
298 47. 수소결합에 대해 알아보시츄 image 국내산라이츄 국내산라이츄 24.05.15.23:11 988
297 46. 유클리드 호제법에 대해 알아보시츄 image 국내산라이츄 국내산라이츄 24.02.12.01:20 923
296 [디지털포렌식전문가] 제21회 필기시험 합격 후기 9 image 이니스프리 이니스프리 23.10.29.16:11 3136
295 45. blue white screening에 대해 알아보시츄 image 국내산라이츄 국내산라이츄 23.06.11.22:40 3291
294 44. 지수와 로그츄 3 image 국내산라이츄 국내산라이츄 23.05.06.22:27 1734
293 특별편: 도덕책 자가검진키트의 원리는 무엇인가... image 국내산라이츄 국내산라이츄 23.04.29.00:30 2500
292 43. 산화와 환원에 대해 알아보시츄 1 image 국내산라이츄 국내산라이츄 23.04.25.00:36 829
291 42. 명제에 대해 알아보시츄 6 image 국내산라이츄 국내산라이츄 23.01.26.04:08 11854
290 41. 볼티모어 분류에 대해 알아보시츄 image 국내산라이츄 국내산라이츄 22.10.23.00:30 12264
289 안녕하세요. 1 poiega 22.10.19.21:40 473
288 40. SI 접두어에 대해 알아보시츄 (+IUPAC 접두어) 2 image 국내산라이츄 국내산라이츄 22.10.10.00:11 1898
287 39. 불 대수와 논리게이트에 대해 알아보시츄 image 국내산라이츄 국내산라이츄 22.09.26.02:18 1793
286 [Python] GIF 파일에 프로그레스바 삽입하기! (Adding progress bar into GIF) image 이니스프리 이니스프리 22.05.14.13:14 13037
285 38. 감마퐝숀이었츄 1 image 국내산라이츄 국내산라이츄 22.04.25.23:41 4192
284 [node.js] 자바스크립트에서 변수와 상수 선언해보기 1 wikiowner 22.02.25.18:57 8633
283 [node.js] 자바스크립트에서 hello World! 출력하기! wikiowner 22.02.25.18:46 7041
282 특별편: 저세상 코드 등⭐장 image 국내산라이츄 국내산라이츄 22.01.14.17:07 6695
281 37. VCF file image 국내산라이츄 국내산라이츄 22.01.06.14:56 7680
280 36. Bradford assay였츄 4 image 국내산라이츄 국내산라이츄 21.12.28.12:12 2670