[TIL] 2023-02-16(76day) / 최종 프로젝트(9day)

최종 프로젝트(9)

 

---

👉 mypage 프로필 정보 불러오기

 <script>
    $(window.document).ready(function() {
    userprofile();
})
function userprofile() {
    $.ajax({
        type: "GET",
        url: "http://localhost:8080/profiles",
        data: {},
        headers: {
          "Authorization": localStorage.getItem('accessToken')
        },
        success: function (response) {
            const e = (response['data'])
            $('#userId').text(e['userId'])
            $('#nickname').text(e['nickname'])
            $('#phoneNumber').text(e['phoneNumber'])
            $('#interestArea').text(e['interestArea'])
            $('#image').text(e['image'])
        },
})}

 

                <div class="form-group row">
                  <div class="col-md-6">
                    <label for="c_email" class="text-black">아이디 <span class="text-danger">*</span></label>
                    <div class="form-control" id="c_fname" name="c_fname"><span id="userId"></span></div>
                  </div>
                </div>
                <div class="form-group row">
                  <div class="col-md-6">
                    <label for="c_email" class="text-black">닉네임 <span class="text-danger">*</span></label>
                    <div class="form-control" id="c_fname" name="c_fname"><span id="nickname"></span></div>
                  </div>
                </div>
                <div class="form-group row">
                  <div class="col-md-6">
                    <label for="c_email" class="text-black">핸드폰번호 <span class="text-danger">*</span></label>
                    <div class="form-control" id="c_fname" name="c_fname"><span id="phoneNumber"></span></div>
                  </div>
                </div>
                <div class="form-group row">
                  <div class="col-md-6">
                    <label for="c_subject" class="text-black">관심지역 </label>
                    <div class="form-control" id="c_fname" name="c_fname"><span id="interestArea"></span></div>
                  </div>
                </div>

 

👉 Header에 담긴 Token 정보 저장하기 (localStorage)

function getUserMe(){
	var settings = {
		"url": "http://localhost:8080/profiles",
		"method": "GET",
		"timeout": 0,
		"headers": {
		  "Authorization": localStorage.getItem('accessToken')
		},
	  };
	  
	  $.ajax(settings).done(function (response) {
		console.log(response);
		console.log(response.nickname);
		$(`#loginUser`).empty();
		$(`#loginUser`).append("[" + response.data.nickname + "님 반갑습니다." + "]");
	  });

}

 

---

🙋‍♂️ 소감 : 

수요일까지 기본 기능 구현을 마치고 오후부터 적용할 탬플릿을 찾았다.

처음에 구상했던 와이어프레임과 비교하여 비슷한 기능이 있는 탬플릿을 찾으려고 했지만 찾기가 어려워서 최대한 적용하기로 한 탬플릿을 활용하는 쪽으로 적용을 해보고 있다.

기본 기능에서도 날짜 지정, 모집 인원(동시성 관련) 설정 등 추가적인 부분 적용이 필요하여, 기본적인 프론트 연결이 끝나면 주말 동안 찾아서 적용해 볼 생각이다.

😈 아는 내용이라고 그냥 넘어가지 않기! 😈