중고거래 사이트 프로젝트

✅ 프로젝트 개요

• 중고 거래 사이트에서 사용자끼리 거래 후 점수 평가를 하면서 거래자에 대한 신용도를 확인하는 동시에 내가 거래하고 싶은 물품의 시세를 확인할 수 있는 사이트를 제공

✅ 프로젝트 일정

• 6.12 ~ 6.14 : 팀원들과 같이 주제에 대해서 이야기해보며, 좋은 아이디어의 주제를 선정
• 6.15 ~ 6.16 : 각자 담당 기능 및 페이지에 대해서 UI까지 구상
• 6.16 ~ 6.19 : 기능정의서 및 ERD설계
• 6.18 ~ 6.29 : 위의 내용을 바탕으로 개발과 3일정도 테스트를 동시에 병행

✅ 프로젝트 참여인원

• 팀장을 진행하면서, 개발 부분에서 기능부분에 조금 더 역할을 담당했으며, 로그인,회원가입,아이디찾기, 비밀번호찾기, 상품글등록 및 수정, 관리자 페이지를 맡았습니다.

✅ 프로젝트 구성

• 국비 학원에서 3개월간 공부한 것을 바탕으로 자바, html, css, javascript, oracle을 바탕으로 여러 기술들을 적용하며 프로젝트를 진행

✅ 내가 맡은 부분 코드 구현

주로 어려웠던 부분 + 중요한 부분에 대해서만 코드로 남기려고 한다

• header와 footer는 모든페이지가 동일하게 적용
• 아이디 저장과 아이디 식별을 위해서 ✅ header 부분에 세션과 쿠키를 사용

Member loginMember = (Member) session.getAttribute("loginMember");//여기 로그인멤버 
Cookie[] cookies = request.getCookies(); // 존재하는 쿠키들 다 갖고옴 
String saveId = null;
if (cookies != null) {
   for (Cookie c : cookies) {   // 쿠키 ->  키 : 값  
      if (c.getName().equals("saveId")) { // 쿠키중 유저아이디가 저장된것이 있으면 (키로 찾기)
   saveId = c.getValue(); // 해당 쿠키의 키에 대응하는 값(userId)을 대입함
   break;
      }
   }
}

✅ 로그인 서블릿 부분

String saveId=request.getParameter("saveId");
		// 아이디 저장부분에 check가 되면 on
		// 아이디 저장부분에 check가 안되면 null
		if(saveId!=null) {  // 저장된값이 널이 아니면
			Cookie c = new Cookie("saveId",userId); // 쿠키생성
			c.setMaxAge(60*60*24*7); 
			response.addCookie(c);  // 쿠키만들어줌
		}else {
			Cookie c = new Cookie("saveId","");
			c.setMaxAge(0); // 쿠키 삭제
			response.addCookie(c);
		}
        
//2. DB에 접속해서 id와 password가 일치하는 회원이 있는지 확인
Member loginMember = new MemberService().selectByUserIdAndPw(userId, password);
		
// loginMember null을 기준으로 로그인처리 여부를 결정할 수 있음
		if(loginMember!=null) {
			HttpSession session=request.getSession();
			session.setAttribute("loginMember", loginMember);
            // 세션에 저장하면 sendRedirect해도 데이터가 날라가지 않음
			response.sendRedirect(request.getContextPath());
          }

✅ 아이디 찾기 부분 jsp

• button 타입에는 3가지가 있다 (reset, submit, button)
• button 타입을 지정하지 않으면 기본적으로 submit 으로 작동된다
  
  💡 자바스크립트 이벤트 실행 목적이 있다면
  --> button type="button" 으로 바꾼다
  --> button type="button" 은 form 값으로 넘어가지 않는다!
  
  💡 form으로 넘기고 싶지만, 엔터를 눌렀을 때 바로 값을 넘기고 싶지는 않을 때!
  -> script 문 안에 엔터를 눌렀을 때, 이벤트 발생을 막는다!

<section class="login">
	<form action="<%=request.getContextPath()%>/findId.do" id="findidfrm">
		<h2>아이디 찾기</h2>
		<ul>
			<li><input type="text" placeholder="이름" title="이름입력" id="nameId" name="name"></li>
			<li><input type="email" placeholder="이메일" title="이메일입력" id="emailId" name="email"></li>
			<!-- <li><input type="submit" value="아이디찾기"></li> -->
			<li><button>아이디찾기</button></li>
		</ul>
	</form>
</section>

<script>
  $('input[type="text"]').keydown(function() {  // 엔터를 눌렀을 때 이벤트 막기
    if (event.keyCode === 13) {
        event.preventDefault();
    }
});

$('input[type="email"]').keydown(function() { // 엔터를 눌렀을 때 이벤트 막기
    if (event.keyCode === 13) {
        event.preventDefault();
    }
});
</script>

✅ 아이디 찾기 완료 화면 jsp

• 서블릿을 통해서 아이디를 찾았을 경우
• 해당 찾은 아이디를 js를 통해 일부분의 아이디만 보여주는 작업

<section class="findIdResult">
	<h1>아이디 조회 결과</h1>
	<div class="findIdResultDiv">
		<div class="findIdFlex">
			<%-- <img src="<%=request.getContextPath()%>/images/login/hifiveimg.png" class="hifiveImg" height="200px" width="200px"> --%>
			<h1 class="findIdValue"><%=request.getAttribute("userId")%></h1>
		</div>
	</div>

<script>
    const len = document.querySelector(".findIdValue").innerHTML.length;
	// h1은 innerHTML이 문구임
    if(len > 6){ // 해당 아이디에서 첫글자와 마지막글자에 *를 붙여줌
        const id=document.querySelector(".findIdValue").innerHTML.substring(1,len-1);
        document.querySelector(".findIdValue").innerHTML = "*"+id+"*";
    }
</script>

다음 글은 비밀번호 찾기에 대해서 알아보기로 해보자