운쿠 회고 - Vue, Nodejs로 만들어본 작은 쿠팡 파트너스 사이트

해당 사이트는 서비스를 종료하여, 사이트에 접속할 수 없습니다.

운쿠 로고

1달간 작은 쿠팡 파트너스 사이트인 '운쿠'를 만들고 간단한 소개와 회고를 적어보려고 합니다.

회고 적는 것은 사실상 처음이라서 부족한 글이지만, 한번 적어보았습니다.

 

 

 

운쿠!

운쿠 사이트 홈페이지

앞으로 제 역할을 할지 의문인 사이트지만, Vue와 Nodejs를 공부하는데 의미를 둔 사이트입니다.

들어가면 쿠팡 파트너스 링크로 가득 찬 게시글밖에 없지만, 그 게시글도 정말 내용이 성의가 없습니다. ㅎㅎ

 

http://wooncou.com/

운쿠 :: 추천 & 가이드 & 팁 컬렉션

 

 

 

주제

nodejs와 Vue.js

사이드 프로젝트로 그동안 배우고 싶었던 것을 이용하여 수익을 얻을 수 있는 작은 무언가를 만들어보고 싶었습니다.

첫 번째로 배우고 싶었던 기술은 nodejs와 vue입니다. 최근 자바스크립트에 관심이 많아졌습니다. 자바스크립트 지식이 회사에서 필요해서 노마드코더의 기본 자바스크립트 강의를 봤습니다. 강의를 듣고 자바스크립트가 제 취향에 맞다는 것을 알았습니다.

 

쿠팡 파트너스

두 번째로 가볍게 만들 수 있는 연습용 주제를 정했습니다. 제 프로젝트가 하기 나름대로 수익이 생기면 좋을 것 같다는 생각이 들었습니다. 그래서 눈여겨보던 ‘쿠팡 파트너스’를 이용해 보기로 했습니다.

 

 

쿠팡 파트너스

쿠팡 파트너스

쿠팡 파트너스란

쿠팡 파트너스는 자신이 직접 운영하는 사이트를 쿠팡에 인증 받고, 그 사이트에서 쿠팡 상품을 홍보하여 판매가 이루어지면 판매 가격의 3%를 수익 받는 광고 플랫폼입니다.

정말로 개꿀 수익모델이 아닐 수 없지만, 최근에 이런 수익구조를 무차별적으로 여러 플랫폼에 도배하는 악성 유저들이 늘어나 네이버, 티스토리 등에서 쿠팡 파트너스 활동을 하면 저품질 블로그로 분류되곤 합니다.

왜 쿠팡 파트너스인가

저도 이 쿠팡 파트너스 활동을 하고 싶었습니다. 하지만, 지금 잘 키우고 있는 블로그를 저품질 블로그로 만들기 싫었습니다. 그리고 다른 블로그를 운영해도 그 블로그가 저품질 블로그로 되는 것도 문제였습니다. 공들여서 글 쓰고 있는데, 저품질 분류당해버리면 억울하니까요...

그래서 이번에 새로 제 사이트를 만드는데 아예 쿠팡 파트너스 전용 사이트로 만들어보면 연습용으로 딱 좋겠다고 생각했습니다.

 

 

 

사용기술

Backend

nodejs

nodejs 기반 express를 사용하고 인증은 jwt와 쿠팡 상품 크롤링을 위해 cheerio를 사용했습니다.

기본 쿠팡 파트너스 API를 통해 데이터를 받아오기에 데이터가 부실해서 좀 더 많은 데이터를 얻기 위해 크롤링을 사용했습니다.

• nodejs
  • express
  • jwt
  • axios
  • bcrypt
  • cheerio

 

DB

MongoDB

 

• mongoDB
  • mongoose

Frontend

• vue3
  • vuex
  • vue router
  • bootstrap
  • quill-editor
  • sweetalert2

 

 

개발 & 배포 환경

visual studio code 와 AWS Lightsail

• visual studio code
• aws lightsail

 

aws Lightsail

https://lightsail.aws.amazon.com/ls/docs/ko_kr/articles/what-is-amazon-lightsail

Amazon Lightsail란 무엇입니까? | Lightsail 문서

EC2는 12개월 프리티어가 있지만, 이 프리티어는 사용량을 오버하거나 12개월이 넘어가면 그 이후로 가격 폭탄을 맞습니다.

저는 매우 작고 커여운 웹 사이트를 배포하는데 많은 돈도 내기 싫었습니다.

그래서 cafe24를 써야 하나 아니면 heroku를 써야 하나 고민은 많이 했습니다.

아니, 이런 작고 커여운 웹 어플을 배포하는데 이렇게 많은 돈을 내야 한다고?
그래서 나왔다! aws Lightsaillllllllllllllllllllllllllllllllllllllllllllllllllllllllllll!!

lightsail은 진짜 작은 EC2 같은 느낌이었습니다. 하지만 세팅도 편하고 가격도 쌉니다.

가격은 첫 사용자 3개월 무료에 월 3.5달러였습니다.

Lightsail을 소개해줘서 감사합니다. https://uminoh.tistory.com/

 

 

 

개발 스토리

초기 공부

https://www.inflearn.com/course/따라하며-배우는-노드-리액트-기본

[무료] 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 - 인프런 | 강의

nodejs는 인프런의 강의를 보고 공부를 했습니다. 처음에 react + nodejs를 공부하려고 했으나, react는 제 입장에서 너무 복잡했습니다. 좋은 프레임워크지만 벽돌집 지을 때 좋은 느낌? 저는 그저 움집 같은 작은 집만 필요했을 뿐이었습니다.

위의 강의를 보면서 mongo DB는 덤으로 배웠습니다. mongo DB는 연습용 작은 프로젝트에 사용하기 매우 좋았습니다. mongoose도 크게 어렵지 않고 배우기 쉽고 라이트 해서 제 취향이었습니다.

 

 

https://codingapple.com/course/vue-js/

인스타그램을 만들며 배워보는 Vue.js 3 완벽 가이드 - 코딩애플 온라인 강좌

그래서 React를 포기하고 Vue를 공부했습니다. Vue는 코딩애플의 찰진 Vue 강의를 들으면서 공부했습니다. 딱 한 달 동안 일 다니면서 퇴근하고 1~2시간 챙겨봤습니다. 그렇게 SPA의 세계에 대해 알아갔습니다.

 

 

개발 구조

‘노드 리엑트 기본 강의’에서 클라이언트 서버와 API 서버를 분리하여 개발했었습니다. 그 방식 그대로 React를 Vue로만 변경하여 프로젝트를 진행했습니다.

클라이언트 서버가 API 서버에 요청을 보내면, API 서버가 mongo DB나 쿠팡 API 서버에서 데이터를 받아 처리하여 응답하는 방식이었습니다.

 

 

 

만들긴 만들었는데..

우여곡절 끝에 1달 만에 운쿠 개발을 완료했습니다. 하지만 정작 중요한 일이 있었습니다. 만들고 보니 SPA는 SEO에 적합하지 않았습니다. Vue-Router를 사용하긴 했는데, SEO 친화적으로 만들려면 SSR로 만드는 게 좋을 것 같습니다.

이번 기회로 한 가지 알게 되어 좋은 공부가 되었다고 생각합니다.

 

어떻게든 나오게 만들긴 했다.

열심히 웹사이트 최적화하고, 검색엔진에 sitemap 잘 제출해서 웹 크롤러가 인덱스 잘 만들 수 있도록 노력해봐야 할 것 같습니다.

 

 

 

앞으로 할 일

포스트 수를 늘리자

운쿠는 일단 포스트 수를 많이 늘려야 할 것 같습니다.

포스트 수가 많아지면, 그만큼 검색엔진에서 크롤링할 페이지도 많아지고, 사이트의 가치도 올라 상위로 띄워주고 합니다. 그래서 포스트의 품질도 조금씩 올리면서 앞으로 저의 노하우를 만들어봐야 할 것 같습니다.

 

크롤링을 고도화

보여주진 않았지만, 어드민 페이지에서 쿠팡 파트너스의 데이터를 이용해 크롤링해서 게시물을 자동으로 생성하는 기능이 있습니다. 하지만, 쿠팡에서 cheerio를 이용한 크롤링은 기본적으로 잘 막아놔서 현재 이 기능이 무용지물입니다.

크롤링을 고도화해서 포스팅도 자동화하여 포스팅 시간을 줄이는 작업이 필요할 것 같습니다.

 

sitemap 자동 생성

기본적으로 sitemap을 만들어주는 애플리케이션들이 많이 있습니다. 하지만, 이러한 애플리케이션들이 SPA의 sitemap을 잘 만들어주지 않습니다.

그래서 이 부분은 제가 직접 만들어야겠다 생각합니다. 현재 수작업으로 만들고 있지만 앞으로 자동으로 만들 수 있도록 내부적으로 개발해볼 예정입니다.