home
블로그
home

교육생 결과물 허브

React(프론트엔드)

Search
React
•
분양모음집은 전국의 분양 정보를 한 눈에 확인할 수 있는 분양 정보 제공 서비스입니다.
•
지역 및 분양 형태에 따른 분양 정보 필터링 기능을 제공합니다.
•
분양 정보를 지도와 캘린더에서도 확인할 수 있습니다.
•
Github Repository:
•
Team Notion:

서비스 아키텍쳐

Next.js

Typescript

Recoil

React Query

Firebase

[분양모음집] 분양 정보 제공 서비스
React

️부트캠프 프로젝트를 한곳에서 정리하고 피드백을 받아보자!

프로젝트의 SA, 최종 프로젝트 정리 및 회고 등 여러곳에 흩어져 있던 정보들을 한 곳에 모아놓고,
다양한 사람들의 피드백을 받아 볼 수 있는 공간입니다.
[Codefolio] 프로젝트 정보를 한 곳에 모으고, 피드백을 받아볼 수 있는 서비스
위치기반 사진 명소 찾기 사이트
•
Github Repository : picspot
•
PicSpot은 Picture / Pick + Spot의 약자로 사진과 장소를 고르는 것을 뜻합니다. 가고 싶은 여행지 혹은 여행 중에 사진 명소들을 일목요연하게 볼 수 있는 공유 플렛폼입니다. 지도를 통해 위치를 간편하게 찾을 수 있습니다.

아키텍처

기술적 의사결정

서비스 특징에 따른 기준
•
이미지 데이터를 많이 다룬다. → 이미지 최적화가 필요하다.
[픽스팟] 위치 기반 사진 스팟 공유 플랫폼
React
아키텍쳐
기술적 의사결정
성능 개선
[이음] 작은 재능부터 큰 재능까지 거래할 수 있는 비대면 재능 매칭 플랫폼

 동물 병원별로 천차만별인 병원비, 펫피탈에서 확인하세요.

동물 병원 별로 손쉽게 비용 정보를 찾을 수 있으며, 다른 유저와 반려 동물에 관한 궁금증을 나눌 수 있습니다.

 아키텍쳐

기술적 의사 결정

주요 기술

트러블 슈팅

지도 페이지 렌더링 오류가 발생하는 부분
[펫피탈] 동물 병원별로 천차만별인 병원비, 펫피탈에서 확인하세요.
React

오늘의 혼합주 OHZU

본인의 취향에 관심이 많고 혼합주를 선호하는 2030 세대를 위한 자신만의 혼합주 레시피와 비율을 공유하는 커뮤니티 입니다.

  OHZU 프론트엔드 목표

직관적인 UX/UI 구성

•
페이지에 들어왔을 때, 5~10초 안에 어떤 컨셉의 서비스인지 유저가 인지할 수 있도록 할 것
•
어떤 버튼을 누르거나, 액션을 취할 때 유저가 예상하는 것들을 보여지도록 할 것
•
모바일 환경에서도 위와 같은 목표를 이루도록 할 것

 OHZU 아키텍처 구성

 OHZU 사용 스택 및 기술적 의사 결정

[OHZU] 나만의 혼합주 레시피 공유 사이트
React

타쿠의 식탁

다양한 애니메이션 속 음식 레시피를 제공하는 “타쿠의 식탁”을 소개합니다.
나만의 레시피를 만들어 공유하고 공통의 관심사를 가진 유저들과 소통해보세요.
타쿠의 식탁 웹사이트

 아키텍쳐

•
프론트엔드 : NEXT.js, React, tailwind,typescript, react-query, react-player, react-quill,fuse.js
•
DB관리(백엔드) : TMDB ⇒ REST API로 서버와 실시간 통신, firebase 이용하여 데이터 관리
•
협력툴 : 깃, 깃허브, 슬랙, 노션 , 구글 스프레드시트
•
배포 : vercel
[타쿠의 식탁] 애니메이션 속 음식 레시피를 공유하는 커뮤니티
React
•
GYMTIVATION (득근파트너스, Gym + Motivation)

서비스 아키텍처

•
AWS로 배포된 저희 웹에 유저가 접속하면 보시는 바와 같이 다양한 서비스를 이용할 수 있습니다.

기술적 의사결정

 주요 기술

•
Next.js
•
Soket.io
•
Firebase
•
Kakao map
•
React-Query
[짐티베이션] 혼자 운동할 때 동기부여가 필요한 사람들을 위한 커뮤니티
React
Load more
Search
Section B

올래?

1인가구 구성원 또는, 사생활에 깊이 연관되지 않는 가벼운 만남으로 관계를 시작하고 싶은 신세대에게 만남 서비스를 제공합니다.

아키텍처

기술적 의사결정

트러블 슈팅

[올래] 1인 가구 및 신세대 맞춤형 만남 서비스 제공 플랫폼
[모코] 모각코(모여서 각자 코딩)를 위한 매칭 서비스

Develop Together, Grow Together, Detto

•
디토는 개발자를 위한 사이드 프로젝트 팀 매칭 플랫폼입니다.
•
현재 모집 중인 사이드 프로젝트들을 포지션 별로 확인할 수 있습니다.
•
프로젝트 모집 글에 지원하고 초대받는 과정을 통해 더 좋은 시너지를 낼 수 있는 팀원을 만날 수 있습니다.

아키텍처

주요 기능 중 지원하기 로직 플로우

아래 플로우에 대한 상세 설명은 발표회에서 들으실 수 있습니다.
[디토] 개발자를 위한 사이드 프로젝트 팀 매칭 플랫폼

프로젝트명: TRIPICK

안녕하세요! 저희 TRIPICK은 국내 여행지와 주변 숙박/식당을 추천해드리는 사이트입니다.
혼자 여행하거나 친구들과 함께 떠나려는 분들께 여행지 아이디어를 제공합니다.
또한 여행지 반경20km 내에있는 숙박과 맛집 정보를 찾고 계신 분들을 위해 서비스를 제공합니다.
b3_finalproject
dwg787

Architecture

[트리픽] 국내 여행지와 및 주변 숙박/식당 추천 서비스

당신의 여행 플래너 서포팅 사이트!

여행지 추천 및 정보 제공 , 여행에 필요한 일정 플래너 기능을 제공합니다.

아키텍쳐

핵심 기능

Tour Api를 이용한 도시 검색 , 관광지 검색
카카오 지도 api를 이용한 지역 정보 및 일정 관리 기능
관광지 정보 열람 및 유사 관광지 추천 기능
관광지 후기 및 평점 작성기능
일정 만들기 기능

기술적 의사결정

[Sharpa] 당신의 여행 스케쥴링 플래너 사이트

아키텍쳐

기술적 의사 결정

트러블 슈팅

WebRTC n 대 n 실시간 화상채팅 관련
친구 기능 관련 랜더링 문제

주요 기능

[Steam Plus] 스팀 API 기반 게임 실시간 화상채팅 서비스
[팝콘] 전국 팝업스토어를 한 눈에 볼 수 있는 서비스

Node.js(백엔드)

Search

프로젝트 소개

서비스 기획 의도

개발자의, 개발자에 의한, 개발자를 위한 만남 서비스! 상대의 프로필을 보고 이상형을 찾을 수도 있고, 당신에게 필요한 기술을 가진 협업자를 찾을 수도 있습니다!

서비스 핵심 기능

서비스 아키텍처

Merge OverFlow
Node.js

프로젝트 소개

“대 구독 시대”에 필요한 구독 관리 사이트

서비스 기획 의도

 내가 구독하는 플랫폼을 한 번에 볼 수 있는 ”구독 서비스 현황 확인”
 결제 날을 미리 알려주는 “구독 서비스 결제일 알림”
 구독 플랫폼의 계정 정보를 안전하게 저장하는 ”구독 계정 정보 보안”
 인기 플랫폼을 한 눈에 볼 수 있는 ”구독 서비스 랭킹 제공”
GUBU(구독부자)
Node.js

프로젝트 소개

서비스 기획 의도

우리 사회가 급속도로 고령화되면서, 은퇴 후의 삶이 중요한 사회적 이슈로 대두되고 있습니다. 저희 서비스는 이러한 사회적 요구에 부응하여, 은퇴자분들에게 의미 있는 소셜 연결과 지속적인 학습 기회를 제공하고자 합니다.

서비스 핵심 기능

시클시클
Node.js

Pupfluencer | 펍플루언서

프로젝트 소개

•
펍플루언서란 [Puppy + Influencer]의 합성어입니다.
•
너무 귀엽고 웃긴 우리 강아지의 모습을 나만 보기 아깝다고 느끼실 때
•
사진과 동영상으로 우리 강아지의 깜찍한 순간을 기록하고 공유하는 강아지 자랑 SNS
댕댕이 자랑 커뮤니티 SNS Pupfluencer 입니다.

서비스 소개 <br>

•
강아지 프로필을 등록하여 간단한 정보를 기록할 수 있어요
•
사진, 동영상 게시판을 통해 우리 댕댕이의 모습을 공유할 수 있어요
•
ToDo 리스트를 통해 산책하기, 약 먹이기, 미용하기 등 해야할 일들을 기록하고 관리할 수 있어요
•
DM 기능을 통해 다른 귀여운 댕댕이를 키우는 분들과 소통할 수 있어요

프로젝트 아키텍쳐

[펍플루언서]강아지 자랑 SNS
React
Node.js

프로젝트

Stock Pyramid는 경매 이벤트의 대용량 트래픽을 처리하기 위한 node.js 기반 어플리케이션 시스템 구축 프로젝트입니다
keyword : #대용량 트래픽 처리 #검색 속도 향상 #성능 테스트 #nestjs #DB이중화

 기획 배경

대용량 트래픽 처리를 기술적 도전 과제로 삼은 이유

안정적인 시스템을 구축하는 일은 시스템의 신뢰성을 시험하고 평가하는 과정을 수반합니다. 평가를 위해 인프라, 네트워크, DB 등 다양한 요소를 고민하게 됩니다. 이러한 경험은 백엔드 엔지니어로서 기능 구현 뿐만 아니라 한 줄의 코드가 전체 시스템의 관점에 어떤 영향을 미치는지 종합적으로 판단하는 경험을 얻을 수 있는 최적의 프로젝트라 판단했습니다.

 구현 API

•
생성
•
조회
[Stock Pyramid]경매 이벤트의 대용량 트래픽을 처리하기 위한 node.js 기반 어플리케이션 시스템
Node.js
사진 공유 플랫폼, 찰칵!

서비스 아키텍처

주요기능

포토스팟 콜렉션

[찰칵] 여기저기 흩어져 있는 출사 관련 정보 및 커뮤니티를 한 곳에서
Node.js
[투두버킷] 투두리스트와 버킷리스트를 공유하는 서비스
Node.js

소모임 커뮤니티 with 캘린더

소모임 With 캘린더 소모임에 가입하여 함께 이야기를 나누고 새로운 사람들을 만나보세요 그룹 모임에 참여하고 취미를 공유하며 즐거운 시간을 보내세요 LounGe에서 좋은 인연을 만들어 연인이나 친구를 만들어보세요 언제든지 LounGe를 방문하여 새로운 경험과 추억을 만들어보세요

아키텍처

주요 기술

•
TypeScript
•
Nest JS
•
MySQL
•
TypeORM
•
Redis
•
ElasticSearch
[LounGe] 소모임 커뮤니티 With 캘린더
Node.js
캠핑장 & 캠핑 용품 & 캠핑 요리 레시피 등 모든 정보를 한눈에 볼 수 있는 커뮤니티 사이트
캠핑을 좋아하는 사람도, 관심 없었던 사람도 쉽게 접근할 수 있도록
다양한 사람들이 경험을 공유하며 함께 어우러지는 장을 마련하는 것이 목표입니다!

아키텍처

주요 기술

기술적 의사 결정

•
elastic search cloud : 기존 like로 검색을 하게 되면 쿼리 증가로 인한 사이트 속도 저하 및 정확한 검색 결과 산출이 어려운 문제가 있었고, 서버에 부담이 가지 않으며 빠르고 정확한 검색 결과 산출을 위해 사용
[내일바로캠핑] 캠핑 관련 정보를 한눈에 볼 수 있는 커뮤니티
Node.js
냐옹상회 서비스 소개
가격으로만 소통하자 Try your Deal! 국내 중고거래 시장은 점점 커지고 있습니다. 커져가는 만큼 많은 불편한 점들이 생겨나며 그 중 하나는 가격협상을 하며 얻는 스트레스라고 생각을 합니다. 그래서 저희는 가격을 협상하는데 의사소통을 없애보려고 했습니다. 의사소통 없이 오직 가격으로만 결정하자 그것이 저희가 서비스를 기획하게된 계기 입니다.
테스트용 ID : test01@gmail.com 테스트용 : PW : 1234
관리자 : https://5gnunfleamarket.shop/admin/login
id : admin1 pw : admin1
아키텍처
기술적 의사 결정
트러블 슈팅
[냐옹상회] 가격으로만 소통하자 Try your Deal!
Node.js

프로젝트 소개

‘식스팩‘ 은 전국의 운동시설을 중개하는 구독형 플랫폼 서비스 입니다.

서비스 기획 배경
서비스 둘러보기

서비스 아키텍처

기술스택

기술적 의사결정

모바일 기반 서비스
Access Token & Refresh Token
cache-aside pattern
Elasticsearch
AWS EC2 ⇒ GCP VM인스턴스로 변경
[식스팩] 전국의 모든 운동을 내 맘대로!
Node.js

JOBFIT

여러 채용공고 사이트들의 IT 분야 채용공고를 한 곳에 모아 원하는 조건에 맞는 채용공고를 검색하고, 회원의 정보를 바탕으로 알고리즘을 통해 채용공고를 추천 받을 수 있는 서비스.
•
서비스 둘러보기
•
Github Repository

서비스 아키텍처

주요 기술 스택 및 기술적 의사결정

NestJS

TypeORM

Axios

[잡핏] IT 분야 채용공고를 검색하고 추천 받을 수 있는 서비스
Node.js

무인냥품

우리 동네 위치 기반, 고양이 돌봄 품앗이 서비스

무인냥품은 반려인이 긴 시간 외출을 할 때
집에 혼자 있을 우리 고양이를 위한 플랫폼입니다.
동네 위치를 기반으로 동네 집사들끼리 돌봄 품앗이를 할 수 있는 서비스를 비롯해,
무료 나눔과 반려묘 정보들을 나눌 수 있는 고양이 집사들을 위한 커뮤니티 서비스입니다

서비스 아키텍처

인포메이션 아키텍처

[무인냥품] 우리 동네 위치 기반, 고양이 돌봄 품앗이 서비스
Node.js
프로젝트를 같이 할 팀원들을 모으는 공고 모집 글을 올리고 관리할 수 있는 사이트

아키텍쳐

기술적 의사결정 & 트러블슈팅

Express vs. Nest
nunjucks
[NoAFK] 사이드 프로젝트 플랫폼
Node.js

홈 파티 주최 및 참가 소셜 커뮤니티 서비스

증가하는 1인 가구 시대! 파티를 열어 새로운 친구를 사귀세요!
”모아바”는 파티를 즐기고 싶지만 1인 가구이거나 동네 친구가 없어 즐길 수 없을 때, 내가 호스트 또는 게스트가 되어 취향에 맞게 참여할 수 있는 소셜 네트워크 서비스입니다.

  서비스 아키텍처

기술적 의사결정

 주요 기술 및 기능

[모아바] 홈 파티를 주최하여 새로운 친구를 사귀는 소셜 네트워킹 플랫폼
Node.js

아키텍처

기술적 의사결정

[Gol:D] 캠핑 장소 대여 서비스 및 관리 시스템
Node.js
여러 사람들과 같이 코딩하고싶을 때 !
다양한 이벤트 알림을 받고 싶을 때 !
Sparta Commu-Club 은 여러분과 함께 공부할 것입니다.

Sparta Commu-Club

서비스 아키텍처

기술적 의사결정

[스파르타커뮤클럽] 스파르타 수료생을 위한 똑똑한 커뮤니티
Node.js
당신만을 위한 특별한 병원 찾기 모두의 병원 당신의 현재 위치를 기준으로 우리 플랫폼과 파트너쉽을 맺은 병원 정보와 진료 예약을 할 수 있는 환경을 제공합니다.
•
모두의 병원 링크

서비스 아키텍처

주요 기능

•
위치 기반 주변 병원 찾기
•
자체 예약 시스템
•
병원 측 예약 관리 시스템

내 위치 기반으로 주변 병원을 찾기

•
병원 찾기를 누르면 내 위치를 기반으로 저희 플랫폼과 파트너쉽을 맺은 병원들이 보입니다.
[모두의 병원] 내 위치 기반 병원 찾기 및 예약 시스템
Node.js

Spring(백엔드)

Search
Spring

프로젝트 소개

[우리 모두 철학자] 일상에서 시작된 궁금한 혹은 작은 이슈를 기반으로 생성되는 토론 커뮤니티 서비스

1. 프로젝트 소개

프로젝트 소개

2. 개발 환경

개발 환경

서비스 아키텍처

3. 서비스 기능

•
회원 가입 (이메일 본인인증) & 로그인
•
프로필 변경
•
상품 등록
•
상품 검색
•
관심 목록 추가
•
유저 신고
•
동네 설정 (ip 위치 정보)
[낙낙상회] 넉넉한 마음으로 서로 마음을 주고 받는 중고 거래 플랫폼
Spring

 아키텍쳐

 기술적 의사결정

 트러블 슈팅

Cascade
CORS
EC2 프리티어 메모리부족

 주요 기능

 메인 페이지

[펫팸] 반려동물 자랑 커뮤니티
Spring

오늘 뭐 들었니?

오늘 하루의 시작과 끝에 느꼈던 감정과 생각을 노래와 함께 공유 해보세요.

주요 기능

•
멜론 사이트의 노래 정보 크롤링 및 DB 저장 (음원X)
•
게시글 작성 시 DB에 저장된 노래를 검색하여 첨부
•
게시글 작성 시 태그를 첨부하여 해당 태그를 키워드로 게시물 검색
•
원하는 유저를 팔로우 및 팔로우/팔로잉 리스트 확인
•
좋아하는 게시물 및 댓글에 좋아요 및 좋아요 취소
•
유저의 프로필 페이지에서 프로필 및 유저의 게시글 목록 확인
•
지난 24시간 동안 작성된 게시물 기준으로, 많이 작성된 노래 순위 확인

아키텍처

[오들] 하루의 시작과 끝에 느꼈던 감정과 생각을 노래와 함께 공유하는 사이트
Spring
스프링 프로젝트 ‘올라’ 입니다. 취미공유 커뮤니티 서비스로, 등산과 관련된 관심사를 해시태그로 만들어 다양하게 공유할 수 있는 방법을 구현했습니다.

 주요기능

관심사가 비슷한 친구를 랜덤으로 추천

•
회원가입할 때 고른 해시태그를 비교하여 하나 이상 겹칠 경우 추천 친구로 노출됩니다.

동적쿼리와 해시태그를 이용한 게시글 조회

•
산 높이, 점수, 추천계절, 해시태그 등 다양한 조건으로 필터링 조회를 구현했습니다.

실시간 채팅을 통한 크루원 모집

•
채팅방을 통해 크루원을 모집할 수 있도록 구현했습니다.
•
최대인원과 현재인원을 추가하여 크루원 모집을 마감할 수 있도록 하였습니다.

조건 충족시 자동 등업

•
커뮤니티 게시글을 5번 작성 시 ‘등산매니아’로 자동 등업됩니다.
•
크루원 모집글을 5번 작성 시 ‘산신령’으로 자동 등업됩니다.
[올라] 관심사로 공유하는 등산 크루 모집 커뮤니티
Spring

코드 컨벤션 & RESTful API

프로젝트 개요

주제 및 선정 배경

프로젝트 팀 구성 및 역할

주차별 프로젝트 타임라인

JIRA를 활용한 프로젝트 업무관리

API 문서(Postman Publish Documentation)

서비스 아키텍쳐

MVP 시연

[디벨로니티] 입문&주니어&시니어 개발자 모두에게 가치 있는 커뮤니티
Spring
Load more