뒤로가기 액션에 대한 피드백

잘 안보일 수도 있습....

최근 데스크탑 웹페이지 작업을 하면서 뒤로가기 버튼을 넣으면 조금 사용자가 편리하지 않을까 생각하고 고려하고, 심오하게 생각하고, 또 생각하고 하다가 넣게 되었습니다. 그런데 뒤로가기는 어떻게? href에다가 뭘 넣어야하지? 엄청 고민하고 있었습니다. href에 인라인 문구만 기입하면 끝나는 부분이어서 간단했지만, 이 과정을 습득하는데에도 또 폭풍 검색을 하고 말았습니다.

출처: 구글 검색으로;;

1. href에 그대로 코드 작성

<a href="javascript:history.back();" class="back_btn">뒤로가기</a>

일단, 제가 처음에 열심히 찾아본 방법 중에 깔끔하고, 많은 어려움이 없이 이해가 바로 되었던 코드였습니다. "오호.. 히스토리 빽~ (history.back() ) 이방법으로 하면 끝이구나" 하고 말이죠!

 

이게 맞는지 아닌지 테스트 해봐야되니까, 일단 테스트! 오호! 성공적 이었습니다.

그럼 일단, 코드가 정상적이라는 것이니깐요, 하지만 학원에서 데스크탑 컨펌을 받는 부분에서 위 코드 안 배웠는데, 어떻게 구현하셨어요? 하시면서 코드를 봐주셨는데, 이 방법말고 다른 방법으로 해보시면 어떨지 해주셔서 본의아니게(?) 수정을 하게 되었습니다.

 

2. href에 말고, OnClick에 작성

<a href="#" class="btn_back" onclick="history.back(); return false">뒤로가기</a>

뭔가 조금 길어졌습니다. 하지만, 현업하시는 분들이 하는 부분을 참고했는데 이렇게 작성도 하셨습니다. 저도 1번 부분에서 조금 찝찝했던 부분이 href에 링크가 아닌, 다른 코드가 들어가서 다른 방법이 없을까 했었는데, 역시 "#"을 쓰고 onclick 방법이 뭔가 나을 것 같아서 말입니다.

 

그리고 작성한 return false의 경우는 이벤트 전파를 막는 것이라고 배웠는데, 이제 href에 "#"을 기재하면 상단이 아닌 하단에서 누르게 되면 위로 올라가게 되는데, 그런 부분에서도 막을 수 있는데, 이 방법들을 많이 사용하셔서 작성하였습니다. 

 

2번 역시 뒤로가기 기능이 정상적으로 되는 부분을 확인했습니다. 그래도 피드백을 받은 2번 방법으로 작성을 해보려고 합니다.

---