[프로젝트 후기]express로 만드는 개인 블로그

이ᄏᄋ·2021년 11월 20일
1

프로젝트 후기

목록 보기
2/3
post-thumbnail

깃허브 링크

🎆개인 블로그 제작 후기

기간: 2021.04~2021.07 약 3달

이건 내 nodejs 첫 입문작이라고 할 수 있다.

만들게 된 계기

2020년도 웹프로그래밍 시간에 nodejs 맛보기 수업을 들었었다.
스프링도 모르고 백엔드 프론트엔드 개념도 잘모르는 복전생 민기의 눈에
nodejs는 뭔가 비주류인데 주류느낌의 힙한 느낌을 주는 무언가였고
이걸 한 번 해봐야겠다는 생각이 들었다.
근데 프로젝트 기간이 정말 길다.
그 이유는 핑계지만 일단 내가 학교에서 다른 프로젝트들도 하기도 하였고.. 내가 삽질을 너무 많이하였었다..

근데 왜 지금 후기를 쓰냐고..?
그때의 나는 깃허브도 모르고 velog도 몰랐기 때문에 늦은 후기를 지금 쓴다.
네이버블로그에 그때 남겼던 글들이 있긴하다 .
네이버블로그

어쨋든 실질적인 웹프로그래밍의 첫 단추라고 할 수 있다.

🎆만드는 과정

nodejs 책사기> 하나하나 따라해보기 > 따라해본 것을 수정해서 구현해보기> 새로운 기능 구현해보기

🎆구현된 기능

소셜로그인
로컬로그인
게시판
채팅
이메일로 아이디 패스워드 찾기
web socket을 이용한 아바타 움직이기
로그생성
반응형 

처음에는 그냥 로그인 그리고 게시판 까지만 만들기로 했다.
그런데 나는 뭔가 자잘한 기능들을 추가하기시작했다.

🎆구현된 기능들 리뷰

1.소셜로그인

만들 당시에 정확히 이해하지 못하고 모듈의 힘을 빌린 것 같다.
지금은 처음 소셜로그인을 할 때 회원가입도 동시에 되는데
처음 소셜로그인 했을 때 db에 사용자정보를 확인하고 없다면
다시 로컬의 회원가입 폼으로 넘어와서 사용자정보를 받을 걸 그랬나 ...

2.로컬로그인

passport를 썼는데 그 당시에 한 3일정도 시행착오를 했던 것 같다.

3.게시판

게시판의 문제점은 큰 카테고리가 4개밖에 없고 수정하려면 코드로 직접 수정해야 한다는 것이다.
처음 생각했던 것이 저 카테고리 말고 다른 주제의 글을 안쓸 줄 알았다.
그런데 생각해보니 굳이 그럴 필요가 없었는데,왜 그런 생각을 했는지 모르겠다.
(근데 지금은 아예 저 블로그를 사용안함 이유는 후술.)

게시판 검색 화면

검색은 검색어로 검색하는 것과 세부주제별로 검색하는 것이 있다.
검색어로 검색하기는 말그대로 검색어를 입력하는 것이다.
세부주제별로 검색하기는
카테고리안에 각 태그(주제)가 차지하는 비중을 계산해서
많이 차지하는 태그는 크게 나타내고 적은 태그는 작게 표시 하는 식이다.

게시글 작성 화면


사실 처음에 에디터를 만들고 싶었는데 에디터 만드는 것은 많이 어려웠고
이것을 구현하기에 시간이 너무 오래걸릴 것 같아서 그냥 ckeditor을 사용하였다.

4.채팅


채팅기능은 내가 소켓프로그래밍을 좋아하기도 하고 ..
재밌을 것 같아서 넣은 기능이다.

이모티콘을 사용할 수 도 있다.

5.이메일로 비밀번호 찾기


지금은 server error가 뜨는데 그 이유는 메일을 보낼 때 사용되는
계정을 내가 지웠기 때문이다.
nodemailer을 사용했으며 정상적으로 보내졌다면

이렇게 온다.

6.web socket을 이용한 아바타 움직이기

영상과 과정

온라인 게임처럼 홈화면 위에서 아바타들이 움직이는 것을 구현했었다.

7.로그 생성

로그 생성은 코드에 문제가 있었다.
이것 때문에 나중에 aws 배포 했을 때 문제가 생겼었다.

app.use('/',logs.writeLog,pageRouter);
app.use('/index',logs.writeLog,indexRouter);
app.use('/auth',logs.writeLog,authRouter);
app.use('/post',logs.writeLog,postRouter);
app.use('/dotgallery',logs.writeLog,dotRouter);
app.use('/lab',logs.writeLog,labRouter);
app.use('/chat',chatRouter);
app.use("/villeage",villeage);

각 라우터에 가기전에 미들웨어로 log.js가 로그를 작성하는데,
aws에 배포했을 때 aws에서 health check로 몇 초마다 서버를 점검하면서 계속 파일 입출력이 실행되는데 내가 open해놓고 닫는 것을 깜빡해서 서버가 계속 뻗었었다.

8.반응형



모두 같은 위치의 화면이다. css 파일 세개를 작성해서 미디어쿼리로
화면에 맞는 css를 제공해서 반응형 웹을 만들었다.
그런데 지금 내가 프론트엔드 쪽을 좀 더 공부하면서 정말 비효율적이라는 생각이 든다... 그래도 그 당시 3개까지 만들 열정이 나에게 존재했다는 것에 박수를....

🎇배포과정

블로그를 다 만든 후 나는 사람들에게 보여주고 싶어졌다.
처음 내가 만들었던 jsp 프로젝트는 어차피 하루만 사용할 웹페이지 였기 때문에
내 컴퓨터를 그냥 하루동안 켰지만
이것은 계속 켜져있어야 되었기 때문에 나는 aws라는 것을 찾아보고
막무가내로 시도해보았다.

기억에 남는 힘들었던 점들은

1. github에 대한 이해

나는 그 때 github를 aws에 서버를 이식하기위해서 처음 사용하게 되었는데 (아마?) 명령어들이 헷갈리고 자잘한 사고를 치면서
삽질을 하였었다.

2. ubuntu 서버 세팅

이건 내가 그때의 서러움을 작성한 네이버 블로그 글이 있다.
ubuntu에 필요한 mysql과 mongodb를 깔고 기타 자잘한 세팅을 해야했는데 클라우드 컴퓨팅 초보였던 나는 무언가를 잘못 진행하였고 정말 구글링을 4시간 가량 하면서 삽질하였다.....

3. loadbalancer가 뭐야..? 그리고 왜 그걸 써야 https 통신을 할 수 있는거야...?

이건 지금와서는 다른 방법도 있어! 라고 내가 당당히 말해줄 수 있지만
그때는 내가 막무가내로 진행하였기 때문에(원리를 깨닫기보다)
매우 많은 삽질을 하였다.
그 때 나는 대략적으로 loadbalancer가 트래픽을 관리해주는 것이라고
알고 있었다. 그런데 aws https를 검색해보니 elastic load balancer에서 http로 오는 트래픽을 https 로 돌리는 식으로 해야 한다고 나와있었다. 그 때부터 나는 혼란이 시작되었고 무수한 삽질을 시작했다. 왜 안되는지 정확히 모르는 상태에서 route53을 사용하여 추가 과금을 하고 지금은 기억이 잘안나지만(아마 aws에서 인증서를 받아서 추가 과금을 하게된 것 같다.무료 인증서가 있었는데..) 무언가를 또 과금해서 loadbalancer 를 이용한( 과금을 추가로 해서 쉽게 성공한 것 같지만 이 과정도 하루정도 삽질과 함께 성공...) https 통신도 성공하였다.

무엇을 남겼나

매우 무수한 삽질의 연속이었지만
나름대로 내가 디자인한 (내가 만족하는) ui들을 보고 잘 작동하는 기능들을 보면서 정말 기뻤다. 이 프로젝트를 진행하면서 너무 피곤해서 살이 5키로 정도 빠졌었고 탈모도 잠깐 생기고 잇몸에 피도 났었지만 그래도 재미있었다.

아쉬운 것은 코드가 너무 지저분하고 구조적으로 수정해야 할 부분이 정말 많다. 만약 나랑 같이 프로젝트를 진행하는 사람이 이렇게 코드를 짰다면 죽탱이를 한대 때려주고 싶을 것이다.
그리고 js를 너무 js처럼 사용하지 않았다. map이라던가 reduce 같은 함수를 거의 안사용하였다. (변명하자면 자바랑 c언어만 썼던 내게 js자체도 너무 생소했다..)

그리고 한가지 아쉬운 것 더 말하자면 지금 서비스하고 있지 않다는 것이다.
서버 비용이 너무 많이 나가기도 하고 계속해서 프로젝트를 관리하기에 내가 너무 피곤함을 느꼈었다.
.
.
.
사실 내가 글을 잘 안쓰는 사람이었다.... 그리고 글을 써도 보는 사람이 없었다. SEO최적화가 안되어 있어서 내 글이 포탈에 안나오고 내가 사람들이 볼만큼 양질의 글을 작성하지도 못하였다. 그래서 그냥 aws 인스턴스를 삭제하였다. 정말 아쉬운 부분이다.
만약 다시 만들게 된다면 백엔드 서버를 이 블로그 서버를 살리는 방향으로 유지하고 프론트엔드를 따로 만들어서 연결하는 식으로 할 것 같다.

그때는 좀 더 깔끔하고 좋은 코드를 작성해야지.

다음은 그 때 사용했던 그림들이다 . 다 내가 그렸고 사용하고 싶으면
사용해도 됨.대신 댓글만 남겨주세요.

profile
미쳤다.

0개의 댓글