mn_project(轉)

 

 

 

▶ 구조

 

▷ 백엔드

 

▷ 프론트엔드

 

크게 백/ 프론트로 나눠서 구조 자체는 간단하게 설계했다

 

 

 

▶ 개발진행

 

 

프론트 개발 (10일 소요)

 >  담당 파트 : 병원예약 캘린더 , 예약접수확인 , 펫 리스트 출력

 

 

[ 병원 예약 캘린더 ]

우선 테이블을 이용해서 큰 틀을 잡아주었다.

/* 캘린더 구성 */
<table class="Calendar">
        <thead>
            <tr>
                <td> 이전달 </td>
                <td> 0000년 00월 </td>
                <td> 다음달 </td>
            </tr>
            <tr>
                <td>일</td>
                <td>월</td>
                <td>화</td>
                <td>수</td>
                <td>목</td>
                <td>금</td>
                <td>토</td>
            </tr>
        </thead>
        <tbody>
            /* 달력의 날짜 출력해줄 부분 */
        </tbody>
    </table>

 

1. 이번달 년, 월 가져오기

2. 이전달/ 다음달로 넘기는 기능

3. tbody안에 날짜 가져오기

>> 이렇게 단계를 나눠서 진행했다.

 

---

①

document.getElementById("cYear").innerText = thisMonth.getFullYear();  
document.getElementById("cMonth").innerText = thisMonth.getMonth() + 1;

> Javascript의 getFullYear, getMonth를 이용해 값을 가져온다

(getMonth는 default가 0으로 +1을 해줘야 1월이 0이 아닌 1이 된다.)

> document.getElementById()으로  id값을 반환

 

②

// 이전달
function prevMonth() {
    thisMonth = new Date(thisMonth.getFullYear(), thisMonth.getMonth() - 1, thisMonth.getDate());   
    // 현재 달을 1 감소
    showCalendar();    
}
// 다음달
function nextMonth() {
    thisMonth = new Date(nowMonth.getFullYear(), thisMonth.getMonth() + 1, thisMonth.getDate());   
    // 현재 달을 1 증가
    showCalendar();  
}

> thisMonth의 값을 새로 가져와 다시 보여준다.

<tr>
    <td onClick="prevMonth();" style="cursor: pointer;"> ◀ </td>
    <td colspan="5">
    <span id="cYear"></span>년 
    <span id="cMonth"></span>월</td>
    <td onClick="nextMonth();" style="cursor: pointer;"> ▶ </td>
</tr>

>  id값 받아와서 출력해주고 함수 호출해준다

 

③

혼자 구현해보다가 시간이 너무 지체되어서 외부 소스를 찾아보고 적용시켜보았다.

function showCalendar() {
    let firstDate = new Date(thisMonth.getFullYear(), thisMonth.getMonth(), 1);     // 이번달 첫번째날
    let lastDate = new Date(thisMonth.getFullYear(), thisMonth.getMonth() + 1, 0);  // 이번달 마지막날

>  우선 1일과 마지막날의 날짜를 받아오고, 행과 열을 추가해준다.

 let thisRow = tbody_Calendar.insertRow();   // 행 추가
 
for (let i = 0; i < firstDate.getDay(); i++) {  // 이번달 1일의 요일만큼 열 추가
    let thisColumn = thisRow.insertCell();        
}
for (let thisDay = firstDate; thisDay <= lastDate; thisDay.setDate(thisDay.getDate() + 1)) {   
    let thisColumn = thisRow.insertCell();      
    
    let newDIV = document.createElement("p");
    newDIV.innerHTML = lPad(thisDay.getDate());        // 추가한 열에 날짜 넣기
    thisColumn.appendChild(newDIV);
    
    if (thisDay.getDay() == 6) {                 // 6 => 토요일인 경우엔 새로운 행 추가
        thisRow = tbody_Calendar.insertRow();    
  	}
    // => 이번달 마지막날까지 증가시키며 반복  
 }

행과 열을 추가하고 날짜를 넣어주면 된다  ( 변수선언, null값처리는 따로 해주었고 따로 적지는 않겠다 )

 

 

 

 

<< 이렇게 구현이 된다

 

아래 시간선택은 부트스트랩으로 가져왔다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

---

백엔드 개발 (35일 소요)

> 담당 파트 : 로그인,간편로그인(네이버),회원가입, 보호자정보수정, 메일전송

 

프로세스는 구조에서도 나와있듯 view  ≫ controller ≫ service ≫ mapper ≫ DB 로 mvc패턴을 사용했다.

 

[ 회원가입 ]

- 주요기능  

1. 주소찾기

2. 아이디 중복 확인

3. 비밀번호 암호화

 

---

 

① 

open API를 안쓸이유가 없다!  daumPost를 가져와서 썼다 

https://postcode.map.daum.net/guide

Daum 우편번호 서비스

 

function daumPost(){
    new daum.Postcode({
        oncomplete: function(data) {
        	console.log(data);
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
            const addr1 = document.getElementById("addr1");
            const addr2 = document.getElementById("addr2");
            const addr3 = document.getElementById("addr3");
            let addr="";
            if(data.userSelectedType === "R"){
            	//도로명 선택
            	addr = data.roadAddress;
            }else{
            	addr = data.jibunAddress;
            }
			addr1.value	= data.zonecode;
			addr2.value = addr;
			addr3.focus();
        }
    }).open();
   }

 

다음에서 제시해주는 코드를 가져와서 그대로 적용! 

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="/am/resources/js/daumPost.js"></script>

<div id="registerFormContent" class="form-group row">
    <label for="inputAddr" class="col-sm-3 col-form-label">우편번호</label>
    <div class="col-sm-7">
        <input type="text" name="mAddr" readonly class="form-control" id="addr1"
            placeholder="input post" required>
    </div>
    <div class="col-sm-2">
        <input type="button" class="post-btn" onclick="daumPost()" value="우편번호 검색" required>
    </div> 
</div>
<div id="registerFormContent" class="form-group row">
    <label for="inputAddr2" class="col-sm-3 col-form-label">주소</label>
    <div class="col-sm-7">
        <input type="text" name="mAddr" readonly class="form-control" id="addr2"
            placeholder="input Addr" required>
    </div>
</div>
<div id="registerFormContent" class="form-group row">
    <label for="inputAddr2" class="col-sm-3 col-form-label">상세주소</label>
    <div class="col-sm-7">
        <input type="text" name="mAddr" class="form-control" id="addr3"
            placeholder="input extra Addr" required>
    </div>
</div>

daumPost에서 받아온 값 > addr1, addr2 을 각각 우편번호, 주소에 넣어주고

사용자가 상세주소를 바로 작성할수있게 addr3.focus()를 해준다.

 

DB에 저장을 할때 addr1,addr2,addr3에 구분을 주고싶어서 일단 controller단에서 주소값을 배열로 받았다.

String[] addr = req.getParameterValues("mAddr");

 

그러고 service단에서 "/"을 넣어서 하나의 문자열로 만들어줬다.

String ad ="";
for(String a:addr) {
    ad += a+"/";
}
dto.setmAddr(ad); //  '/'를 포함해서 다시 합쳐진 주소를 dto에 넣어준다

이렇게 하면 나중에 주소를 출력할때 split("/")해서 각각의 값을 가져오기도 좋다.

 

 

 

②

아이디 중복찾기는 Javascript와 Ajax를 사용했다.

일단 입력할때의 아이디 유효성 검사를 간단하게 했다.

/* 아이디 입력 */
<label for="inputId" class="col-sm-3 col-form-label">아이디</label>
    <div class="col-sm-7">
        <input type="text" name="mId" class="form-control" id="id"
            placeholder="inputId">
<label id="label1" style="text-align: left"></label>

/* id 유효성 검사 */
$("#id").on("focusout", function() { 	// 아이디 input 영역을 벗어나면 동작한다.
    var id = $("#id").val();
    if(id == '' || id.length == 0 || !/^[a-zA-Z0-9]+$/.test(id)) {
        $("#label1").css("color", "red").text("공백 또는 한글은 ID로 사용할 수 없습니다.");
        return false;
    }

 

input한 id값을 바로 controller에 post해서 DB의 데이터와 중복확인할수있게 했다. 결과값(result)을 boolean으로 받았다.

$.ajax({
    url : '/am/idCheck',
    data : {
        id : id
    },
    type : 'POST',
    dataType : 'json',
    success : function(result) {
        if (result == true) {
            $("#label1").css("color", "black").text("사용 가능한 ID 입니다.");
        } else{
            $("#label1").css("color", "red").text("사용 불가능한 ID 입니다.");
            $("#id").val('');
        }
    }
});

 

일단 공백인지 확인하고 아니면 service >> mapper >> DB로 보내는 프로세스로 중복확인을 했다

@PostMapping("/idCheck")
@ResponseBody
public ResponseEntity<Boolean> idCheck(String id) {
    boolean result = true;

    if(id.trim().isEmpty()) {
        result = false;
    } else {
        if (ms.idCheck(id)) {
            result = false;
        } else {
            result = true;
        }
    }
    return new ResponseEntity<>(result, HttpStatus.OK);
}

Ajax를 이용해서 간단하게 끝낼수있었다!

 

 

 

③

비밀번호 암호화는 BCryptPasswordEncoder를 사용했다.

BCryptPasswordEncoder

Spring Security 프레임워크에서 제공하는 클래스로 비밀번호를 암호화(해시)하는 데에 사용

해시 함수에는 MD5나 SHA 등의 종류가 있지만 BCrypt는 단순히 입력을 1회 해시시키는 것이 아니라 솔트(salt)를 부여하여 여러번 해싱하므로 더 안전하게 암호를 관리할 수 있다.

우선 pom.xml에 디펜던시를 추가해준다

 <!-- spring-security-web -->
  <dependency>
     <groupId>org.springframework.security</groupId>
     <artifactId>spring-security-web</artifactId>
     <version>${org.springframework-version}</version>
  </dependency>

서비스단에서 사용할수있게 BCryptPasswordEncoder  클래스 가져와주고,

BCryptPasswordEncoder encoder; 
public serviceImpl() {
    encoder = new BCryptPasswordEncoder();
}

 

dto에 password 저장할때 encoder 메서드를 적용, 암호화해서 저장해준다. 

dto.setmPw(encoder.encode(dto.getmPw()));

 

<< 솔트가부여된 값이 암호로 저장된다

 

 

로그인시 비밀번호 확인을 해줄때에도 BCryptPasswordEncoder의 matches 메서드를 이용하면 된다 ( 반환타입은 boolean이다 ) 

// 사용자가 입력한 평문과 암호화된 비밀번호 비교
if(encoder.matches(pw, dto.getmPw()) || pw.equals(dto.getmPw())) { 					
   	result =0;
}

 

간단하면서도 확실한 방법으로 비밀번호 암호화 기능을 끝냈다. 

 

---