DEVSTACKTREND

배포주소

https://devstacktrend.sungho.site/

프로젝트 개요

• 개발자 채용 트렌드를 확인할 수 있는 기술스택 랭킹 사이트

• next.js를 이용한 프론트엔드 및 백엔드 개발

• node.js, prisma, mysql 활용 채용공고 크롤링

• express.js 활용한 이미지서버 구축

• 크롤러 레포

• 이미지서버 레포

  
  

프로젝트 기간....

• 2024/06/04 ~

기술스택

• 프론트엔드

  

• 백엔드

  

학습, 구현 및 개선사항

• REST api 의 설계, 구현, 및 통신
• Next 14 app router, server component 활용 ssr 구현
• prisma ORM 활용 MYSQL db CRUD
• express.js 활용 이미지 서버 구축
• HeadBar, SearchBar, SideBar, 로딩처리, 반응형 웹 등 styled-components 및 mui를 이용한 UI구현
• AWS RDS, AWS EC2, AWS ROUTE 53 활용 프로젝트 배포

기능소개

• 메인 페이지
• 카테고리별 순위 페이지
• 키워드 상세 페이지
• 키워드 검색 기능
• 반응형 레이아웃

메인 페이지

• 최근 수집일 기준 모든 카테고리의 키워드 순위를 확인할 수 있습니다.

카테고리별 순위 페이지

• 카테고리별 순위를 확인할 수 있습니다.
• 페이지네이션 및 페이지 이동시 스크롤 위치를 저장합니다.

키워드 상세 페이지

• 키워드별 공고수 변화 추이를 확인할 수 있습니다.
• 키워드를 담고있는 채용공고 링크를 확인할 수 있습니다.

키워드 검색 기능

• 수집중인 키워드를 검색 및 상세페이지로 이동할 수 있습니다.
• react-query를 활용해 api 요청횟수를 최적화했습니다.

반응형 레이아웃

- 미디어쿼리를 이용해 반응형 레이아웃을 구현했습니다.