📌 Fiesta

인스타그램을 벤치마킹한 SNS 프로젝트
Fiesta 바로가기

1. 프로젝트 소개

• 제작 기간 : 2022년 10월 18일 ~ 12월 10일
• 참여 인원 : 5인 팀 프로젝트
• 프로젝트 개요
  • 인스타그램을 벤치마킹한 SNS 프로젝트
  • 타임라인, 채팅, 탐색(해시태그, 팔로우) 등 SNS에 최적화된 기능 제공
• 담당 기능
  • 전체 프로젝트 기획 및 개발 참여
  • 로그인, 회원가입, 비밀번호 재설정 등 회원 관련 기능
    • bcrypt를 활용하여 비밀번호 암호화
    • ajax를 활용하여 아이디/닉네임 중복검사, 유효성 검사
    • 이메일 인증
  • 검색 기능 및 AJAX를 활용한 검색 결과 페이지 조회
    • 웹, 태블릿, 모바일별 미디어 쿼리 적용
  • 계정, 해시태그 팔로우 기능

• 프로젝트 구조

2. 사용 기술

Back-end

Front-end

3. ERD 설계

4. 핵심 기능

로그인, 회원가입, 비밀번호 재설정 등 회원 관련 기능

• bcrypt를 활용하여 비밀번호 암호화
• ajax를 활용하여 아이디/닉네임 중복검사, 유효성 검사
• 이메일 인증

▶ Controller
▶ Service
▶ DAO

---

검색 기능 및 검색 결과 페이지 조회

• AJAX를 활용하여 검색 기능, 검색 결과 페이지 구현
• 관련 계정, 인기 게시글, 최근 게시글 조회

▶ Controller
▶ Service
▶ DAO
▶ mapper

---

계정, 해시태그 팔로우

• AJAX를 활용하여 실시간 팔로우, 언팔로우 가능

▶ Controller
▶ Service
▶ DAO

---

5. 트러블 슈팅

5.1. 브라우저 자동완성과 로그인 화면의 충돌 문제

문제 상황

• 아이디, 비밀번호에 focus가 적용되면 label이 위로 올라가게 만들었으나, 자동완성에 적용이 되지 않았다.
• 브라우저 자동완성으로 인해 자동완성된 아이디/비밀번호 값과 label이 겹쳐 보이는 문제 발생했다.

여러 방법을 써봤으나 해결되지 않았다.

1. 브라우저 자동완성을 끌 수 없음.
2. autofocus를 이용했으나 아이디 또는 비밀번호 중 하나에만 적용되었다. (jsp에 직접)
3. setTimeout()을 통해 시간 간격을 두고 아이디, 비밀번호에 focus()를 적용해 봤으나 해결되지 않음.
4. 클릭 이벤트가 발생하면 적용되는 것을 확인하고 body에 클릭 이벤트를 적용해 보았으나 해결되지 않음.

해결 방법

• readonly를 사용하여 해결하였다.
• 자동완성이 아이디, 비밀번호에 보이지 않도록 만들었다.
• (jsp) 아이디, 비밀번호에 readonly를 적용하였다.
• (js) 로드될 때, 아이디의 readonly 속성을 지우고, 아무 숫자나 썼다가 지운 다음, 포커스를 맞추게 하였다.
• (js) 비밀번호에 포커스가 가면 비밀번호의 readonly가 제거되는 방법을 사용하였다.
• ※ 아이디, 비밀번호를 로드와 동시에 readonly를 제거하면 기존의 문제가 발생

jsp

<div class="login-area">
  <input type="text" name="memberEmail"  id="memberEmail" value="" 
      maxlength="50" autocomplete="off" required readonly> 
  <label for="memberEmail">이메일</label>
</div>


<div class="login-area">
  <input type="password" name="memberPw" id="memberPw" value="" 
      maxlength="30" required readonly>           
  <label for="memberPw">비밀번호</label>
</div>

js

document.addEventListener("DOMContentLoaded", function(){
    memberEmail.removeAttribute("readonly");
    memberEmail.value = "123";
    memberEmail.value = "";
    memberEmail.focus();
})


memberPw.addEventListener("focus", function(){
    memberPw.removeAttribute("readonly");
})

해결 화면