내일배움캠프 5주차 기록 (WIL)

로그인 기능 삽질의 연속

4주차에서 내가 프로젝트에서 로그인 기능을 담당하기로 했는데, 생각보다 로그인이라는게 정말 신경쓸게 이렇게 많을 줄 몰랐다. 많은 역경과 고난이 나를 기다리고 있었는데 ^^ 기억에 남는 몇가지를 말해보자면 첫번째가 '환경 변수' 였다. 환경 변수란 간단히 얘기하자면 (간단하지는 않지만) 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값이라고 정의가 되어 있는데... 기존까지는 남에게 보여지면 곤란한 정보들 (예를 들어 몽고DB의 아이디나 패스워드 값) 을 크게 신경쓰지 않고 코드를 적어 놨었는데, 환경 변수를 사용해서 해결할 수 있었다. 환경변수를 설정하기 위해서는 window운영체제는 '시스템 환경 변수 편집' 에서 할 수 있고, 맥은 터미널을 실행시키고 

export 새임시환경변수명=새임시환경변수값 입력하는 방식으로 환경변수를 설정해 줄 수 있다.

(mac환경변수 설정 참고 블로그 : https://life-of-panda.tistory.com/41)

 

두번째는 로그인 화면에서 예외 처리 및 정규식에 대한 부분이였다. JS정규식에 대한 공부는 블로그에 올려두었으니 논외로 치고, 예외 처리가 생각보다 어려웠다 ㅠㅠ 하나 예시를 들어보자면

function sign_in() {
    let userid = $("#input-username").val()
    let password = $("#input-password").val()

    if (userid == "" && password == "") {
        $("#help-id-login").text("아이디를 입력해주세요.")
        $("#help-password-login").text("비밀번호를 입력해주세요.")
        $("#input-username").focus()
        return;
    } else if (userid != "" && password == "") {
        $("#help-id-login").text("")
        $("#help-password-login").text("비밀번호를 입력해주세요.")
        $("#input-password").focus()
        return;
    } else if (password != "" && userid == "") {
        $("#help-password-login").text("")
        $("#help-id-login").text("아이디를 입력해주세요.")
        $("#input-username").focus()
        return;
    } else {
        $("#help-password-login").text("")
        $("#help-id-login").text("")
    }

위와 같이 로그인 페이지에서 아이디를 입력하지 않거나 비밀번호를 입력하지 않거나 혹은 둘다 입력하지 않거나 입력한 비밀번호나 아이디가 틀렸다던가 하는 등등에 대한 예외(오류)가 발생했을때의 처리를 if 문을 사용해서 처리를 해줬는데... 몰론 더 깔끔하게 작성하는 방법은 많았겠지만 위 코드가 그래도 머리를 많이 사용해서 짠 코드다 ㅠㅠㅠㅠ

 

세번째는 로그인을 하고 페이지를 이동하는데에서 발생했다. 처음 생각은 로그인을 하고 그냥 메인 페이지로 보내면 되지~ 했는데...! 생각해보니까 로그인을 요청하는 페이지가 메인페이지말고 여러 다른 페이지가 있었다. 예를 들면 게시판을 이용을 하다가 글 작성 버튼을 클릭하면? 당연히 로그인이 필요하니까 로그인 페이지로 보내겠지..? 그러면 로그인을 정상적으로 하면 사용자 입장에서는 메인 페이지가 아닌 이전에 이용하던 페이지 (이런 경우에는 게시판 페이지가 되겠지?) 가 떠야지 더 편안하게 이용을 할 수 있을거라고 생각했는데, 생각보다 이 작은 기능 하나를 구현하는게 엄청나게 힘들었다. 삽질을 하루정도 한거같다 ^.^ 처음 생각한건 모든 요청 페이지마다 이후 url 주소를 다 따로 코드를 쳐주는 방식을 하나 생각했는데, 너무 비효율적이여서 다른 방법을 찾다 보니까 history.back 을 알게 되었는데,,, 여기서도 삽질을 진짜 오지게 했다. 예를 들어서 메인페이지에서 게시판 페이지로 이동하고, 게시판 페이지에서 포스팅 페이지로 이동을 하면 포스팅 페이지에서 로그인 페이지로 보내고, 로그인을 하게 되면 게시판이 아닌 메인페이지로 가는 경우가 발생했다 ........ 이게 브라우저에서 기록을 발생 시키지 않고 이동시켜서 그런 것 같아서 ... 삽질을 엄청나게 하다가 결국 pushState()를 사용해서 강제적으로 history에 기록을 추가해서 뒤로 보내니까 잘 작동하더라....

 

이번 5주차는 삽질을 진짜 많이 했지만.. 삽질 한 만큼 그래도 성장한게 어느정도 느껴저서 살짝 기쁘긴 하다 ^^... 이제 무척추동물을 벗어난 느낌..? 아 참고로 개발 환경을 윈도우에서 맥으로 변경했다 ㅎㅎㅎ m1 맥미니를 구입해서 처음 써보는 거기도 하고 이제 살짝살짝 파이참 같은거 설치도 하고 하면서 적응을 하고 있는 중이다.. 맥은 처음 써보니까 진짜 어렵드라 .... ㅎ.ㅎ 맥을 쓰는 다른 팀원들의 조언을 얻어서 설치도 좀 편하게 하고 ㅠㅠㅠ 만약 혼자서 설치했으면 하루왠종일 셋팅만 하다 끝났을거 같다(....)