하프타임

온라인 쇼핑몰을 만들다

선한 부자-이현주 2023. 4. 8. 20:07

웹 디자이너 과정을 마치고 다음 단계로 Web Developer 수업을 들었다. 6주 동안 JavaScript, NodeJS 서버 구축, 그리고 ReactJS와 VueJS을 사용해 Single Page Application을 제작하는 것을 배웠다. 6주 강의를 듣고 2주 동안 프로젝트를 진행했다. 프로젝트로 수제 도자기를 파는 온라인 쇼핑몰을 만들었다.

 

웹사이트 테스트 마쳤고, 내가 만든 NodeJS 서버와 연동돼서 잘 작동한다. 이 온라인 쇼핑몰은 올 가을에 귀국해서 언니와 함께 놀 놀이터다. 영업 전이라 현재 서버는 꺼놓은 상태다. 그래서 웹페이지는 볼 수 없다. 이 놀이터에서 언니는 도자기를 굽고, 나는 쇼핑몰을 제작 관리하며 판매하려 한다. 서로 좋아하는 것, 잘 하는 것을 하면서 수입까지 생기면 이거야말로 꿩 먹고 알 먹고, 도랑 치고 가재 잡는 격이다. 가을아, 어서 오려무나~

 

웹 디자이너 두 달 과정을 마치며 만들었던 내 홈페이지는 일방통행이다. 보여주는 기능만 한다. JavaScript 프로그래밍 없이도 해낼 수 있는 작업이다. HTML & CSS 지식만 있으면 웬만한 웹사이트 하나 뚝딱 만들 수 있다. 하지만 회원 관리하고 주문받으려면 데이터베이스 구축하고 서버 만들어 놓아야 한다. PHP 프로그램이면 서버를 굳이 만들지 않아도 된다는데, 이건 내가 모르는 부분이니 패스~ (참고로, Web Developer 수업의 강사는 PHP 프로그램보다는 NodeJS 서버를 직접 구축해서 관리할 것을 권했다).

 

쇼핑몰의 웹페이지와 NodeJS 서버를 만들어 localhost 에서 테스트했더니 잘 작동했다. 다음 단계는, 내가 만든 서버를 호스팅해주는 곳을 찾아서 세상에 내놓는 일이었다. 두어 달 전에 만든 내 홈페이지는 한 독일 회사의 무료 호스팅 서비스를 이용하고 있다. 하지만 NodeJS 서버와 연동되는 웹 호스팅은 유료다. 저렴한 다른 웹 호스팅 업체를 찾아야 했다. 나는 cafe24.com이 제공하는 매달 500원짜리 서비스 'node.js 호스팅 절약형'을 신청했다.

 

cafe24를 통해 NodeJS 호스팅하는 방법은 cafe24의 안내서와  [JS]Cafe24에 NodeJS 애플리케이션 배포하기 그리고  cafe24 node.js 호스팅을 참조했다. git repository로 코드를 성공적으로 업로드했지만 'Cannot GET' 에러가 떴다. root에 위치한 public 폴더 안에 index.html를 넣어놨는데, 이걸 찾지 못해 생긴 문제였다. 

web.js
// express server
const express = require('express');
const expressServer = express();
expressServer.use(express.static('public', {extensions: ['html']})); // 파일 경로 설정에 문제가 있는 코드

아래와 같이 __dirname 키워드를 이용해, 실행 시 현재 파일명과 파일 경로에 대한 정보를 제공했더니 드디어 웹페이지가 보였다. 

expressServer.use(express.static(__dirname + '/public', {extensions: ['html']})); // 해결

 

쇼핑몰의 주문 메일은 nodemailer 모듈을 사용해서 발송하고, 데이터베이스 처리를 위해서는 mysql2 모듈을 사용하고 있다. 

 

4개월간의 웹디자인과 웹 개발 수업이 3월 말에 끝났다. 결과물로 내 개인 홈페이지와 온라인 쇼핑몰을 만들었다. 웹 개발 지식이 내 은퇴 후의 삶에 어떤 역할을 할지 모른다. 분명한 것은, 준비하지 않으면 기회도 없다.

 

JavaScript는 이번에 처음으로 사용해봤다. 배우는 데 어렵지 않았다. 참 별 언어가 다 있네, 싶었다. 엄격한 데이터 타입 체크 언어들만 다루다가 만난 JavaScript는 은근히 불편했다. 그래도 두 달 배워 쇼핑몰과 웹서버를 만들 수 있는 걸로 봐서 JavaScript는 장점이 많은 언어인 듯싶다. 2023년 4월 현재, JavaScript는 일곱 번째로 많이 쓰이는 개발언어다(https://www.tiobe.com/tiobe-index/).

 

놀이터 만들어 놨으니, 이제 놀 일만 남았다.

ⓒ 2023. 이현주