MyRSS 제작기 - HJ-Rich/2022-MyRSS Wiki

Welcome to the 2022-MyRSS wiki!

13일차 - 피드 디자인, 하단 네브바, Web Share API

  • 피드 디자인 개선 및 목업 네브바 구현
  • Web Share API를 이용한 공유하기 구현
image



12일차 - 무한 스크롤

큰 틀에서 구현 완료

  • loading, hasNext, pageNumber, feeds 등의 상태관리에 대해
    • axios로 가져온 피드들은 useState로 의도대로 관리되었음
    • 그러나 loading, hasNext, pageNumber 들에 대한 useState가 적용되지 않는 이슈 발생
    • 적용되지 않는 변수들에 대해 useState없이 let 선언한 순수 자바스크립트 flag값으로 사용하는 것으로 일단 해결
  • 백엔드 API 관련 변경
    • 피드 조회 시, 다음 페이지 존재 여부, 다음 페이지 번호를 함께 응답하도록 개선
    • 피드 응답값에 Description 추가
  • 피드 컴포넌트 디자인 개선
    • 좋아요, 공유하기 기능은 미구현 상태
    • 제목, 날짜, 요약, 클릭시 링크이동 구현
    • icon 제공, 밑줄 제거, 색감 개선, Description 길이 줄이기 먼저 진행 예정
  • favicon, title 적용

favicon

feed



10, 11일차 - 휴식

9일차 - AWS CloudWatch

  • IAM 사용자 생성 및 On-Premise 방식으로 AWS CloudWatch 를 구성해봄
  • 대시보드로 CPU 사용률, 네트워크I/O, 로그 스트림을 시각화함
  • 다만 프리 티어에서 제공하는 월간 메트릭 수가 적어 과금 이슈 발생
  • CloudWatch는 구성 방법 및 제공하는 기능이 무엇인지 파악하는 정도에서 마무리
  • 오픈 소스 기반의 Grafana를 구축하여 사용하기로



8일차 - logback, RestDocs

  • 로그백을 이용해 로컬, 개발, 운영 환경별 로그 출력을 설정
    • 로컬은 콘솔, 개발과 운영은 비동기 방식으로 로그 레벨별 파일로 분리해서 출력하게 했다.
    • 스프링부트에 기본적으로 제공되는 로그백 출력 패턴을 이용해서 평소에 자주 보던 로그 패턴과 동일하게 유지했다.
    • 로컬과 개발은 DEBUG 이상, 운영은 INFO 레벨 이상을 로깅하도록 했다.
  • RestDocs를 이용한 API 문서 자동화
    • build.gradle 파일에 설정 추가
    • DocumentationTest 작성
    • snippet을 조합하는 adoc 작성
    • adoc 문서들을 통합해주는 adoc 작성
    • index.html 파일 생성 확인
RestDocs Example



7일차 - 피드 엔티티에 Description 필드 추가

  • 피드를 보여주는 View에서 카드 형태로 보여주되, 제목과 더불어 내용의 일부를 함께 보여주는 것도 좋을 것 같았다.
  • 이 용도에 맞는 엘리먼트가 있다. RSS 규격상 Description이다.
  • 그러나 atom, rss 여부에 따라, RSS를 제공하는 사이트에 따라 상황이 다양하다.
  • 다행히 ROME 라이브러리가 정말 많은 일을 해주지만.. Description이 없는 경우도 있다.
  • 임시적으로 Description이 없지만 Contents를 제공해주는 경우, Contents 중 앞 부분 중 일부를 잘라서 담기로 했다.
  • Description, Contents 모두 없을 경우 아쉽지만 빈 문자열을 일단 담아주기로 했다.



6일차 - 피드 View 시작

  • 티스토리 블로그, Naver D2, 우아한형제들 기술블로그 이렇게 세 RSS를 등록함.
  • 피드 컨트롤러 구현. PageRequest 를 적용하여 기본 페이징 처리 구현.
  • RSS에 추천 여부를 설정. 추천 true인 RSS는 디렉터's 초이스. 비로그인 상태의 기본 피드에 활용됨.
  • 기본 피드 View 작업 시작



5일차 - RSS

  • RSS 기능 관련
    • RSS가 자동으로 변경감지하여 알림을 전송해주는 매직인 줄 알았지만.. 현재까지 확인한 바로는 거는 아닌 듯 하다
    • 다행히도 RSS URL 만 전달하면 파싱해주는 훌륭한 라이브러리가 존재. Rome
    • RSS 공식 문서를 확인하여 element들 중 필수값이 무엇이 있는지, 사용할만한 값이 무엇이 있는지 확인
    • atom 방식과 rss 방식이 있음을 확인, 감사하게도 Rome 라이브러리가 모두 지원
  • RSS와 Feed 관련
    • RSS 주소와 RSS 주소로 fetch하여 parsing한 Feed 두 가지를 도메인 객체로 정의
    • 1시간 간격으로 등록된 RSS 주소를 모두 가져와서 새로운 피드를 확인하여 DB에 저장하는 기능까지 구현
    • 다만, 변경감지 처리는 없이, link가 중복되지 않는 Feed들을 저장하도록 구현
  • Feed 탐지 관련 개선 가능성
    • Feed 를 DB에 저장할 때, fetch한 item하나를 통으로 해싱한 값을 같이 저장한다면?
    • 추후 item이 업데이트 되었는지도 해싱하여 검증한 뒤, 변경되었다면 업데이트 처리를 해줄 수 있을 듯 하다.
    • 다만 현재 MyRSS 서비스에서 구상하는 바는 제목과 링크 정도만 제공할 예정이기에..
    • 제목의 변경 여부 정도만 직접 검증하는 게 오히려 나을 듯 하다.
    • 해싱을 이런 식으로 활용할 수도 있겠구나 하는 새로운 컨셉을 얻었다.



4일차 - 로그인

  • 서버에서 Set-Cookie 응답을 했음에도 프론트에서 Cookie가 할당되지 않는 이슈 발견
  • Set-Cookie가 되지 않으니 쿠키값을 바디로 응답해서 프론트에서 직접 쿠키에 주입시키는 방법에 대해 시도해봄
    • 그러나 Redis에 저장되는 SessionID와 Set-Coookie에 응답되는 값이 다름을 확인
    • 디버깅을 통해 SessionID가 응답시점엔 base64로 인코딩되어 Set-Cookie로 응답되고 있음을 확인
    • 따라서 추후 프론트에서 전달한 쿠키값을 base64로 디코딩해서 세션 존재 여부를 검증하는 방법을 검토했음
  • 근본 원인을 확인함
    • 개발, 운영에선 프론트와 백엔드가 Same-Origin에 있지만, 로컬에선 3000과, 8080포트로 분리되어 있어서 Same-Origin이 아님
    • 그로인해, CORS설정 뿐만 아니라 추가적으로 credential에 대한 옵션을 더해줘야 함을 확인
    • 프론트에서 요청을 전송 시에도, 백엔드에서 CORS설정 시에도 credential에 대한 설정을 'include'로 추가하여 해결



3일차 - Spring Session, Redis

  • Spring Session을 이용한 Github 로그인 구현 시도
  • 인프라1 인스턴스에 Redis 설치
  • Spring Session 라이브러리를 이용해, HttpServletRequest.getSession 시, Redis에 30분 TTL로 세션 저장 확인
  • React Router Dom 을 이용한 Github OAuth 구성 시작
  • 프론트 로컬, 개발, 운영 환경별 프론트 환경변수 구성
    • npm start 명령어 시점과, npm run build 시점에 사용되는 .env 파일의 우선순위가 다름을 확인
    • CRA 공식문서 중 일부
    • .env.development 를 npm start에서 우선순위로 하여 로컬 개발시에 사용
    • .env.production 을 npm run build 하여 운영 배포시에 사용
    • 개발 배포시에는 npm run build 시점에 직접 전달하여 .env.production 에 정의된 값을 오버라이드 처리
  • Jenkins를 이용한 프론트 배포를 위해 NodeJS 플러그인 설치 및 배포 구성



2일차 - 오라클 클라우드

  • 오라클 클라우드 프리티어 계정으로 인스턴스 4개 생성 및 구성 설계
    • 인스턴스 1 운영 - BE, FE 운영 배포
    • 인스턴스 2 개발 - BE, FE 개발 배포
    • 인스턴스 3 인프라1 - Nginx, MySQL
    • 인스턴스 4 인프라2 - Jenkins, SonarQube 등
  • myrss.ga 도메인 확보
  • Nginx 리버스 프록시 구성 및 SSL 설정 완료
  • MySQL 구성 완료
  • Jenkins 구성 완료



1일차 - 초기 설정

  • 메인 프로젝트 및 서브모듈 프로젝트 리포지토리 생성
  • 메인 프로젝트 리포지토리에 backend, frontend 기본 프로젝트 생성
  • Slack 워크스페이스 생성
  • Slack, Notion 연동
  • Slack, Github 리포지토리 연동



0일차 - 컨셉 구상

  • 전체 조회 - 기술 블로그들을 RSS로 모아서 보여주자
  • 구독 조회 - 내가 구독한 RSS만 모아서 보여주자
  • RSS 추가 - 전체 조회에서 나오지 않는 블로그들도 RSS로 추가할 수 있게 해주자
  • 메일링 - 내가 구독한 RSS들을 일주일 단위로 메일 보애줄까?
  • Slack 서비스 - 내가 구독한 RSS가 신규로 올라오면 등록한 Slack 채널로 보내줄까?
  • 피드 쓰기 - 공유하고 싶은 RSS 피드를 공유하면서 본인의 생각을 추가해서 피드로 작성하기
  • 소셜 - 팔로우, DM
⚠️ **GitHub.com Fallback** ⚠️