IT트렌드 보고서 "post-IT"

프로젝트 기간: 21.03.08 - 04.09

• 📌프로젝트 소개

  • 기획배경
  • 기대효과

• 📌기술스택 및 역할

  • 내가 한 일(개발)
  • 개발 이외

• 📌개발

  • "헤더" 개발 내용
  • "IT 보고서 탭" 개발 내용
    • 주차별 보고서 선택 탭
    • 공통 보고서(section1)
    • 카테고리별 보고서(section2)
    • 전체 구성도
  • "일일 컨텐츠 탭" 개발 내용

• 📌자료

📌 프로젝트 소개

기획배경

→ 보고서 한장 으로 파악하는 개발 트렌드, 기술 블로그/유튜브를 한곳에 모아 볼 수 있는 데일리 컨텐츠 제공 서비스

기대효과

---

📌 기술스택 및 역할

• 개발환경

• 아키텍처 구성

• 인프라 구성

내가 한 일(개발)

• 프론트엔드 개발환경 구축 (Typrscript, react.js)
• 페이지 레이아웃
• Axios 백엔드 데이터 연동
• 데이터 시각화(amchart.js)

개발 이외

• 프로토타입 제작
• 30초 영상 제작(프리미어 프로/애프터 이펙트)

---

📌 개발

"헤더" 개발 내용

• 600px 이상

• 600px 미만
  • 미디어 쿼리를 활용하여 600px이하일 경우 드롭다운 메뉴로 변경(모바일 환경 지원)
  • 마우스 오버 시 focus된 탭의 스타일 변경

• react-router-dom의 NavLink 의 isActive, activeStyles 속성 적용

• 로그인 모달 제작(컴포넌트를 children 받아 재사용성을 높임)

---

"IT 보고서 탭" 개발 내용

주차별 보고서 선택 탭

• Select 태그 사용하여 주차별 옵션을 주어 선택가능
• 클릭 시 각 주차별 보고서 데이터를 받아옴

공통 보고서(section1)

• stackoverflow에서 추출한 vote수가 가장 많은 TOP 10 제공
• 각 게시물 클릭 시 해당 stackoverflow 게시물로 이동

카테고리별 보고서(section2)

전체 구성도

• 주간 인기 키워드 - 카테고리 별로 주간 인기 키워드를 빈도수 기준으로 뽑아줍니다.
• 워드 클라우드 - 인기 키워드를 워드 클라우드 형태로 시각화(클릭 시 스택오버플로우 해당 태그의 링크로 이동)
• 네트워크 맵 - 키워드의 연관성을 분석하여 네트워크 맵 형태로 시각화
• 에러 TOP10 - 해당 카테고리의 에러 게시물(stackoverflow) 조회수 상위 10개를 가져옴

---

"일일 컨텐츠 탭" 개발 내용

• 페이지 레이아웃

📌자료

프로토타입

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FXE0ORrPHD84UKeRM0FIowM%2FPost-IT%3Fnode-id%3D122%3A2

발표 자료

post-IT 발표자료.pptx