[토이프로젝트] 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로 제공해도 좋을것 같습니다.

[공유] 우분투 설치 시 boot efi 관련 오류 수정 방법

IT 지식/기타지식|2019. 9. 9. 08:25

와이프가 결혼전에 집에서 사용하던 노트북 lenovo 제품이 있어서 이걸 간단하게 사용할 서버로 쓰고 싶었다.

그래서 우분투를 설치하려고 하는데 계속 the 'grub-efi-amd64-signed' package failed to install into /target/. Without the GRUB boot loader, the installed system will not boot. 라는 오류만 발생했다.

구글링을 하면서 efl boot 영역을 설정해주고 별짓 을 다해도 안되었는데

 

오늘 아침에 이 유튜브를 보고 해결했다. 나중을 위해서 공유해논다.

https://www.youtube.com/watch?v=DWlB0_f3GAY

태그 : BIOS, boot, efl, grub, Target, ubuntu

댓글()

[토이 프로젝트 소개] 개발자 채용, 기술 블로그 정보를 모아주는 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 댓글주소  수정/삭제  댓글쓰기

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

간단한 카카오 챗봇 만들기

IT 지식/기타지식|2018. 10. 6. 01:34

node.js 공부한 것으로 한번 테스트 해보기 위해서 카카오 플러스친구를 만들고 그곳에서 호출하는 api를 만들어 연동해봤다. 일부러 wedul 플러스 친구 정보와 친구추가를한 사용자들에 정보를 담을 데이터는 redis에 넣어봤다.

플러스친구 만들기

우선 카카오 플러스친구에 들어가서 플러스친구를 만들었다. 플러스 친구에 wedul이라고 검색하면 이제 나온다. 신기하다.

친구 추가 url : http://pf.kakao.com/_qMxnEj




이제 친구 추가후에 채팅창에서 보여줄 안내 대화를 만들기 위해 api를 만들었다.
api 만들 때 필요한 상세 내용들은 문서에 잘 나와있다. 아주 간단해서 10분이면 다 만들듯??? 그렇게 만든 api를 aws 프론티어에 올려서 카카오 플러스친구에 연동했다.

Developer Document

https://github.com/plusfriend/auto_reply#6-object


짜잔 결과!


그냥 재미삼아 만든 것이기 때문에 별다른 기능은 없다.

자세한 소스는 git에 node.js 공부하는 소스에 포함시켜 올려놓았다. 

https://github.com/weduls/nodejs_test



댓글()
  1. dani 2019.08.19 11:40 댓글주소  수정/삭제  댓글쓰기

    간단한 말을 참 잘 쓰는 군요!?

Fake SMTP로 메일 전송 테스트

IT 지식/기타지식|2018. 10. 4. 23:51

간단하게 rabbitMQ 코드 만들어보는 도중에 메일전송기능이 필요했다.

그런데 메일을 계속 보낼수도 없기 때문에 메일이 잘 전송되고 있는지 확인할 수 있는 프로그램이 있는지 찾아봤다. 


그중에 Fake SMTP 라는 프로그램이 있어서 소개해본다.

프로그램은 하단에 첨부된 링크에서 다운받을 수 있다. 실행방법은 다운받은 파일위치에서  java -jar fakeSMTP-2.0.jar 명령어로 실행시키면 GUI 화면이 나온다.

스프링 부트에서 JavaMailSender와 간단한 설정을 통해 메일 전송 여부를 테스트 할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// application.properties
spring.mail.host=localhost
spring.mail.port=2525
 
// service
/**
 * microservice
 *
 * @author wedul
 * @since 2018. 8. 25.
 **/
@Component
public class Mailer {
 
    @Autowired
    private JavaMailSender javaMailSender;
 
    public void sendMail(String email) {
        SimpleMailMessage mailMessage = new SimpleMailMessage();
        mailMessage.setTo(email);;
        mailMessage.setSubject("Registration");
        mailMessage.setText("Successfully Registered");
        javaMailSender.send(mailMessage);
    }
}
 
cs


http://nilhcem.com/FakeSMTP/download.html#

댓글()

Maven Scope 정리

IT 지식/기타지식|2018. 10. 4. 00:59

Maven Scope 정리

pom.xml에서 상용되는 scope에 대한 정리

compile
- 아무런 scope를 명시하지 않았을때 사용되는 기본값.
- 테스트 및 런타임에도 classpath에포함된다.

※provied
- JDK 또는 컨테이너에 의해서 runtime에 제공되는 모듈
- 이 scope는 이미 컨테이너가 해당 라이브러리를 제공하고 있을때 유용 그러므로 실제로 배포시에 제외대상
- 예를 들면 아래 servlet api의 경우 이미 웹서버에서 제공하고 있는 경우에 maven scope를 provied로 기재

1
2
3
4
5
6
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>servlet-api</artifactId>
    <version>2.5</version>
    <scope>provided</scope>
</dependency>
cs

※runtime
- 런타임시 필요하지만 컴파일시에 필요하지 않는 경우에 사용
- 테스트와 런타임에는 사용 되지만 컴파일시에 사용 되지 않음
- 대표적 예로 JDBC Driver

1
2
3
4
5
6
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>6.0.6</version>
    <scope>runtime</scope>
</dependency>
cs


※test
테스트 코드 컴파일시 필요, 배포시 제외


참고
https://www.baeldung.com/maven-dependency-scopes


Scope를 Provided로 지정했을때 문제사례
인텔리제이에서 간단한 spring project를 만들고 실행시킬때 NoClassDefFoundError: javax/servlet/Filter 에러가 발생했다.

그 이유를 구글링해서 확인해보니 실행시 사용할 spring-boot-starter-tomcat의 스코프를 provided로 지정해서 에러가 발생했다. 스코프를 지워서 default인 compile로 사용하지 정상적으로 동작했다.
https://stackoverflow.com/questions/31494183/getting-a-caused-by-java-lang-noclassdeffounderror-javax-servlet-http-httpser


댓글()

Maven 프로젝트를 Gradle로 변경

IT 지식/기타지식|2018. 8. 5. 00:45

Maven 프로젝트를 Gradle로 변경해봤다.

멈저 PC에 cmd 창에서 gradle 명령어를 사용할 수 있도록 환경 변수를 편집해보자.
우선 시스템 환경변수에서 시스템 변수 편집에 들어가 Path를 수정하여 gradle\bin의 위치를 설정해준다. (gradle은 홈페이지에서 별도로 다운로드)



정상적으로 환경변수가 설정이 되면 cmd 창을 키고 gradle -v 명령어를 사용하면 다음과 같이 gradle 버전정보가 출력된다



그리고 maven 프로젝트 디렉토리에서 pom.xml이 존재하는 위치로 이동하여 다음 명령어를 사용하면 자동으로 build.gradle이 생성되면서 gradle 설정파일이 추가된다.

1
gradle init --type pom
cs


댓글()

Mac에서 일반 키보드 연결시 Home/End 버튼 사용방법

IT 지식/기타지식|2018. 6. 16. 19:00

맥북을 사용하다보면 다 좋은데 키보드 연결해서 사용하려고 할때 일반 키보드와 단축키가 너무 달라서 불편한 경우가 굉장히 많다.

특히 개발할 때 홈버튼과 엔드 버튼을 자주 사용하는데 너무 불편했다. 이를 해결하기 위한 방법을 구글링해서 찾았고, 공유 및 정리하기 위해서 글을 올린다.

다른 글이나 동영상 보면 karabinder를 사용하라고 하는데 나는 아무리 해도 적용이 안됐다... 이 글을 보고 나와 같은 문제를 격는 사람들이 문제를 해결 했으면 좋겠다.

1. 먼저 터미널을 실행 시키고 다음 경로로 이동한다.

$ cd ~/Library
$ mkdir KeyBindings
$ cd KeyBindings
$ vi DefaultKeyBinding.dict

 

2. 그리고 vi 편집기로 실행시킨 텍스트에 아래 내용을 입력해주고 Esc를 누른 후 :q를 눌러 저장한다.

{
/* Remap Home / End keys to be correct */
"\UF729" = "moveToBeginningOfLine:"; /* Home */
"\UF72B" = "moveToEndOfLine:"; /* End */
"$\UF729" = "moveToBeginningOfLineAndModifySelection:"; /* Shift + Home */
"$\UF72B" = "moveToEndOfLineAndModifySelection:"; /* Shift + End */
"^\UF729" = "moveToBeginningOfDocument:"; /* Ctrl + Home */
"^\UF72B" = "moveToEndOfDocument:"; /* Ctrl + End */
"$^\UF729" = "moveToBeginningOfDocumentAndModifySelection:"; /* Shift + Ctrl + Home */
"$^\UF72B" = "moveToEndOfDocumentAndModifySelection:"; /* Shift + Ctrl + End */
}

 

3. 그리고 재부팅을 하면 놀랍게도 홈버튼과 엔드 버튼이 정상 동작한다. 너무 좋다.

댓글()
  1. 2018.07.20 16:37 댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2018.12.08 23:21 댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • Favicon of https://wedul.site BlogIcon 위들 wedul 2018.12.08 23:59 신고 댓글주소  수정/삭제

      안녕하세요 저도 구글링 해서 찾은 정보라 자세히는 모르는데 저 설정값이 이미 적용이 되었기에 지웠다고 돌아오지는 않을거 같아요.

      페러럴즈에 키를 바꿔주는 옵션이 있는데 홈/엔드 키를 눌렀을때 동작하는 부분을 바꿔보시는건 어떨까 생각이 듭니다.

      저도 페러럴즈에서 안되는 부분은 잘 몰라 죄송합니다 ㅠㅠ 도움이 못되서