osw6858 / tech-hub

React로 만든 기술블로그!

Tech Hub

프론트엔드 개발자를 위한 블로그 템플릿

💪 기획 배경

• 처음엔 단순히 프론트엔드 개발자들이 모여 급격하게 바뀌는 프론트엔드 기술 트렌드를 공유하는 블로그가 있었으면 좋겠다 생각했습니다.

💪 해결 컨셉

• 프론트엔드 개발자들의 교류와 협업을 촉진하는 공간을 마련하기 위해, 오직 프론트엔드 개발자들만이 모이는 블로그 템플릿을 설계하였습니다. 이 블로그는 사용자들이 자신의 경험, 아이디어, 그리고 최신 기술 트렌드를 공유할 수 있는 플랫폼을 제공함으로써, 프론트엔드 개발 커뮤니티 내에서 지식의 확산과 협업의 촉진을 목표로 정했습니다.

🤖 기술스택

Frontend

• React
• TypeScript
• styled-components
• react-router
• react-query
• Redux
• axios
• vite

Backend

• Firebase

🥊 트러블 슈팅

게시글 작성시 이미지를 2개 넣으면 썸네일이 제대로 안나오는 문제

문제점

• 사용자가 게시글에 이미지를 두 개 이상 첨부했을 때 썸네일이 제대로 표시되지 않는 문제에 직면했습니다.

해결방법

• 이 문제를 해결하기 위해 JavaScript 내에서 정규 표현식을 활용하는 방법을 고안했습니다. 구체적으로, 게시글 내용에서 이미지 URL을 정확히 추출하기 위한 정규 표현식을 작성하고 적용함으로써, 첫 번째 이미지 URL을 성공적으로 썸네일로 설정할 수 있는 로직을 구현하였습니다.