토이 프로젝트는 말그대로 장난감이다. 안전한 환경에서 넘어지면서 배워나가는 것이다. 이번 미션은 바닐라 JS로 SPA 만들면서 이것저것 시도해보고 고민해볼 수 있었다.
✨웹팩 다뤄보기
웹팩을 언젠가는 꼭 해봐야겠다 생각을 했왔다. 저번 주는 모듈을 사용하지 않으면서 겪었던 문제를 해결하기위해 객체 리터럴을 사용해다면 이번 주는 모듈을 사용하면서 모듈 번들러의 강력함을 느껴 볼 수 있었다. 바벨과 폴리필 그리고 Eslint 그리고 의존성관리에 alias를 사용한다던지, 미리 환경변수를 사용한다던지 등의 빌드를 통해 얻게 되는 여러 기능들을 사용해보며 웹팩의 강력함을 느낄 수 있었다.
웹팩이 계속 업데이트가 되어서 옛날 자료를 보며 한게 많아 아쉬움이 조금 남는다. 최신 버젼과 새로운 기능들을 반영하여 보일러플레이트를 관리하는 것도 재밌을 거 같다.
✨Nginx 써보기
인프라 부분에 약했던게 사실이다. 웹서버와 앱서버의 차이점도 모르고 있었다니... 반성의 의미로 Nginx를 사용해 봤다. Nginx 설치하고 (항상 뭐 새로 설치해보려하면 어디선가 막힌다...) 서버에서 웹팩으로 빌드를 시키고나서 Nginx에서 뿌려주도록 하였다. 프록시 서버로서 api 요청에 대해서 전달시키는 것도 해봤어야 되는데, 다음번에는 로드밸런서랑 같이 시도해봐야겠다.
✨세션 로그인 구현해보기
서버쪽에서 세션을 사용해 로그인도 구현해보았다. 쿠키는 보안상에 HTTP에 같이 실리니 보안 상에 문제가 있으니 세션을 사용하면 서버 메모리를 잡아먹기는 해도 안전하다. 사실 안전하지는 않고 세션 로그인 당시 ip를 저장해두었다가 검사한다고도 한다. 서버에서 저장된 전체 세션을 보고 싶은데... nodejs에서 명령어를 모르겠다...
✨상태관리
프론트엔드의 핵심 중 하나가 상태관리인데, 이번에 바닐라JS를 쓰면서 왜 리액트를 쓰는지, Redux 같은 상태관리 라이브러리를 쓰는지 이제는 경험으로 설명할 수 있게 되었다... Flux 패턴에 대한 혼돈이 있었는데, 리액트 != Flux, Flux != Redux 라는 것을 알게 되었고, jotai, recoil, xstate 등 좋은 상태관리 라이브러리도 많이 있다는 것을 알게 되었다. 지금은 redux를 겨우 이해하는 뉴비 이지만 다른 라이브러리도 꼭 공부해봐야겠다.
사실 이번 미션 완성을 못했다. (이것 저것 해보느라...) 아쉽기는 한데 평소 공부하고자 했던 것들을 해볼 수 있어서 좋았다. 다음 미션도 학습에 목적을 두고 (하고싶은게 많다) 열심히 해서 글 남기겠다...!
