나의 수업일지

인천 일보 아카데미 58~67일 차 개인 프로젝트 - NAVER 지식in 클론 코딩 (2)

2023. 6. 7. 12:43
  • 로그인 Form

CSS 미워

왼쪽이 실제 네이버 로그인 form이고 오른쪽이 클론코딩을 진행하며 뜯어 만든 로그인 form입니다

솔직히 외관은 비슷하게 할 필요는 없지만 보기 좋은 떡이 먹기에도 좋다고 만들면서 눈요기좀 했습니다

 

  • memberLogin.jsp

로그인을 시도했지만 email/pass가 불일치하거나 없는 email로 로그인하는 경우

 

<form action="/member/login" method="post" id="login-form-main">
    <div id="id_line">
        <div id="id-icon-div">
            <samp id="id-icon"></samp>
        </div>
    <input type="text" id="id_input" name="memberEmail" placeholder="아이디">
    </div>
    <div id="pass_line">
        <div id="pass-icon-div">
            <samp id="pass-icon"></samp>
        </div>
        <input type="password" id="pw_input" name="memberPassword" placeholder="비밀번호">
    </div>
    <span id="err-box">${loginFalse}</span>
        <a href="/member/save" id="Go-Save">
        회원가입
        </a>
    <div id="btn-form-inner">
        <button type="button" id="btn-login" onclick="sub_check()">
            <samp id="btn-login-txt"
            style="font-size: 20px;font-weight: 700;line-height: 24px;color: white">
            로그인
            </samp>
        </button>
    </div>
</form>

막상 뜯어보면 크게 특별한 기능은 없습니다

css때문에 엄청 길어졌습니다

 

 

 

  • memberLoging.jsp - script
<script>
    const memberEmail = document.getElementById('id_input');
    email을 작성하는 input
    const memberPass = document.getElementById('pw_input');
    password를 작성하는 input
    const subResult = document.getElementById('err-box');
    결과를 출력하는 span 태그
    const loginForm = document.getElementById('login-form-main');
    값을 넘겨주는 form태그
    const sub_check = () => {
        if(memberEmail.value.length == 0){
            subResult.innerHTML = "아이디를 입력해 주세요."
        } else if(memberPass.value.length == 0) {
            subResult.innerHTML = "비밀번호를 입력해 주세요."
        } else {
            subResult.innerHTML = "${loginFalse}";
            loginForm.submit();
        }
    }
</script>

아이디와 비밀번호가 있는지에 대한 판단은 서버에 넘어가서 확인을 해야하기 때문에

jsp에서는 최소한의 value 체크만 진행했습니다

 

  • MemberController - 생성자 주입 사용
    @GetMapping("/member/login")
    public String memberLogin() {
        return "/memberPage/memberLogin";
        로그인form으로 이동을 도와주는 get맵핑
    }

    @PostMapping("/member/login")
    로그인 form에서 전달한 값을 받아주는 post맵핑
    public String loginMember(@ModelAttribute MemberDTO memberDTO ,
                              전달 받은 값을 ModelAttribute 를 사용하여
                              바로 DTO에 담아 사용했습니다
                              HttpSession session , Model model) {
                              로그인이 성공했다면 사용될 session
                              성공 , 실패에 사용될 model 입니다
                              
        MemberDTO memberDB = memberService.loginMember(memberDTO);
        전달 받은 값을 매개변수로 사용하여 Service 로 넘겨줍니다
        db까지 전달을 마치고 리턴 받은 값을 memberDB에 담아줍니다 리턴 타입은 DTO입니다
        
        String loginFalse = "아이디 또는 비밀번호를 잘못 입력했습니다."+
        "<br>"+"입력하신 내용을 다시 확인해주세요.";
        로그인 실패시 전달될 문구를 Controller에서 만들었습니다
        
        String bestBoardCount = "6";
        index에서는 페이징이 사용된 list가 있기 때문에
        로그인 성공 시 함께 넘겨주어야하는 변수입니다
        
        if(memberDB != null) {
         db에서는 select로 해당 email/password의 유저가 있는지 확인을하고
         dto객체를 리턴해줍니다 그렇기 때문에 받은 값이 null아니라면
         회원이 맞기 때문에 로그인 처리를 진행합니다
            session.setAttribute("memberId",memberDB.getId());
            세션에 해당 유저의 id값을 담아줍니다
            model.addAttribute("memberDTO",memberDB);
            index에서 사용할 유저의 정보를 model에 담아 함께 넘어갑니다
            return "redirect:/";
        } else {
            model.addAttribute("loginFalse",loginFalse);
            db에서 받아온 dto객체가 null이라면 로그인 실패 문구와 함께
            다시 로그인 페이지로 넘어갑니다
            return "/memberPage/memberLogin";
        }

    }

 

  • MemberService , MemberRepository
@Service
    public MemberDTO loginMember(MemberDTO memberDTO) {
        return memberRepository.loginMember(memberDTO);
    }

@Repository
    public MemberDTO loginMember(MemberDTO memberDTO) {
        return sql.selectOne("naverMember.loginMember",memberDTO);
    }

Service와 Repository에서는 별다른 작업을 수행하지 않습니다

Mapper까지 값을 이동하고 리턴 받은 값을 controller에 전달만 해줍니다

 

  • Mapper
    <select id="loginMember" parameterType="member" resultType="member">
        select *
        from member_table
        where (memberEmail = #{memberEmail} and memberPassword = #{memberPassword})
           or (memberDomain = #{memberEmail} and memberPassword = #{memberPassword})
    </select>

위에서 설명한것 처럼 입력받은 값으 email / password가 있는지 확인을 하고

dto객체를 리턴해줍니다 사용자가 도메인까지 붙여 로그인을 진행하는 상황을 대비하여

domain과 pass가 맞는 상황까지 쿼리문에 작성했습니다

 

 

로그인에 성공하면 index로 넘어가고 로그인 버튼이 유저info로 변경됩니다

'나의 수업일지' 카테고리의 다른 글

인천 일보 아카데미 58~67일 차 개인 프로젝트 - NAVER 지식in 클론 코딩 (4)  (0) 2023.06.07
인천 일보 아카데미 58~67일 차 개인 프로젝트 - NAVER 지식in 클론 코딩 (3)  (0) 2023.06.07
인천 일보 아카데미 58~67일 차 개인 프로젝트 시작 - NAVER 지식in 클론 코딩 (1)  (0) 2023.06.07
인천 일보 아카데미 56일~57일차 -회원제 게시판 만들기 - 사진 프리뷰(다중) / 파일 이름 가져오기(다중) / 버튼 - onclick 실행 함수 변경하기  (0) 2023.05.15
인천 일보 아카데미 55일차 -회원제 게시판 만들기 - 회원가입 - 사진 프리뷰 / 회원가입 - 비밀번호 정규식 제약 조건 / 로그인 경고문  (0) 2023.05.15
'나의 수업일지' 카테고리의 다른 글
  • 인천 일보 아카데미 58~67일 차 개인 프로젝트 - NAVER 지식in 클론 코딩 (4)
  • 인천 일보 아카데미 58~67일 차 개인 프로젝트 - NAVER 지식in 클론 코딩 (3)
  • 인천 일보 아카데미 58~67일 차 개인 프로젝트 시작 - NAVER 지식in 클론 코딩 (1)
  • 인천 일보 아카데미 56일~57일차 -회원제 게시판 만들기 - 사진 프리뷰(다중) / 파일 이름 가져오기(다중) / 버튼 - onclick 실행 함수 변경하기
GUPING
GUPING
안녕하세요 개발자를 꿈꾸는 GUPING 입니다
GUPING
개발자를 꿈꾸는 GUPING
GUPING
전체
오늘
어제
  • 분류 전체보기 (89)
    • 나의 수업일지 (88)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 파일 이름 가져오기
  • 버튼 이벤트 변경
  • 검색
  • 여러사진프리뷰
  • 검색결과페이징
  • 로그인게시판
  • 개힘드렁
  • 업로드파일이름출력
  • 파일이름(다중)
  • 삭제
  • 수정
  • naver
  • realative
  • 페이징Controller
  • Ajax
  • 로그인 경고문
  • 틀만들기
  • 클래스 이름 변경
  • 답변 채택
  • Paging
  • PAGE
  • 버튼 이벤트 함수 변경
  • 페이징
  • 버튼2가지이벤트
  • 로그인form
  • 지식인
  • pagingAjax
  • 네이버
  • 다중프리뷰
  • 파일이름가져오기

최근 댓글

최근 글

hELLO · Designed By 정상우.
GUPING
인천 일보 아카데미 58~67일 차 개인 프로젝트 - NAVER 지식in 클론 코딩 (2)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.