마지막으로 main페이지를 진행하였다.
나머지 자잘자잘한 것들은 간단하여 생략하였다.
주요기능
-
로그인시 nav바 변경
-
nav바 프로필 사진 변경
-
주소 설정 select box
로그인 시 nav바 변경
사실 이 프로젝트를 하기 전에 하다가 중단된 프로젝트가 있었다.
나를 포함한 팀원들 모두 아무것도 모르는 상태에서 하려다 중단되었었는데,
그 프로젝트에서도 로그인 했을 때 nav바를 변경하는 방법을 몰랐다.
그래서 이번 프로젝트에서도 이 부분이 가장 해결하기 어렵다 생각했던 부분 중 하나이다.
하지만, 지금의 나는 session공부를 함으로써 어떤 방식으로 nav바를 변경해야 하는지 알게 되었고, 정말 간단한 방법으로 nav바를 변경할 수 있었다.
만약 로그인을 했다면, 서버에서 해당 사용자의 session을 생성했다.
이 session을 사용하여 nav바를 변경하였다.
가장 먼저 로그인 했을 때의 nav바 파일과 로그인이 안됐을 때의 nav바 파일을 따로 생성한 후 타임리프를 이용하여 nav바를 교체하는 방식으로 진행하였다.
if(userIndex != null){
Optional<ProfileEntity> userProfile = profileService.findProfileEntity(userIndex);
// session이 있을 때 true 반환해 login된 header사용
model.addAttribute("alreadyHaveSession", "true");
if(userProfile.isPresent()){
model.addAttribute("storeFileName", userProfile.get().getStoreFileName());
}
}
else if(userIndex == null){
// session 없을 때 false반환해 기본 header사용
model.addAttribute("alreadyHaveSession", "false");
}
}위의 코드는 메인 페이지 메서드중 하나이다.
위의 코드처럼 유저 index가 있을 때 alreadyHaveSession이라는 모델을 가져오도록 한다.
<div th:if="${alreadyHaveSession == 'true'}">
<div th:replace="newHeader.html"></div>
</div>
<div th:if="${alreadyHaveSession == 'false'}">
<div th:replace="existingHeader.html"></div>
</div>만약 alreadyHaveSession이 true이면, 해당 사용자가 로그인을 했을 상태이기 때문에, 로그인이 된 nav바를 대체하도록 하고 false이면 로그인이 안된 상태의 nav바를 반환하도록 하였다.
nav바 프로필 사진 변경
이 부분은 로그인한 유저의 프로필 사진이 변경되었을 때, 프로필 사진을 가져와 nav바에 사진을 걸어 두는 것이다.
위의 코드에서 보듯 storeFileName이라는 모델로 해당 사용자의 프로필 사진을 가져온다.
<img
class="picture"
onerror="this.src='/img/default_profile.png'"
th:src="@{/upload/{uploadfile}(uploadfile=${storeFileName})}"
/>타임리프를 사용하여 해당 사진의 주소를 받아와 보여준다.
가장 처음 회원가입을 했을 때에는 프로필 사진이 없기 때문에 만약 해당 프로필 사진이 없으면 기본 프로필 사진을 받아 올 수 있도록 onerror 속성을 사용하여 기본 프로필 사진을 가져오도록 하였다.
주소 설정 select box
이 부분이 이 프로젝트에 있어서 가장 어려웠고 시간을 가장 많이 쓴 문제였다.
우선 나는 프론트엔드 개발자가 아니다. js를 잘 모르는 상태로 시도해서 시간을 많이 쓴 것 같기도 하다.
그냥 어느정도 어떤 식으로 js가 돌아가는지만 아는 그런 수준인 상태였다.
나는 당근마켓 웹페이지의 주소 select와 비슷하게 만들고 싶었다.
가장 중요한 부분은 해당 구/군을 선택하면 해당 구/군에 있는 동들이 나와야 한다.
그리고 해당 시 / 군 / 구 를 선택할 때 해당 지역을 선택한 게시글들이 나오게 만드는 것이다.
예를 들면, 경기도 용인시 수지구까지만 선택했다면, 경기도 용인시 수지구를 선택했던 게시글들만 나오게 하는 것이다.
우선 이 select box의 option 값들이 너무 많아 프로토타입으로 서울특별시의 지역만 option값으로 넣어두었다.
여러가지 시도를 해보았다.
option값을 selected 속성을 사용하여 만들어, js로 url주소를 만들어 이동하는 방식으로도 해보았지만, 페이지가 넘어가면서 해당 주소를 selected한 option값을 못 받아 왔다.
이런 여러가지 방식으로 시도해왔지만, 번번히 실패했다.
결국 오랜 구글링 끝에 sessionStorage를 사용하여 해당 selected값을 가져오는 방식으로 도전해보았다.
이 방법은 이전에 같이 프로젝트를 해온 프론트엔드 팀원이 해보다 실패했다고 회의하면서 들었어서, 반신반의하며 도전하였다.
방식은 이렇다.
select box에서 해당 지역을 클릭하면 해당 option의 value 값을 받아와 sessionStorage에 저장한 후 새로운 페이지에서 해당 지역의 게시글을 받아오고, selected 한 지역은 sessionStorage에서 받아와 select box에 넣어주는 방식이다.
이전에 프론트를 담당한 팀원이 select box를 해놓았는데 그걸 이용하여 코드를 진행해보았다.
원래는 다음페이지까지 이동은 했지만, selected가 되지않아 다음 지역 selectbox가 선택되지 않았다.
팀원이 짠 코드를 console.log를 찍어가며 어떤 식으로 코드진행이 되는지를 알아가며 차근차근 천천히 풀어나가니 결국에 내가 원하는 기능을 제대로 실행할 수 있게 되었다.
