프론트엔드 취준생 next js 로그인 구현이 막막합니다.

Question

프론트엔드 개발자 취업준비생입니다.nextjs 배운 후에 게시판 관련 사이트 만드는 중이고, 로그인 구현이 막막한 상태입니다..[아이디&비번&비번확인] 입력해서 해쉬된 비밀번호로 firebase에 유저를 저장하는 정말 기본적인 것만 구현했습니다. (추가로, 유저를 저장할 때 nextjs api폴더 route파일을 사용하여 기존에 이미 가입된 유저가 존재하는지 validation과, 정규표현식 기본적인 것만 익혀 이메일형식 및 비밀번호 형식을 검증하는 부분까지 만들었습니다)라이브러리에 의존하지 않고 유튜브 외국 영상 참고하면서 그 후의 작업을 진행하려고 했는데, 따로 백엔드폴더가 있고 express?를 사용하더라고요… 이 이후로는 손도 못대고 있습니다.사실 next-auth 라이브러리를 사용하는 외국 유튜브 영상도 참고하며 실습해봤는데, 로그인 폼까지 아예 기존에 있는 걸 갖다붙인 느낌이라 쓰면서도 제가 이해하고 코드를 짰다는 느낌이 안나서 사용하지 못했습니다.혹시 라이브러리없이 로그인 구현하는 경우에는 이런 express같은 걸 모르면 작업이 어려울까요? 쿠키, 세션, 로그인 절차에 대한 이론 공부도 강의를 참고하며 대략적으로 이해한 상태인데, 막상 코드로 녹여내려니 막막합니다.프론트엔드 신입 취업준비하시는 분들은 혹시 로그인쪽 어떻게 하고 계신지, 혹은 라이브러리 사용하시는지도 궁금합니다..게시판에 다양한 기능 넣어서 코드를 짠 상태인데, 이걸 이제 로그인기능을 붙여서 각 유저별로 데이터를 따로따로 저장하는 부분을 구현하려니 막막하네요.. 키워드라도 도움 주신다면 감사하겠습니다. // 유저 정보를 저장하는 json파일 { &#34;users&#34;: [ { &#34;email&#34;: &#34;naver&#64;naver.com&#34;, &#34;password&#34;: &#34;$2a$12$Ahm2Yn0t9YWZ8QD12wlhSugZzz4SdOyR1Hu8TaZnKZN3.sHkBZLMy&#34;, &#34;id&#34;: &#34;P9uEveO&#34; }, { &#34;email&#34;: &#34;email&#64;email.com&#34;, &#34;password&#34;: &#34;$2a$12$QGEU/GmdPdbJEXmaJNgqBOsTg6olzveYctY1gAUAwFH6yzhQDX8I2&#34;, &#34;id&#34;: &#34;dZS83_J&#34; } ] }

brian55 · Answer

프론트 취준 준비한다 하셨는데 말씀하신부분들은 보면 db가 필요하다고 보여집니다. 하지만 질문하신걸보니 관련 지식이나 이런건 전무하신 것 같은데 프론트쪽만 그냥 준비하세요이제와서 백단 공부해서 적용한다고 해봤자 결국 그냥 매몰비용만 증가할 뿐입니다. 그런지식들 어차피 프론트채용과정에서는 다들 관심도 안가져요. 그냥 openAPI사용해서 어떻게 잘 랜더링할지에 대한 프로젝트를 만드세요

Hee Sung Son · Answer

근본을 배운다는 건 좋은 취지라고 생각합니다. 시판 피자를 먹더라도 피자구성이 페페로니가 들어가고 피클이 포함된것이고 등등 알면 좋긴하죠.일단은 처음이시니까 상황에 맞는 피자만 가져와서 잘먹는 방법부터 먼저 하시는게 우선인 것 같습니다.매운거 땡기면 디아볼릭 피자를 시켜먹자! <-- 요런 느낌으로 다가요.물론 나중에는 라이브러리가 어떻게 돌아가는지 알면 좋습니다.언제 좋냐면 만약에 지금 필자님이 고민중이신 로그인 프로세스에서 문제가 생겼을때로그인 프로세스를 알기 때문에 빠른 대처가 가능합니다.라이브러리에 너무 의존하게되면 라이브러리 자체의 버그가 생겨도 대응할 수 있는 방법이 없는 경우도 있기때문에 ,원리를 알게되면 해킹?해서라도 고칠 수 있는 우회 방법도 생각이 가능합니다.

스르르 · Answer

oauth 간편로그인 정도만 구현해보시는 건 어떠신지.. firebase 쓰시면 진짜 간단하긴 하거든요

아리까리 · Answer

nextjs 쓴다고 하셨으니까 백단 구현 비스무리하게next-auth를 써보세요. Credential 방식으로요.next-auth에서 sns 로그인으로 적용하면 너무 쉬워서 금방 끝나니까가상의 프로젝트에서 실제 쿠키방식의 세션관리가 되는것 처럼껍데기 로직은 next-auth로 충분히 만들수 있어요. 모두들 알면서도 감빡하는게프론트엔드 개발자가 더 많이 써서 그렇지 기술적으로 nextjs는 백엔드가 맞긴 합니다.

프론트엔드 취준생 next js 로그인 구현이 막막합니다.

4개의 답변

기술 목록