멋쟁이사자처럼 11기 중앙해커톤 상명대학교 Logged.me 팀
수도권, 지방 지역구분 없이 누구든지 자유롭게 기업의 모집공고를 확인할 수 있고, 공모전 등 대외활동에 참여할 기회를 얻을 수 있으며, 어떤 기업이던지 전국에 있는 숨은 고수들, 원하는 인재들을 헤드헌팅 할 수 있습니다.
| 역할 | 담당 | |
|---|---|---|
| 팀장 | 프론트엔드 | 김연출 |
| 팀장 | 백엔드 | 김동주 |
| 팀원 | 백엔드 | 백승우 |
| 팀원 | 프론트엔드 | 민기홍 |
| 팀원 | 프론트엔드 | 이유민 |
| 팀원 | 기획/디자인 | 정은희 |
Ⅰ) 기술 스택
Ⅱ) 프로젝트 사용해보기
Ⅲ) 주요 기능
Ⅳ) UI/UX
Ⅴ) 프로젝트 구현 기술
- Vanilla JS & JQuery
- DJango Rest FrameWork
- EC2
-
RDS & EC2
-
mockup API를 통한 FE-BE 연계 작업
-
git - slack 연동
-
debounce, throttle을 이용한 server traffic management
-
git action을 이용한 CI/CD
-
http://13.125.224.114/ 에서 서비스를 이용할 수 있습니다.
-
다음 ID로 로그인하여 서비스 이용이 가능합니다.
- ID : test@test.com
- PW : 1234
-
회원가입을 통해서도 서비스 이용이 가능합니다.
※ 프로젝트에 사용된 ERD & API는 다음 사이트에 정리하였습니다.
- Notion : https://www.notion.so/likelionsmu/ERD-970d545ed2c34fea882b4e180e637583?pvs=4
- Notion: https://www.notion.so/likelionsmu/API-2c4581acdbf94e0e9a6437c4447eeee0?pvs=4
-
비회원 시 로그인, 회원가입, 이메일 인증, 비밀번호 재설정 기능을 사용할 수 있습니다.
-
프로필 창에서 profile image, handle, name 등을 변경할 수 있습니다.
-
태그 추천 및 검색 시 계정 추천이 제공됩니다.
-
피드 작성 및 수정, 프로필 작성 및 수정, 팔로우 및 팔로우 취소가 가능합니다.
-
개인 계정 / 기업 계정 생성이 가능합니다.
-
계정 유형에 맞게 서비스 사용이 가능합니다.
- 자신이 참가한 공모전, 대외활동, 동아리 등의 이력을 피드에 작성하여 하나의 포트폴리오처럼 사용이 가능합니다.
-
회사에 적합한 인재에게 스카웃 제의 및 자신의 기업을 홍보하는 글을 작성할 수 있습니다.
-
개인 사용자에게 뱃지 부여가 가능합니다.
이메일 인증을 통해 회원가입이 가능합니다. 실시간 유효성 검사를 적용했습니다.
회원가입한 정보로 로그인할 수 있습니다.
등록한 이메일을 사용해 인증 코드로 비밀번호 초기화가 가능합니다
친구 ID를 입력하여 친구를 추가할 수 있습니다. 만약 이미 친구라면 1:1 채팅 버튼이 나옵니다.
사용자가 팔로우한 기업 계정의 피드를 볼 수 있습니다.
좋아요, 댓글, 링크 공유, 스크랩 기능의 사용이 가능합니다.
사용자가 팔로우한 개인 계정의 피드를 볼 수 있습니다.
좋아요, 댓글, 링크 공유, 스크랩 기능의 사용이 가능합니다.
사용자가 피드에 댓글을 남길 수 있습니다.
본인의 댓글이라면 삭제가 가능합니다.
사용자가 자신 또는 다른 사용자의 프로필을 방문할 수 있습니다.
부여(기업)하거나 부여받은(개인) 뱃지를 확인할 수 있습니다.
팔로우, 팔로워 목록 및 피드, name, handle을 확인할 수 있습니다.
사용자, 피드, 해쉬태그를 검색할 수 있습니다.
debounce를 사용하여 traffic을 제어합니다.
기업사용자는 개인사용자에게 뱃지를 부여할 수 있습니다.
시나리오에 따라 부여합니다.
팔로우, 팔로워 리스트를 확인할 수 있습니다.
팔로우 요청과 취소가 가능합니다.
사용자에게 일어난 이슈를 확인할 수 있습니다.
게시물 작성 및 수정이 가능합니다.
ajax network traffic management를 위해 debounce로 search 시 debounce 사용
var timer;
$(".follow_list_main_search_input").on("input", function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
const query = $(".follow_list_main_search_input").val();
// console.log(query);
$(".item_userName").each(function () {
var personName = $(this).text().toLowerCase();
// console.log(personName);
if (personName.includes(query)) {
$(this).parent().show();
} else {
$(this).parent().hide();
}
});
}, 300);
});
......