인천 일보 아카데미 55일차 -회원제 게시판 만들기 - 회원가입 - 사진 프리뷰 / 회원가입 - 비밀번호 정규식 제약 조건 / 로그인 경고문

• 완성본 git

 

GitHub - guguping/member_board: ICIA - DAY 54 ~ ING

 

 

• 회원가입 - 업로드 사진 미리보기 / 프리뷰

save는 지금까지 배운 내용을 사용하였기 때문에

따로 추가되는 부분이 없습니다 하지만 사진을 업로드하는 과정에서

사용자가 사진을 올렸을 때 이미지를 보여주기 위한 프리뷰를 추가하였습니다

 

memberSave.jsp

<tr>
    <th>
        <label for="memberFile">증명사진</label>
        label을 사용하여 text를 클릭해도 input file이 실행됨
        
        <button style="display: inline-block" type="button">
            <label for="memberFile">등록</label>
        </button>
        일반 input file은 이미지가 이쁘지 않고 Chrome으로 작동되는 경우
        파일이 없음 text문구가 css를 방해함으로 따로 버튼을 추가후,
        value로 들어가는 부분에 label을 사용해 마찬가지로 클릭시 input file이 실행됨
        
    </th>
</tr>
<tr>
    <th style="padding: 5px">
        <input type="file" accept="image/*" name="memberFile" id="memberFile" style="display: none">
        파일 업로드를 위한 input type file accept로 image 파일만 업로드가 가능하고 /*로 형식은 모두 가능하다
        위에서 버튼을 따로 만들었기 때문에 display는 none으로 화면에서 가려주었다
        
        <img style="width: 100px;height: 100px;border: 1px solid black" id="preview-image">
        사용자가 업로드한 이미지 파일의 미리보기를 위해 사용한 img 태그
        가로 세로를 100px로 스타일을 이미지를 보여주는 크기를 고정하였습니다
        
    </th>
</tr>
<tr>
    <th>
        <p id="fileName"></p>
        사용자가 업로드한 파일의 이름을 화면에 출력하기 위해
        사용한 p태그
    </th>
</tr>

<script>

document.getElementById('memberFile').addEventListener('change', function() {
이벤트리스너를 사용하여 input태그에 change 이벤트가 발생하는 경우 함수를 실행합니다

    document.getElementById('fileName').innerHTML = this.value.replace(/c:\\fakepath\\/i,'');
    이름을 받아주는 p태그에 파일의 이름을 넣어줍니다 하지만 그냥 넣는다면
    경로까지 함께 출력되기 때문에 replace를 사용하여 이름앞의 파일경로를 ''공백으로 변환후 넣어줍니다
});

    function readImage(input) {
    파일 선택 창에서 이미지 파일을 선택하면 readImge함수가 실행됩니다
    매개변수가 input이기 때문에 input으로 선택한 파일의 정보가 전달됩니다
    
        if (input.files && input.files[0]) {
        if문을 사용하여 선택한 파일이 존재하는지 확인합니다
        멀티플 설정을 하지 않았지만 기본적으로 배열형식으로 저장되기 때문에 이렇게 비교됩니다
        
            const reader = new FileReader()
            선택한 파일을 url로 변환하여 img태그에 넣어줄 생각이기 때문에
            FileReader 객체를 만들어줍니다
            
            reader.readAsDataURL(input.files[0])
            FileReader에 있는 메소드 readAsDataURL을 사용하여
            input 태그에 있는 files[0]을 URL로 변환합니다
            
            reader.onload = e => {
            reader에 onload 이벤트를 사용하여 변환된 데이터를 읽고
            파일의 내용을 img 태그의 src속성으로 변환합니다
                const previewImage = document.getElementById("preview-image")
                img 태그를 previewImge에 document객체로 생성후
                previewImage.src = e.target.result
                src에 이벤트의 result를 넣어 화면에 출력합니다
            }
        }
    }
</scrpt>

 

 

실행 화면

파일의 미리보기 , 이름이 출력된다

 

 

• 회원가입 - 비밀번호 정규식 제약조건 

정규식도 외우면 좋겠지만 나는 그렇게 똑똑하지 않기 떄문에

나중에 찾아보기 편하기위해 사용법을 올린다.

 

 

 

이번 회원제 게시판에 사용된 비밀번호 정규식

    const pass_check = () =>{
        let memberPassword = document.getElementById('memberPassword').value;
        let passwordResult = document.getElementById('passwordResult');
        const exp = /^(?=.*[A-z])(?=.*\d)(?=.*[!#$%])[A-z\d!#$%]{5,10}$/;

        if (memberPassword.length == 0){
            passwordResult.style.color = "red";
            passwordResult.innerHTML = "필수 입력입니다.";
            return false;
        } else if (!(memberPassword.match(exp))){
            passwordResult.style.color = "red";
            passwordResult.innerHTML = "5~10자 영문 대 소문자, 숫자, 특수문자(!#$%) 하나 이상을 사용하세요.";
            return false;
        } else {
            passwordResult.style.color = "green";
            passwordResult.innerHTML = "사용가능합니다";
            return true;
        }
    }

 

! 부정 연산자를 사용하여 memberPassword가 정규식 exp의 문자열에 포함되지 않으면

조건문을 실행하고 FALSE를 리턴하여 SUBMIT을 막아줍니다

 

 

• 로그인 - 불일치 경고문

로그인을 시도했지만 실패하는 경우에 경고문이 발생합니다

 

 

• Controller

    @PostMapping("/member/login")
    public String Loginmember(@ModelAttribute memberDTO memberDTO , Model model , HttpSession session){
        memberDTO dto = memberService.loginMember(memberDTO);
        if(dto != null) {
            session.setAttribute("memberID",dto.getId());
            session.setAttribute("memberEmail",dto.getMemberEmail());
            return "boardPages/boardMain";
        } else {
            String loginFalse = "아이디 또는 비밀번호를 잘못 입력했습니다."+"<br>"+"입력하신 내용을 다시 확인해주세요.";
            model.addAttribute("loginFalse",loginFalse);
            return "memberPages/memberLogin";
        }
    }

사용자에게 입력받은 값을 파라미터로 가져와 객체에 담고

아이디 비밀번호가 일치하는 값이 DB에 있다면 DTO에 담아 리턴받고

받은 DTO의 내용이 NULL 이 아니라면 로그인 NULL이라면 경고문을 출력합니다

경고문은 loginFalse에 문자열로 담겨 model로 다시 login페이지로 함께 넘어가게 됩니다

 

• login.jsp

<tr>
    <th><p style="color: red">${loginFalse}</p></th>
</tr>

이렇게 model에 담긴 값을 출력합니다

처음 화면에서는 당연히 model에 담긴 값이 없기 때문에 경고문이 보이지 않지만

로그인을 실패하는 model에 경고문이 담겨오기 때문에 출력되게 됩니다