https://devstacktrend.sungho.my/

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

• MySQL 활용 DB구축

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

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

• nginx 활용한 이미지서버 구축

• 크롤러 레포

  
  

• 2024/06/04 ~

• 프론트엔드

  

• 백엔드

  

• 데이터 수집을 위한 ERD 설계 및 MySQL DB 구축
• REST api 의 설계, 구현, 및 통신
• Next 14 app router, server component(server action) 활용 ssr 구현
• prisma ORM 활용 MYSQL db CRUD
• nginx 활용 이미지 서버 구축
• HeadBar, SearchBar, SideBar, 로딩처리, 반응형 웹 등 styled-components 및 mui를 이용한 UI구현
• AWS RDS, AWS EC2, AWS ROUTE 53 활용 프로젝트 배포, NCP 클라우드 이전
• Github Actions를 이용한 CI/CD 파이프라인 구축
  • 무중단배포, 클라우드 성능이슈 해결을 위해 사전빌드 방식 채택
• Swagger 를 통한 api 문서화

• 문서링크
• 대부분의 데이터는 Nextjs Server Action을 통해 주입되고있으며 client side 에서의 ajax 요청에 대한 부문만 api 작업이되어있습니다.

• raw_keywords(n) - refined_keywords(1)의 구조기반입니다.
• 타겟 채용공고에 raw_keywords(ex react,React,React.js) 가 하나라도 있다면 refined_keywords(ex. React)로 집계됩니다.

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

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

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

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

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

• 상단바 상위권 순위표시 ui
• 채용공고목록 플랫폼 필터
• 채용공고목록 플랫폼별 ui(이미지)

npm i npm run build npm run start