[토이프로젝트] TimeLine 개선

IT 지식/IT 지식|2020. 6. 14. 19:58

한동안 잠시 멈췄다가 다시 열면서 내용을 추가 하고 싶었다.

 

타임라인의 목적은 개발에 관련 블로그 내용들과 채용 뉴스등을 한번에 보기 위해서 만든 서비스이다.

사실 내가 한번에 보고 싶은 욕구가 있어서 만들게 되었다.

 

그런데 채용이나 회사 블로그 뉴스등은 넣었는데 

개인 블로그를 볼 수 있는 기능이 없어서 불편했는데 추가했다.

 

개인블로그 추가

 

 

그리고 메인 화면이 없어서 첫 화면을 설정하기가 애매했다.

그래서 메인화면도 summary해서 볼 수 있도록 추가했다.

 

메인화면

 

 

추가하면서 잘못된 @Transaction 어노테이션 사용으로 문제가 많았었다.

에러내용은 아래와 같다.

 

 

org.hibernate.AssertionFailure: null id in entry (don't flush the Session after an exception occurs)

애를 해결하기 위해서 구글링을 했고 구글링 결과 AssertionFailure가 발생하기 전에 세션 예외가 발생했었다는걸 알 수 있었다. 그래서 잘못 사용한 트랜잭션 애노테이션을 제거하고 중간에 exception이 발생하는 부분을 찾아냈다. 

 

참고 사이트

https://stackoverflow.com/questions/10855542/org-hibernate-assertionfailure-null-id-in-entry-dont-flush-the-session-after

 

org.hibernate.AssertionFailure: null id in entry (don't flush the Session after an exception occurs)

I have a hibernate and JSF2 application going to the deployment server and suddenly throwing an org.hibernate.AssertionFailure: null id in exception. I will provide the stack trace and code immedia...

stackoverflow.com

 

회사에서 주 업무가 Elasticsearch 위주로 하다보니 rdb에 대한 경험이 많이 부족해지고 있어서 사실 아쉽다. 

그 아쉬움을 달래고 싶어 개인 프로젝트를 통해 경험해 보고 있는데 아직 아쉬움이 크긴 하다.

 

 

더 좋은 방안이 있겠지? ㅋㅋ

 

개선된 내용이 보고싶다면 http://wedul.space에서 확인 가능하다.

 

Timeline

취업, 기술, 뉴스 일간지 Timeline

wedul.space

 

댓글()

[토이프로젝트] TimeLine 2.0 개선 오픈

IT 지식/기타지식|2020. 1. 27. 21:41

설계, 운영 모든면에서 실패

토이프로젝트 TimeLine을 만들어서 오픈했었다. 

개발의 목표는 단순하게 개발 블로그, 채용등에 대해 한번에 볼 수 있는 개발자를 위한 통합 페이지를 만드는 것이었다.

https://wedul.site/626

[토이 프로젝트 소개] 개발자 채용, 기술 블로그 정보를 모아주는 TimeLine

혼자 공부를 집에서 어떻게 하면 효율적일까 고민을 많이했다. 집에서 주구장창 책을 읽고 해보면 스킬이 늘까? 그렇게 해봤지만 그게 정답은 아니었다. 남들에게는 모르겠으나 나에게는 아니었다. 회사에서 하는..

wedul.site

하지만 사용하는데 생각보다 불편한 부분이 많았고 설계부분에도 현재 시스템을 고려하지 않고 만들었던게 운영에 걸림돌이 되어버렸다. 그래서 서비스를 잠정적 중단하고 2.0을 만들어서 오픈하기로 했다.

 

 

설계 실패 요인

실패 요인 1.

- 젠킨스를 실행시키면 별도의 관리포인트가 생길것으로 우려해 batch application을 계속 실행시켰던 부분이 큰 문제였다. 내 서버는 배치, db, api모두 하나의 서버에서 돌아가는데 4기가라는 부족한 메모리 상황에서 불필요한 batch application을 실행시켜서 다른 애플리케이션에서 메모리가 많이 부족하게 만들었다. 그래서 젠킨스를 작은 메모리를 할당하여 실행시키고 batch job을 세분화하여 batch application이 계속 실행되지 않게 하였다.

 

 

 

각 모듈을 build하는 jenkins job
rss, 스크래핑 등을 진행하는 indexing job
현재 api를 교체하는 job

 

 

 

실패요인 2.

실패요인1과 같이 시스템의 리소스가 많이 부족한 상황에서 api에 호출이 늘어나면 부하가 걸렸다. 그래서 이를 조금이라도 줄여보기 위해서 api에 비동기를 붙이기로 했다. 하지만 사용하고 있는 rdb에서는 비동기가 지원을 하고 있지 않은 상황에서 어떻게 해야하지 고민했는데 마침 r2dbc mysql이 정식 release했다. 굿굿 그래서 이를 사용해서 적용했다. 실제로 드라마틱하게 api 성능이 오른건 아니지만 그래도 확실히 속도가 더 빨라졌다.

 

실패요인 3.

욕심이 생겨 batch에서 긁은 데이터를 writer를 통해 업데이트 하는게 아니라 별도 kafka에 메시지를 보내서 별도 모듈에서 업데이트를 했다. ㅋㅋ 결국 그 욕심이 적은 리소스에 또 문제를 일으켰고 애플케이션이 메모리부족으로 많이 죽었다 에휴 작은 환경에서 무리한 오버스펙은 오히려 문제를 야기한다는걸 더욱 느끼게 되었다. (심지어 필요없는 레디스도 실행시켰다.)

 

실패요인 4.

UI구성을 router, component 구분없이 하나의 컴포넌트에 구분없이 추가하여 확장성 고려도 path구분도 되지 않는 상황이었다. 이를 해결하지 못해서 결국 기능추가도 공유하기도 어려웠다. 그래서 router를 추가하고 페이지를 만들고 각 page에서 사용할 공통 component를 만들어서 편하게 가져다 쓸 수 있도록 구성했다. 그 결과 이제 페이지 하나 늘려서 컴포넌트를 추가하고 빼는건 일도 아니게 되었다. 그리고 하단의 footer를 없애고 vue-sidebar-menu 라이브러리를 사용하여 보는 페이지 뷰를 늘려주었다. 

 

 

변경된 UI

기존의 UI에는 몇 가지 문제가 있었다. 

 

UI 문제 1.

데이터를 보여주는 영역은 가지고 온 제목, 로고, 데이터등을 다 보여주는데 데이터 유형이 모두 달라서 같은 유형으로 보여주기 어려웠다. 채용의 경우 큰 문제가 되지 않았지만 개발 블로그 경우에는 컨텐츠 표시 형식이 모두 달라서 보여주는 영역마다 다 깨졌다. 그래서 채용은 기존틀을 유지하고 테크는 타이틀과 컨텐츠 대표 이미지를 사용해서 리스트를 모여줬다.

좌, 테크 (기술블로그) 영역 리스팅

 

UI 문제 2.

결국 모든 데이터를 아웃링크로 보내다보니 트래픽이 많이 빠졌다. 이를 해결하려면 내부에서 화면을 보여주는게 좋다고 생각했다. 그래서 iframe을 사용해서 화면을 보여주도록 변경했다. 하지만 iframe을 막은 사이트에 경우에는 아웃링크로 가서 볼 수 있도록 아웃링크로 가는 링크를 만들어주었다.

 

 

 

 

 

UI 문제 3.

보고 싶은 업체만 보고 싶은 경우에 볼 수 있는 방법이 없었다. 그래서 이를 해결하기 위해서 상단의 리스트 바를 만들어서 자유롭게 골라서 볼 수 있도록 구성했다.

 

 

업체 리스팅

 

 

 

 

회고

2.0을 만들겠다고 생각했을 때 나 혼자서 만들기는 어렵다고 판단해서 같이 전직장에서 일했던 친구에게 부탁했다. 친구(https://lelecoder.com/)가 마침 이직을 하기 전이라 놀고 있어서 업무를 많이 진행해줬고 그래서 더 많은 컨텐츠를 가져올 수 있었고 수집된 컨텐츠 정보와 에러 정보를 slack으로 받는 기능등을 추가 받을 수 있었다. 함께하니 더 재밌고 좋았다. 나중에 같이 일할 수 있는 기회가 또 왔으면 좋겠다.

 

 

수집한 컨텐츠 정보를 알려주는 slack과 에러 발생시 알려주는 slack

 

 

 

추가된 정보와 변경된 구조 그리고 ui가 모두 맘에 든다 많은 분들이 구경와서 더 좋은 컨텐츠를 모아서 보여줄 수 있는 서비스가 되었으면 좋겠다.

해당 프로젝트는 비영리적 목적으로 해당 코드를 가지고 수정하거나 상업적 용도로 사용하는 것을 금지한다.

http://wedul.space

 

 

새로워진 TimeLine 2.0

 

 

 

댓글()
  1. jayden 2020.01.27 23:23 댓글주소  수정/삭제  댓글쓰기

    좋은 정보네요. 타임라인 사이트 자주 찾아갈게요.

  2. byrage 2020.01.28 23:36 댓글주소  수정/삭제  댓글쓰기

    좋은서비스에 쿨한회고 조합 멋지네요. 고생하셨습니다~

  3. Favicon of https://lelecoder.com BlogIcon jayden-lee 2020.01.29 16:43 신고 댓글주소  수정/삭제  댓글쓰기

    wedul은 무슨 뜻인가요?

  4. 감자아빠 2020.01.30 14:54 댓글주소  수정/삭제  댓글쓰기

    해당 채용 정보를 다시 RSS로 제공해도 좋을것 같습니다.

[토이 프로젝트 소개] 개발자 채용, 기술 블로그 정보를 모아주는 TimeLine

IT 지식/기타지식|2019. 8. 18. 21:46

혼자 공부를 집에서 어떻게 하면 효율적일까 고민을 많이했다.

집에서 주구장창 책을 읽고 해보면 스킬이 늘까? 그렇게 해봤지만 그게 정답은 아니었다. 남들에게는 모르겠으나 나에게는 아니었다. 

 

회사에서 하는 업무는 한정적이니 내가 회사에서 하지 못하지만 알고 싶고 잊고 싶지 않은 내용에 대해서 프로그램을 직접 만들면서 공부할 내용을 정리하고 싶었다.

그래서 만들게 된게 타임라인인데, 개발자 채용정보나 기술 블로그를 rss등을 사용해서 모아볼 수는 있으나 별도의 관리 툴이나 브라우저에서 확인해야해서 좀 불편했다. 그래서 그것을 한번에 볼수 있게 하는 사이트가 있으면 좋을 것 같아서 만들어봤다.

우선 주소는 http://wedul.space이다. aws에 도입하고 싶었으나 비용도 걱정되니해서 집에있는 간이 서버에 도입하였다.

화면은 잘 그릴지 몰라서 vue.js 책을 사서 간단하게 읽고 구성했다.

 

홈 / JOB / TECH로 페이지는 구성되어 있고 앞으로 로그인하여 본인이 구독하고 싶은 회사만 보는 기능을 추가할 예정이다. 그리고 자세히보기 누르면 현재는 해당 페이지로 이동하지만 timeline 내부에서 볼 수 있는 페이지를 추가할 예정이다.

 

원래는 혼자 저 정도 까지 구성하다가 크롤링 사이트를 확장하는데 혼자하기에는 조금 역부족이고 함께하고 하고자 하는 친구가 있어서 요청했다. 그래서 테크쪽과 프론트는 그 친구가 담당해주고 있다. 

저장소는 공개 되어있고 참여하고 싶으신 분들은 pull-request 보내주셔도 좋다.

https://github.com/weggdul/timeline

 

 

백엔드 구성


아무래도 나는 백엔드 개발자이다 보니 백엔드에만 사실 집중했다. 크롤링 양이 많지 않아서 별도 배치를 만들거나 큐에 쌓거나 할 필요는 없었으나 공부를 위해서 모두 구성해봤다.

우선 java8, spring-boot2.1.5로 구성되어 있고 멀티모듈로 관리하고 있다. (https://github.com/weggdul/timeline)

api 서버는 spring-batch를 통해 긁어온 데이터가 쌓여있는 mariadb에서 정보를 가져와 보여주며 중간에 redis가 위치해 있어 데이터를 캐시하고 있다.

 

batch 서버는 spring-batch에서 하루 두번 모든 JOB, tech사이트에 들러 크롤링해오고 그 정보를 kafka로 전송한다. kafka를 리스닝 하고 있다가 kafka에 데이터가 들어오면 읽어서 mariadb로 적재시키고 있다.

 

아직 미완 단계지만 다 만들어지고 나면 배포 자동 구성도 하고 seo도 달고 광고도 한번 달아봐야겠다.

공부도 확실히 되는거 같고.. 연말까지는 하고자 했던거 다 붙여보자.

댓글()
  1. 지나가는개발자 2019.08.19 14:19 댓글주소  수정/삭제  댓글쓰기

    토이프로젝트 깃 주소도 그렇고 서비스주소도 없다고뜨네요?

    • Favicon of https://wedul.site BlogIcon 위들 wedul 2019.08.19 14:26 신고 댓글주소  수정/삭제

      안녕하세요. 주소 정보는 아래와 같구요. 다시한번 확인해주세요!

      서비스 사이트 : http://wedul.space
      github : https://github.com/weggdul/timeline

  2. Favicon of https://wedul.site BlogIcon 위들 wedul 2019.10.30 15:01 신고 댓글주소  수정/삭제  댓글쓰기

    잠시 서비스 중단합니다.

  3. 나그네 2020.01.30 14:19 댓글주소  수정/삭제  댓글쓰기

    작업하시는데 얼마나 걸리셧나요