ep.06 템플릿 선정 & 프론트 작업(유효성 검사, 프로필 사진 업로드와 미리보기, 주소 API 연동)

템플릿 선정

무료 템플릿 사이트

팀 프로젝트를 진행하고 있는 현재, 필자 포함 팀원 모두가 프론트 엔드 기술보다 백엔드 기술을 더 재밌어한다. 그러다 보니 화면 구현 관련 팀 회의 진행 시 템플릿을 이용하고 기능 구현에 집중하자는 의견이 만장일치로 통했다. 여기저기 마음에 드는 템플릿 무료 사이트를 돌아다닌 결과 꽤나 마음에 드는 템플릿을 발견했다. theme wagon 이라는 사이트의 Titan이라는 템플릿을 사용하기로 했다! 다양한 페이지가 제공되고 있기에 조금의 노력을 더한다면 내가 원하는 페이지를 구현할 수 있을 거 같았다.

로그인 / 회원가입, 마이페이지 구현

필자는 로그인, 회원가입 기능을 구현하기로 했고 당연히 마이페이지까지 구현해야하기에 빠르게 사이트를 선택하고 수정하였다.

작업 전 로그인 / 회원가입 페이지

작업 후 로그인 / 회원가입 페이지

 

---

작업 전 마이페이지

작업 후 마이페이지

---

프론트 작업

유효성 검사

페이지 구현을 완료한 뒤 정규식과 JavaScript를 이용하여 유저가 입력하는 내용에 대한 유효성 검사 작업을 했다. 먼저 아래와 같이 파일 구조를 나누고... 

 

유효성 검사는 하나의 항목에 대해 진행하고 동일한 방법으로 진행하면 되기에 이름을 기입하는 부분에 대해서만 설명하도록 하겠다.

유효성 검사가 적용된 모습

 

1. HTML 코드를 작성해준다. 

 -> input 태그에 onkeyup 속성을 이용하여 값이 입력될 때 마다 유효성검사가 진행되도록 설정했다. 

<div class="form-group">
    <input class="form-control" id="userName" type="text" name="userName" placeholder="이름" onkeyup="nameValidation()"/>
    <div class="hj-validation-name" id="showName"></div>
</div>

 

2. JavaScript 코드를 작성해준다.

-> 정규식을 이용한 test 진행시, 가독성을 위해 common.js 파일을 생성하고 반복되는 코드를 작성하여 작업했다.

// validation.js

function nameValidation() {
    // 유저가 입력한 값
    const value = document.getElementById('userName').value;
    // 검사 결과를 나타낼 영역
    const showText = document.getElementById('showName');
    // 정규식
    let checkKor = /^[ㄱ-ㅎ가-힣]+$/;

    if(!checkKor.test(value)) {
        failedValidation(showText, "문자(한글)만 입력가능합니다.");
    } else {
        successValidation(showText);
    }
}

// common.js

// 정규식과 상이할 때 출력하는 메세지
function failedValidation(showText, text) {
        showText.style.display="block";
        showText.style.color="red";
        showText.innerText = text;
}

// 정규식과 동일할 때 출력하는 메세지
function successValidation(showText) {
        showText.style.display="none";
}

---

프로필 사진 업로드 & 미리보기

회원가입을 진행하면 기본 프로필 사진이 적용되게 설정할 것이다. 추후 프로필을 변경할 수 있게 작업을 해보자.

기본 프로필 사진이 적용된 모습

 

1. input 태그에 타입을 file로 설정하고 미리보기를 위한 영역을 설정해준다. 

<img id="showFile" src="/assets/images/shop/basicprofile.png"></img>
<input id="fileName" type="file" name="fileName" onchange="profile()"/>

<script src="/js/member/mypage/profile.js"></script>

 

 

2. 미리보기 기능을 위한 코드를 js파일에 작성한다.

 -> querySelector를 이용하여 selectFile 변수에 업로드된 파일 주소 초기화하고 createObjectURL 이용하여 파일주소를 file 변수에 초기화한 뒤, querySelector 이용하여 img 태그 src 변경해준다.

function profile() {
        // querySelector 이용하여 selectFile 변수에 업로드된 파일 주소 초기화
        let selectFile = document.querySelector('#fileName').files[0];
        console.log(selectFile);    

        // createObjectURL 이용하여 파일주소를 file 변수에 초기화
        const file = URL.createObjectURL(selectFile);

        // querySelector 이용하여 img 태그 src 변경
        document.querySelector('#showFile').src = file;
}

파일이 첨부되고, 미리보기에 등록된 모습

---

주소 API 연동

유저로부터 주소를 입력받는 방법은 다음에서 제공하는 우편번호 서비스를 이용하기로 했다. 여러가지 예제가 있어 원하는 방법을 이용하면 된다.

팝업을 이용하여 도로명 주소와 지번 주소 모두 보여주기
사용자가 선택한 값 이용하기
iframe을 이용하여 레이어 띄우기
iframe을 이용하여 페이지에 끼워 넣기
주소를 선택하면 지도도 함께 보여주기

 

필자는 사용자가 선택한 값 이용하기 예제를 이용했다. 이용하는 방법은 아주 간단하다. 예제 코드를 복사 붙여넣기 하면 되고, input 태그의 id 속성값을 원하는대로 수정해주면 끝이다.

<input id="postCode" type="text" placeholder="우편번호" disabled/> 
<button type="button" onclick="addressSearch()">주소찾기</button>

<input id="address" type="text" placeholder="주소" disabled/> 

<input id="detailAddress" type="text" placeholder="상세주소"/> 

<input id="extraAddress" type="text" placeholder="참고항목"/>

function addressSearch() {
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
            
            // 각 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            var addr = ''; // 주소 변수
            var extraAddr = ''; // 참고항목 변수
            
            //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
            if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                addr = data.roadAddress;
            } else { // 사용자가 지번 주소를 선택했을 경우(J)
                addr = data.jibunAddress;
            }
            
            // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
            if(data.userSelectedType === 'R'){
                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 '동/로/가'로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                    extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraAddr !== ''){
                    extraAddr = ' (' + extraAddr + ')';
                }
                // 조합된 참고항목을 해당 필드에 넣는다.
                document.getElementById('extraAddress').value = extraAddr;
                
            } else {
                document.getElementById('extraAddress').value = '';
            }
            
            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            document.getElementById('postCode').value = data.zonecode;
            document.getElementById('address').value = addr;
            // 커서를 상세주소 필드로 이동한다.
            document.getElementById('detailAddress').focus();
        }
    }).open();
}

주소찾기 버튼을 누르면 주소 검색을 할 수 있는 팝업창이 뜬다

 

원하는 주소를 클릭하면 input 태그에 입력된다.

 

이렇게 프론트 작업은 완료되었다. 이제 DB와 백엔드 작업을 진행하면서 회원가입과 실명인증 등 여러가지 API와 JWT(Jason Web Token)와 같은 기능을 이용하여 구현해보겠다.