[개발일지] NodeJS 로그인 기능 구현 및 UI개선

이제 아주 조금 마무리가 보이는 느낌입니다! 메인페이지 설계와 기능구현을 마무리지었고 지금까지 계속 미루어오던 유저페이지 UI를 싹다 다시 갈아업고 재개발하는 중입니다.

그리고 고대하던 로그인 기능을 드디어 구현하였습니다!

Passport.js를 사용하였고 현재는 Github을 통한 로그인만 지원하며 추후에 로컬ID나 다른 SNS의 회원가입도 지원할 생각이지만 많은 기능들이 Github에 의존하고 있기때문에 당분간 회원가입/로그인 모듈에는 손대지 않기로 하였습니다.

Passport.js의 사용법이 처음에 너무나 이해가 되질않아서 생활코딩의 강좌를 몇번이나 보았던것같습니다. 사실 지금도 몇몇가지가 이해되지 않는 부분들이 있고, 간혹 버그가 보이기도하지만 현재는 일단 작동에 만족하려고합니다. 우선 작동방식을 대략 익힌것만해도 성과라고 생각합니다.

로그인 유무에 따라서 UI를 어떻게 다르게 설정해주는지 아예 감도오질 않았는데 로그인 유무를 확인하는 로직을 개발하고 이를 Pug 탬플릿에서 확인하여 UI를 다르게 처리해주는 방법을 알게되니 이후에 백앤드 단에서 무엇을 또 개발해야할지 보이는것같습니다. 예로들어 로그인 유무를 확인하여 UI에서는 다르게 처리하더라도, 유저가 직접 링크를 통해서 기능작동을 시킬수도 있기때문에 서버측에서도 어떠한 요청이 들어올때 로그인 유무를 다시 확인하여야 할것입니다.

Github을 통해서 로그인을 하게되면 자동으로 MySQL(MariaDB) 서버에 Github의 정보들을 가져오는 동시에 개인페이지가 생성이되고 Github의 모든 레포지토리를 프로젝트로 인식하여 개인페이지의 자료로 사용됩니다.

Github API의 자유로움 덕분에 굳이 로그인 기능을 사용하지 않더라도 우측 상단에 Github 유저 ID만 입력하더라도 동일한 기능을 제공하고 있습니다. 로그인 기능을 확인해보기 위해서는 다양한 Github ID로 로그인한후에 자료들이 어떻게 처리되는지 확인해야하는데 이 기능 덕분에 굳이 Github ID를 만들필요없이 다른 사람들의 Github ID로 데이터 처리의 유무를 확인가능할수 있었습니다.

기존의 개인 유저 페이지의 UI였는데 문제점이 컴퓨터 화면에서는 제대로 작동하지만 모바일에서는 미묘하게 UI가 깨진다는 문제점이 있었습니다.

더 중요한 문제점은 이 UI는 Udacity의 마지막 최종 프로젝트에서 가져온 것인데 Class 이름이라던지 각종 CSS들이 기존 최종 프로젝트의 이름으로 작성되어 있다보니 어느곳에서 작동하는 코드인지 확인하기 힘들었고, 각종 디자인을 추가하면서 유지보수가 너무 힘들어지고 코드의 길이가 너무나 길어져서 다시 재개발해야겠다는 생각을 항상하고 있었습니다.

계속 미루고 미루다가 Udacity 졸업생 Slack 그룹에서 위의 피드백을 받고 더이상 미룰수없겠다고 생각하고 오늘 기존의 UI의 모양을 따르면서 완전히 새롭게 UI개발을 시작하였습니다.

위는 개선된 UI 입니다. 모바일 및 PC화면에서도 완벽히 작동하며, Media Query 구분을 확실히 해둬서 사이즈별로 CSS 유지보수가 쉽게 되었습니다. 아직 빠진 요소들이 몇몇군데 있지만 로그인 기능에 대한 대응을 완료하고 현재 URL 복사같은 기능들을 추가하였습니다.

프로젝트 포트폴리오 뿐만 아니라 개인 소개페이지로 따로 개발을 할 생각입니다. 프로젝트들이 아무리 중요하더라도, 결국 이력서같은 양식은 필요하니깐요. 그리고 우측 상단의 Contact 항목은 Email로도 보낼수 있지만 Socket.IO같은것들을 이용해서 개개인에게 간단하게 채팅을 보낼수 있는 방식으로 개발할 생각입니다.

이제 새로 개발하거나 개선해야할 요소는 아래와 같습니다.

- 회원 관리 페이지 : 회원탈퇴 및 개인 정보 삭제 기능 구현

- 채팅기능

- 프로젝트 상세페이지 UI 개선 - 이미지 및 모바일 대응

이제 NodeJS와 Express에 조금 적응이 된 느낌입니다. Passport.js의 고비를 넘으니 대부분의 문제들이 쉬워보이는 신기한 현상이...

다만 이제 무엇을 공부해야할지에 대한 고민을 조금 해야할때같습니다. 새로운것을 공부해야할지(언어, 프레임워크, 기술) 아니면 코드 알고리즘에 대한 개선을 좀더 공부해야할지.. 사실 코드의 알고리즘을 공부하는게 매우 중요하다고 생각하지만 이건 코드의 품질을 높이는 부분이므로 마치 '수학을 공부한다' 라는 말과같이 조금 막연한 느낌이 있긴합니다.