HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤎
프론트엔드 데브코스 5기 교육생/
🦆
더기팀/
😋
맛남의 길/
📎
발표 자료
📎

발표 자료

  • 더 필요한 부분 있으시면 적어주세요 ! !
 
!!!
안녕하세요. 더기 팀 최종발표를 맡은 하송희입니다. 저희 팀은 맛남의 길이라는 프로젝트를 제작하였습니다. / 먼저 간단하게 팀원 소개와 맛남의 길 서비스 소개 후, 저희가 사용한 기술, 개발 문화, 그리고 제작한 프로젝트를 설명드리겠습니다.
/
저희 팀은 더기 멘토님을 중심으로 박경빈, 박수현, 백준원, 윤상민, 하송희 5명의 팀원으로 구성되어있습니다.
/
저희 팀의 이번 프로젝트 목표는 효율적으로 협업하는 능력 기르기, 현업에서 자주 쓰이는 기술 스택 익히기, 코드 리뷰 경험 쌓기, 실력적으로 성장하기 였습니다.
/
다음은 저희가 제작한 서비스에 대해 설명드리겠습니다. 맛남의 길은 광고나 마케팅이 아닌, 맛에 진심인 사람들이 진심으로 추천하는 맛집을 찾는 데에 중점을 둔 서비스 입니다.
/
최근 들어 sns나 블로그 등의 광고성 리뷰가 많아졌고, 저희는 광고나 마케팅이 아닌, 사람들이 진심으로 추천하는 맛집을 찾고 싶어졌습니다.
따라서 맛남의 길은 맛에 진심인 사람들, sns로 맛집 찾기를 즐기는 사람들, 광고에 질려버린 사람들, 오프 모임 후 굶주려 있는 프롱이들을 타겟으로 진정성 있는 식사 경험을 제공하기 위해 탄생했습니다.
/
저희는 피그잼을 이용해 아이디어와 와이어 프레임를 구상했고,
/
피그마를 이용해 디자인을 완성하였습니다.
/
저희가 사용한 기술 스택은 다음과 같습니다.
언어는 타입스크립트를 사용했고, 리액트와 리액트 훅 폼 라이브러리를 이용했습니다.
리코일로 전역 상태를 관리했고, 리액트 쿼리로 서버 상태를 관리합니다. 번들러는 비트를 사용했고, 이모션 스타일드를 이용해 스타일링 했습니다.
액시오스로 통신하고 버셀로 배포했습니다.
코드 포맷팅에는 이에스린트와 프리티어를 사용했습니다.
/
저희 팀의 개발 문화는 크게 5가지 입니다.
먼저 저희는 Git을 기반으로 협업을 진행했고, 깃 이슈와 풀 리퀘스트 템플릿을 만들어 사용했습니다.
이를 통해 이슈와 피알의 내용이 명확하게 문서화되어 필수 내용이 누락되는 것을 방지하고 일관성과 효율성을 증가시켰습니다.
/
두 번째로, GitHub의 프로젝트 기능을 활용하여 칸반보드를 구성했습니다. 이를 통해 저희는 각 작업의 상태를 시각적으로 파악하고 프로젝트의 진행 상황을 효과적으로 관리할 수 있었습니다.
/
세 번째로, 저희는 Git Flow 방식을 채택하여 브랜치를 관리했습니다.
특히 각각의 이슈와 브랜치를 연결시킨 후 작업하여, 코드의 품질을 유지하고 충돌을 최소화할 수 있었습니다.
/
다음으로 저희는 허스키를 활용하여 커밋 컨벤션에 따른 메시지의 형식을 강제하고, 규칙을 준수하도록 설정해 일관성과 효율성을 높였습니다.
/
마지막으로, JSDoc을 사용해 코드에 문서화를 진행했습니다. 이를 통해 코드의 가독성을 높이고, 팀 내의 협업을 용이하게 만들었습니다.
/
저희 팀은 슬랫, 깃허브, 피그마, 노션, 디스코드를 통해 효율적으로 소통하고 협업했습니다.
먼저 Slack을 이용하여 실시간 소통을 진행하여, 프로젝트 내에서의 중요한 안내나 긴급한 상황에 대한 소통에 큰 도움이 되었습니다.
두 번째로, Notion을 활용해 프로젝트 관리와 문서 공유를 체계적으로 진행했습니다. 이를 통해 팀원들 간의 정보 공유가 원활하게 이뤄질 수 있었습니다.
세 번째로, Discord를 이용한 음성 대화와 화면 공유를 통해 더욱 심도있는 의사소통이 가능했습니다. 특히, 프로젝트의 세부 사항이나 어려운 부분을 논의하거나 질문에 대한 실시간 답변을 주고받을 수 있어 효과적으로 협업할 수 있었습니다.
네 번째로, GitHub를 통해 코드 관리 및 협업 개발을 진행했습니다. GitHub를 이용하면 코드 변경 이력을 관리하고 여러 팀원이 동시에 작업할 수 있어 프로젝트의 안정성과 효율성을 동시에 유지할 수 있었습니다.
마지막으로 Figma로 여러 유저가 동시에 디자인 작업하고 의견을 주고받을 수 있도록 했습니다. 이를 통해 디자인 작업의 효율성을 높이고, 팀 내에서 손쉽게 피드백을 주고받을 수 있었습니다.
/
다음으로는 맛남의 길의 기능소개를 진행하겠습니다.
채팅이 마지막~~
     
     
     
     
    1. 목차
    1. 팀원 소개
    1. 팀 목표
      1. 협업 능력과 효율을 올렸다.
    1. 서비스 소개 및 의도
        • 지역 관련 → 좋아요/싫어요로 서비스 방향 변경됨
    스크립트
    맛남의 길 서비스 기획은 광고나 마케팅이 아닌, 지역 사람들이 진심으로 추천하는 맛집을 찾는 데에 중점을 두었습니다. 맛남의 길은 지역민들에게 오랜 시간 사랑받고 있는 '진짜' 맛집을 탐색하는 데 초점을 맞추어, 진정성 있는 식사 경험을 제공합니다.맛남의 길은 3가지 필요에 의해 탄생했습니다.
    • 유명한 음식점들은 주로 일회성 방문객들을 대상으로 한 마케팅 전략에 의존하고 있습니다. 맛남의 길은 지역민들에게 사랑받고 있는, 소위 ‘진짜’ 맛집을 탐색하는 데 중점을 두어 지역 사람들에게 특별한 식사 경험을 제공합니다.
    • 많은 음식점들이 운영 정보를 충분히 제공하지 않아 소비자들이 불편을 겪고 있습니다. 휴무일, 영업시간, 브레이크 타임 등의 정보가 부족하면 방문 계획을 세우는 데 어려움이 있으므로, 우리 서비스는 이러한 정보를 명확하고 쉽게 제공하여 소비자들의 불편을 해소하고자 합니다.
    • SNS와 블로그 상의 광고와 과장된 정보가 넘쳐나는 상황에서 신뢰할 수 있는 최신 정보와 정확한 후기를 찾기 어려워진 상황입니다. 우리 서비스는 사용자들에게 검증된, 신뢰할 수 있는 식당 정보와 솔직한 후기를 제공하여 소비자들이 더 정확하고 신뢰할 수 있는 음식점을 선택할 수 있도록 돕습니다.
    1. 기술 스택
    언어
    TypeScript
    ㅤ
    라이브러리
    React, react-hook-form
    ㅤ
    전역 상태
    Recoil
    ㅤ
    서버 상태
    React Query
    ㅤ
    번들러
    Vite
    ㅤ
    스타일링
    @emotion/styled
    ㅤ
    협업 툴
    Notion, Slack, Discord, Github, Figma
    ㅤ
    API
    axios
    ㅤ
    코드 포맷팅
    eslint, prettier, husky
    ㅤ
    브랜치 전략
    Github Flow + dev 브랜치 추가
    ㅤ
    배포 툴
    Vercel
    ㅤ
    ㅤ
    ㅤ
    ㅤ
    ㅤ
    ㅤ
    ㅤ
    1. 개발 문화 - git issue, pull request 템플릿 - github project(칸반보드) - branch관리(git flow, issue와 브랜치 연결) - husky, 커밋? - JSDoc
    스크립트
    우리팀의 개발 문화에 대해 설명하게씁니다
    첫 번째로, 우리는 Git을 기반으로 하는 협업을 진행하고 있습니다. Git을 효과적으로 활용하기 위해, 우리는 Git Issue와 Pull Request 템플릿을 사용하고 있습니다. 이를 통해 각각의 이슈와 풀 리퀘스트가 명확하게 정의되고 문서화되어 있어, 소통과 협업이 원활하게 이루어지고 있습니다.
    두 번째로, GitHub의 프로젝트 기능을 활용하여 칸반보드를 구성하고 있습니다. 이를 통해 우리는 각 작업의 상태를 시각적으로 파악할 수 있으며, 프로젝트의 진행 상황을 효과적으로 관리하고 있습니다.
    세 번째로, 저희는 Git Flow 방식을 채택하여 브랜치를 관리하고 있습니다. 각각의 이슈와 브랜치가 연결되어 작업이 순조롭게 진행될 수 있도록 하고 있습니다. 이를 통해 코드의 품질을 유지하고 충돌을 최소화할 수 있습니다.
    또한, 우리는 Husky와 같은 도구를 활용하여 코드의 품질을 일관되게 유지하고 있습니다. 커밋 메시지의 형식을 강제하고, 특정한 규칙을 준수하도록 설정하여 코드의 일관성을 유지하고 품질을 높이고 있습니다.
    마지막으로, 우리는 JSDoc을 사용하여 코드에 문서화를 진행하고 있습니다. 이를 통해 코드의 가독성을 높이고, 팀 내에서의 협업을 용이하게 하고 있습니다.
    1. 협업 방식
        • 협업 툴 : 노션, 깃허브, 디스코드, 슬랙, 슬랙 깃허브 훅
        스크립트
        우리 팀은 slack, notion, discord, figma그리고 github를 통해 효율적으로 소통하고 협업했습니다. 이 도구들을 통해 우리의 업무를 어떤식으로 진행했는지 설명해보겠습니다.
        첫 번째로, Slack을 이용하여 실시간 소통을 강화했습니다. Slack은 간편하게 메시지를 주고받을 수 있는 플랫폼으로, 프로젝트 내에서의 중요한 업무 안내나 긴급한 상황에 대한 소통에 큰 도움이 되었습니다.
        두 번째로, Notion을 활용하여 프로젝트 관리와 문서 공유를 체계적으로 진행했습니다. Notion은 다양한 형식의 문서를 효율적으로 작성하고 공유할 수 있는 도구로, 팀원들 간에 정보 공유가 원활하게 이뤄지도록 했습니다.
        세 번째로, Discord를 이용하여 음성 대화와 화면 공유를 통해 더욱 심도있는 의사소통이 가능했습니다. 특히, 프로젝트의 세부 사항이나 어려운 부분을 토론하거나 질문에 대한 실시간 답변을 주고받을 수 있어 효과적으로 협업할 수 있었습니다.
        네 번째로, GitHub를 통해 코드 버전 관리 및 협업 개발을 진행했습니다. GitHub를 이용하면 코드 변경 이력을 관리하고 여러 팀원이 동시에 작업할 수 있어 프로젝트의 안정성과 효율성을 동시에 유지할 수 있었습니다.
        마지막으로 Figma은 온라인 상에서 실시간으로 협업이 가능한 디자인 툴로, 여러 유저가 동시에 작업하고 의견을 주고받을 수 있도록 했습니다. 이를 통해 디자인 작업의 효율성을 높이고, 팀 내외에서 손쉽게 피드백을 주고받을 수 있었습니다.
        이렇게 다양한 협업 도구들을 조합하여 우리 팀은 프로젝트를 효율적으로 진행할 수 있었습니다. 각 도구들의 장점을 최대한 활용하여 신속하고 원활한 협업을 이루어내어, 우리의 프로젝트가 성공적으로 완수되도록 노력했습니다.
    1. 기능소개
    • 인증 v
      • 로그인
        • 공통 input, button을 재사용하였습니다.
        • input마다 validation을 수행합니다.
      • 회원가입
        • react-hook-form 라이브러리를 사용하여 공통 컴포넌트를 만들었습니다. 공통 Input을 재사용하여 개발 효율을 높였습니다.
        • 각 input에 해당하는 validation을 수행하고 에러 메세지를 실시간으로 보여줍니다.
        • 이메일 입력에서의 번거로움을 줄이기 위해 이메일 저장 기능을 추가했습니다.
        • 비밀번호란의 경우 사용성을 고려하여 눈알 모양 아이콘을 통해 input type을 변경하여 값이 보일 수 있도록 구현하였습니다.
    • 포스트
      • 포스트 등록 v
        • 가게 평가 가게 이름 가게 위치 가게 사진 후기 를 작성하고 포스트를 등록할 수 있습니다
        • 가게 이름 가게 위치 를 입력할 때 맛집 검색에서 구현한 카카오 지도 API에서 가게 이름 가게 위치 데이터를 불러와서 정확한 가게 이름과 가게 위치 정보를 제공할 수 있습니다.
        • 이미지를 추가하지 않아도 포스트 등록할 수 있습니다. (이미지는 최대 1개)
      • 포스트 수정
        • 내가 작성한 포스트를 수정할 수 있습니다.
        • 가게 이름과 가게 위치 항목은 수정할 수 없습니다.
      • 포스트 삭제
        • 내가 작성한 포스트를 삭제할 수 있습니다.
      • 포스트 정보 조회 v
          • 포스트 정보 조회 페이지
          등록한 포스트에 대한 상세한 정보를 확인할 수 있는 페이지입니다. 이 페이지에서는 유저가 등록한 식당에 대한 정보를 요청해 사용자에게 보여줍니다. 또한 코멘트를 등록해 해당 리뷰에 대한 의견을 남길 수 있고 또는 좋아요 버튼을 눌러 해당 리뷰에 대해 평가를 내릴 수 있습니다.
          좋아요의 잦은 요청을 방지하기 위해 디바운싱을 이용해 구현해 주었습니다.
      • 포스트 리스트
        • 포스트 데이터를 최신순 좋아요순 으로 필터링해주었습니다.
        • 채널 별 포스트의 리스트를 볼 수 있습니다.
    • 댓글
    • 좋아요
    • 알림
      • 다른 유저가 나의 포스트에 좋아요, 댓글을 작성하면 알림을 보내줍니다
      • 실시간 알림 기능을 구현하기 위해 react-query의 refetchInterval을 이용해서 refetch를 주기적으로 실행합니다.
    • 검색
      • 맛집 검색 v
        • 맛집의 주소를 가져오기 위해 카카오 지도 API를 이용하여 맛집 검색을 구현했습니다.
        • 맛집의 위치를 지도에 표시하고 마커를 클릭하면 카카오 지도로 이동하여 정보를 확인할 수 있습니다.
        • 같은 상호명인 경우 지도를 통해 정확한 위치를 확인할 수 있습니다.
      • 유저 검색
        • DM 메세지를 보내기 위해 유저를 검색할 수 있는 화면입니다.
        • 유저의 온라인 상태를 확인할 수 있고 DM 메세지를 보낼 수 있습니다.
      • 포스트 검색
        • 맛집 후기를 키워드를 통해 검색할 수 있습니다.
        • 키워드에 맞는 후기 리스트를 볼 수 있습니다.
    • DM 메세지 v
      • 다른 유저와 1대1 메세지를 보낼 수 있는 기능입니다.
      • 실시간 채팅 기능을 구현하기 위해 react-query의 refetchInterval을 이용하여 refetch를 주기적으로 실행합니다.
    • 마이페이지 v
      • 로그인이 되어있을 때는 자기 자신의 정보를 확인 수정가능하고 자신이 좋아요한 게시글 또는 자기가 작성한 글을 확인할 수 있스니다.
      • 로그인이 되어 있지 않았을 경우에는 자신의 프로필은 확인 할 수 없으나 다른 유저의 프로필은 확인할 수 있습니다.
     
     
    1. 회원 가입 로그인
    1. 포스트 리스트 보고
    1. 포스트 디테일 본 후 좋아요 / 댓글 달기
    1. 포스트 작성 / 작성 확인
    1. 포스트 / 사용자 검색하고 리스트 확인
    1. 메세지 하기
    1. 알림 확인