원티드 프리온보딩 10월 프론트엔드 챌린지 후기

2주 간 진행됐던 원티드 프리온보딩의 10월 프론트엔드 챌린지도 마무리되었다.

이번 챌린지는 이전과 달리 실습하는 시간이 굉장히 많이 주어졌다.

이전 챌린지들은 주로 이론으로 진행되거나, 실습도 시간이 주어지기 보다 프로젝트가 주어지고, 개인 시간을 활용하도록 진행됐다.

그러나, 이번 챌린지는 하루 3시간 강의 시간동안 약 1시간 30분이 실습 시간이었다.

강사님이 배달의 민족 소속이셔서 그런걸까? 진행 방식이 신선했다. 단순히 전달하는 방식이 아닌 직접 생각해보고, 고민해보고, 구현해보는 시간알 갖도록 해주셨다.

실습을 하게 되니 직접 코드도 작성해보고 학습도 더 잘 되는 기분이었다.

 

강사님의 진행은 모든 내용을 깊숙히 파고 드는 느낌보다 핵심만 짧고 빠르게 전달해주시는 느낌이었다.

개인적으로는 이 진행이 좋다고 느꼈다. 내용이 길어지면 오히려 집중력이 갈수록 떨어졌기 때문이다.

그렇다고 대충 진행하시지 않는다. 질문에 대해서는 모두 답변해주시고, 참가자들이 이해하지 못한 부분이 있다면 다시 설명해주시기도 하셨다.

 

그렇다면, 이번 챌린지에서는 무엇을 배웠을까?

서비스를 만들 때, 기본적으로 꼭 구현하게 되는 '로그인'에 대해 배웠다. 단순히 로그인이 무엇인가에 그치지 않고, '토큰', '세션', 'oAuth', 로그인 외 필요한 구현들 등 로그인의 전반적인 내용을 다루었다.

 

동작 과정을 이론뿐만 아니라 실습을 통해 코드를 직접 작성해보면서 글로만 배우는 것보다 더 개발자 느낌으로 배우는 느낌이었다. 물론, 실습으로 작성된 코드들은 실무에서 사용할 수는 없는 코드들이었지만, 대충 어떻게 구성이 되는지 알 수 있었다.

 

1. 로그인의 개념과 기초 실습

첫 번째 날은 로그인에 대한 기본적인 개념을 배웠다.

포털 사이트에서 로그인에 대한 정의, 예시 등을 확인해보고, 프론트엔드에서 로그인을 어떻게 바라보고 구현해야 하는지 전달해주셨다.

 

(아! 백엔드에서도 로그인을 어떻게 바라보고 구현하는지 정말 간단하게 알아보는 시간도 가졌다.)

 

그리고, 로그인 기능을 구현하기 전에 페이지를 구현하는 실습 시간을 가졌다.

다양한 라이브러리를 활용해도 상관없을 정도로 정말 자유롭게 로그인을 할 수 있는 페이지를 구현하였다.

 

그리고 로그인이 제대로 동작되는지 'Mock API'로 테스트도 진행했다.

로그인을 진행할 때, 데이터를 쿠키, 세션, 로컬 중 어디에 저장해야 하는지 의논하는 시간도 가졌으며, 구현한 레이아웃을 전체적으로 다듬는 시간으로 실습을 마무리했다.

 

강의가 끝나기 전, 유지보수 관점에서 'CSR', 'SSR'을 어떻게 바라봐야 하는지 간단하게 이야기를 나누었고, 질의문답 시간으로 마무리됐다.

 

10월 프론트엔드 챌린지, 로그인의 개념과 기초 실습

 

2. 토큰과 보안

두 번째 시간은 이전 시간에 구현한 로그인 페이지에서, 로그인을 진행할 때 토큰으로 진행될 수 있는 시간을 가졌다.

인증 방식의 토큰에 대해 기본적인 개념과 정의, 예시를 알아보고, 전체적인 흐름에 대해 예시 코드와 이미지로 학습하였다.

 

이론 시간을 마치고 바로 실습에 들어갔다.

실습을 하면서 요청을 보내고, 응답을 받는 과정에서 토큰을 주고 받도록 구현해보는 시간을 가졌다.

이 때, 서버 코드는 직접 작성해보지는 않고 프로젝트에서 서버 코드가 미리 주어졌다. 물론, 서버 코드도 어떻게 구현되었고, 어떻게 동작하는지 설명해주셨다.

 

이 후, 자동 로그인은 어떻게 구현할 수 있는지, 토큰 방식의 보안에 대해 설명해주셨고, 기존에 알고 있었던 부분은 복습을 하는, 모르는 부분은 새로 학습할 수 있었다.

 

보안에 있어서 프론트엔드가 직접 해볼 수 있는 일은 많지 않다는 것도, 보안을 예방하기 위해 어떤 방법을 활용해야 하는 것도 알아가는 시간이었다.

 

10월 프론트엔드 챌린지, 토큰과 보안

 

3. 세션과 쿠키

로그인을 일정 시간 동안 서버에 유지 및 인증하는 방식의 세션에 대해 알아보고, 이전 시간에 구현한 코드를 세션으로 구현해보는 실습 시간을 가졌다.

그리고, 그 세션을 쿠키에 저장해보는 방식도 진행되었다.

 

물론, 서버 코드는 미리 구현되어 있었고, 당연히 설명도 해주셨다.

 

세 번째 시간에서 중요하게 생각되는 부분은 'CORS'이었다. 로컬 환경에서 실습이 진행되어 'CORS' 에러를 발생하는 경우가 거의 없지만, 브라우저에서 보안 설정이 되어 있어서 이 부분을 해제하고 진행되었다.

프론트엔드가 'CORS' 처리를 할 경우는 거의 없다고 하셨지만, 제대로 알 필요가 있다고 생각하며, 이전에도 몇 번 다룬 적이 있었지만 아직 제대로 처리하지는 못해서 더 알아가야 할 필요가 있다고 느꼈다.

 

그리고 실습을 진행했는데, 세션으로 구현되도록 하였고, 요청할 때 'header'에 "credentials: 'include'"를 포함하여 처리하도록 구현했다. 

실습을 하고 나서, 다시 한 번 세션으로 로그인이 동작하는 과정을 설명해주셨다.

이미지로 설명이 되어 있어서 말과 글로만 설명되는 것보다 훨씬 이해하기 쉬웠다.

 

실습이 종료되고, 실제 서비스를 위해 로그인 외 필요한 기능들, 토큰 방식과 세션 방식의 장단점 그리고 이전 시간에 많은 사람들이 질문한 내용에 대해 답변하고 설명해주셨다.

 

10월 프론트엔드 챌린지, 세션과 쿠키

 

4. 권한 관리

마지막 시간에는 이전 시간의 내용들을 모두 간단히게 복습하였고, 로그인 계정에 따라 다른 권한이 주어지는 것에 대한 주제로 진행됐다.

어드민 계정과 회원 계정에 따라 다른 권한이 주어지고, 나타나는 메뉴도 다르게 출력되도록 말이다.

 

로그인 요청이 왔을 때, 유저를 확인하고 그에 맞는 권한이 주어지고 관리되도록 구현하는 실습이 진행됐다.

실습에서는 Router에 어드민 계정에 'isAdminPage' 값을 'true'로 주어 확인할 수 있도록 하였다.

이 'isAdminPage' 값에 따라 유저를 확인하고 권한이 주어지도록 구현했다.

 

로그인 기능을 구현하고, 로그아웃 기능도 구현하였다.

로그아웃을 할 때, 클라이언트와 서버에서 어떻게 처리하는지 알아보았다.

 

실습에는 정말 간단하게 전역 상태관리를 위해 'Recoil'도 다루어 보았다.

그리고 'Refresh-token'이 유지되는 방법, oAuth/소셜 로그인, 싱글톤 패턴, 리액트 함수형 컴포넌트 정의, 커스텀 훅 등 여러가지 주제로 이야기를 간단하게 나누었으며, 질의문답을 마지막으로 10월의 프론트엔드 챌린지가 마무리 되었다.

 

10월 프론트엔드 챌린지, 로그인 전체

 

이전에 진행됐던 챌린지들도 정말 훌륭했고, 많은 도움이 됐다.

그러나, 이번 챌린지는 직접 생각해보고 고민해보고 구현해보는 시간이 많은 것이 차이점이였으며, 개인적으로 학습에 있어서 방식이 더 좋다고 생각이 들었다.

 

예전에 NextJS를 주제로 진행한 챌린지가 있었는데, 그 챌린지도 많은 내용을 다루고, 코드도 보고 만져보는 시간을 가졌었다. 너무 많은 내용을 다루어서 조금 어려웠지만 강사님이 굉장히 적극적이었고, 참가자들도 굉장히 활발한 분위이였기 때문에 재밌었고, 유익한 시간이었다.

이번 시간은 그 때보다 차분했고, 덜 활발했지만 주제가 집중할 수 밖에 없었고, 실습 위주로 진행되어서 다른 느낌으로 재밌었고 유익했다.

 

그래서 다음 챌린지는 어떤 주제로 어떻게 진행될 지 궁금해졌다.