Node.js - 비밀 일기 사이트 plog

비밀일기 사이트 Plog 개발기!

 

Intro

안녕하세요 ;-)

 

정말정말 오랜만에 개발관련 포스팅을 끄적이는것 같습니다!

 

핑계 : 원래는 이번 방학을 이렇게 나태하게 보낼생각은 아니었지만 초반에 계절학기 수강하고 영어시험치루고 나니 웹개발은 시간투자를 잘 하지못했습니다.

 

이번 방학은 웹개발이 무엇인지 탐구해보고 전반적인 개념을 잡기 위해 Node.js로 많은 삽질을 해봤었습니다.

 

그런데 몇가지 토이프로젝트를 제외하고 결과물이 없는것 같아서 참 속상했습니다. 방학은 곧 끝나가고... 얼마 남지 않은 기간동안 초라하더라도 DB를 연동한 서비스를 만들어 보고싶었습니다.

 

그래서 기획하게 된 이번 프로젝트의 진행기간은 딱! 3일이었습니다(8/26~8/28)

 

어제와 그제는 9시간 오늘은 4시간정도 시간을 투자했던것같습니다. 사실 더 좋은 결과물도 차분하게 진행했다면 만들어낼수도 있었었을것 같지만 시간이 너무 없었습니다. 당장 내일부터 자격증시험준비를 해야했습니다.

 

어떻게 해서든 결과물 자체를 너무 만들어보고 싶다보니 욕심은 많았으나 실력은 부족했습니다.

 

그래도 개강을 일주일 앞둔 이틀이라는 시간동안 그동한 공부한 내용들도 복습하고 의미 있는 시간을 보낸것 같습니다.

 

 

 

비밀 일기 사이트?

처음에 구상했을때는 옛날 싸이월드 비밀글 감성으로 만들려고 했었습니다.

 

싸이월드 비밀글 처럼 본인만 볼수있도록 기록했다가 나중에 보고싶어하는 글이 누구나 있을것입니다. 저같은 경우는 쇠질을 참 좋아하는데 매일매일 운동 기록을 메모장에 적어두기도 합니다.

 

그래서 간단한 코멘트와 함께 사진을 첨부할수 있으면 좋겠다 생각했고 비밀글이다 보니 본인 게시물은 로그인한 본인만 볼수있도록하고 싶었습니다.

 

이름은 photo + log 합성어인 plog라고 지어보았는데 개발와중에 실제 이런 서비스가 존재 한다는것을 알아챘습니다. 물론 제가 만들고 있는것보다 훨씬 나은 서비스로 말입니다... 허허

 

그렇다고 하던거를 안할수도 없고 그냥 진행했습니다.

 

 

언어 & 개발툴)

 

노동요 : 빈지노 - I Don't Mind (가장중요!)

 

언어 : html, css, java script

 

DB : mongoDB

 

IDE : VScode

 

그 외 node.js, bootstrap

 

 

 

로그인)

 

 

 

가장먼저 로컬호스트로 접근하면 redirect를 통해 로그인 템플릿에 향해지도록 했습니다. 로그인 창에서는 회원가입페이지로 갈수 있는 링크와 아이디 비밀번호를 입력받을수 있는 input폼으로 구성했습니다.

 

 

 

 

 

회원가입)

 

 

회원가입시에는 사용자의 이름과 생년월일, 아이디와 패스워드를 받아 DB의 유저필드에 할당합니다. 유저필드는 plogUsers라는 이름으로 생성하였고 도큐먼트 형식은 아래와 같습니다. 회원가입 이후에는 다시 로그인 창으로 돌아갈수 있게 하였고 생성된 계정을통해 접속하면됩니다.

 

 

 

 

 

 

첫화면)

 

 

첫화면은 사이트에 대한 간략한 소개를 해주는 welcome 페이지가 출력되도록했습니다. 홈으로 버튼을 통해 유저별 글 목록으로 이동할수 있습니다.

 

글과 관련된 DB의 필드는 plogPostings라 이름을 지어주었고 도큐먼트형식은 아래와 같습니다.

 

 

 

 

 

 

홈화면, 리스트)

 

 

로그인이후 홈으로 버튼을 클릭하면 나오게 되는 첫화면은 위와 같습니다. 글쓰기 버튼을 통해 새로운 글을 등록하는 페이지로 넘어갈수 있고 등록형식의 나열을 눌러주면 사진과함께 출력되는 글 목록을 볼수있습니다. DB의 게시물 필드안에 있는 도큐먼트를 그대로 렌더링 하여 ejs 템플릿 엔진을 통해 출력할수 있도록 했습니다.

 

프론트의 테이블 양식은 갓트스트랩의 테이블 폼을 조회했을때 가장 깔끔한 것으로 선택했습니다.

 

 

 

 

 

홈화면, 나열)

 

 

글에 대한 정보를 등록하고 그와함께 <file>태그를 통해 express서버에 업로드한 사진파일을 같이 출력될수 있도록 한 나열 형식의 홈화면 입니다.

 

 

 

 

 

 

글 작성)

 

글을 작성하는 방법은 먼저 홈화면의 글쓰기 버튼을 통해 글쓰기 페이지로 이동하고 제목과 내용을 작성해 줍니다. 이후에는 다음 버튼을 통해 사진을 업로드 할수있는페이지로 이동하고 사진업로드 이후에는 저장 버튼을 통해 글작성을 마치게 됩니다.

 

사실 CRUD 기능중 이번 프로젝트에선 CR만 가능합니다... 글 삭제와 수정기능을 만들어보고싶었는데 시간이 없기도 하고 어려웠습니다. 다음 학기인 4학년 1학기에 정식적으로 웹프로그래밍의 다루는 수업이 있는데 대학강의를 수강하고 다시 도전해봐야 할것 같습니다.

 

그래서 저의 서비스에선 직접 DB에서 글에 대한 데이터를 지워야 목록에서 사라집니다. 허허... 다음에 다시 도전해보겠습니다.

 

 

 

 

 

 

다른 아이디를 통해 로그인 할 경우)

 

 

다른 유저인 test02로 로그인하게 된다면 비밀 게시판이기 때문에 본인이 올린 글만 DB에서 조회되어 출력되어야 할것입니다.

 

결과는 아래와 같습니다.

 

<다른이아디 리스트>

<다른 아이디 나열>

 

 

 

 

마치며)

 

길다면 길고 짧다면 짧았던 3학년 하계 방학기간이 얼마 남지 않았습니다.

 

호기롭게 시작했던 웹개발의 마무리가 그래도 눈에 보이는 결과물을 하나라도 만들었다는것에 조금이나마 뿌듯하다가도 처음에 계획했던것보다는 너무나도 초라한 결과에는 실망스럽습니다.

 

보통 웹 개발은 본인이 속한 국가에서 가장많이 사용하는 언어를 알아보고 그한가지를 고수하라 하지만 이번까지는 경험을 해보고싶었습니다. 근데 사용하면 할수록 자바스크립트는 제게 참 복잡한 언어입니다.

 

물론 이제부터 웹개발 연습을 할때는 Java를 사용할것 같습니다. 아마도 개발공부의 방향이 자바 웹 백엔드 개발과 알고리즘 문제 풀이쪽으로(취업에 유리한? 능력) 치중하게 될것 같습니다.

 

파이썬과 장고프레임워크를 통해 웹개발을 처음시작했을때는 너무 어렵다 생각했는데 지금은 오히려 파이썬 장고가 조금은 친숙했던것 같습니다.

 

앞으로 학기중에는 리눅스 관련 자격증과 sql관련 자격증을 취득하고 싶기때문에 이번과 같이 몇달만에 훅훅 끝내는 프로젝트는 당분간 없을 것같습니다.

 

하지만 하루에 2시간씩은 개발 공부를 하고싶기때문에 조금씩 작업물이 쌓이면 포스팅을 진행하도록 하겠습니다.