빼빼로와 함께 따뜻한 메시지를 전해보세요
빼빼로를 만들고 메시지와 함께 줄 수 있는 간단한 웹 풀스택 프로젝트입니다.
당연히 훅 기반으로 만들었습니다. 최대한 적당하게 컴포넌트를 분리하려 하였으나 역시 빠르게 작업하다보면 리팩토링 하는 데에 쉽지 않네요. 그래도 리액트 훅은 여전히 신선합니다. 개인적으로 이거 만든 사람은 정말 똑똑한 게 아닌가 싶어요.
사실 전역 상태관리가 그다지 필요하지는 않습니다. 다만 인증 정보와 로그인 회원 정보는 전역으로 관리 할 필요가 있어서 그 부분에만 사용하고 있습니다.
경험상 대부분의 프론트엔드 작업은 국지적으로 원격의 값을 보여주는 작업이었습니다. 이 페이지의 값이 다른 페이지에 연동 되거나 해서 전역으로 상태를 관리 할 일은 그다지 많지 않았죠. SWR은 그런 환경에서 데이터를 가져오는 데에 매우 효율적인 솔루션을 제공합니다. 데이터를 가져오고, 또 필요한 경우 다른 페이지에서 같은 값을 표현해줄 때 아주 편리했습니다.
개인적으로 StyledComponents보다는 Emotion쪽이 더 편했습니다. 다만 시간관계상 재사용성을 아주 고려해서 짜진 않았어요. 그리고 상위 요소에만 Emotion의 css속성을 넣어두고 나머지 하위 요소들은 대부분 className을 부여해서 Emotion css에 selector로 불러와 관리했습니다.
이것도 기술 스택이라 불러도 되나 모르겠지만 아무튼 JWT를 사용해서 인증을 처리합니다. 만료 기한이 짧은 AccessToken과 만료 기한이 긴 RefreshToken으로 구성 되어 인증 응답을 보내며, RefreshToken은 로컬 스토리지에 저장해두고 AccessToken이 만료 될 경우 Refresh를 하도록 했습니다. api.js 파일에 해당 내용이 있어요
이 프로젝트를 닷넷(.Net)5로 생성하자 마자 닷넷6가 출시되었습니다(...) 그래서 NuGet(패키지매니저)에서는 닷넷6 기반의 패키지를 받아오려고 하고 프로젝트는 닷넷5 기반이라 꼬이는 일이 있었네요. 아무튼 제가 애정하는 웹 개발 프레임워크인 ASP.Net Core를 백엔드 프레임워크로 사용했습니다.
보통 어느정도 규모가 되는 프로젝트의 경우 많은 기능을 Controller 레이어에 배치하지 않고 Service 레이어에 배치하는데, 이 프로젝트는 규모가 워낙 작아서 Controller에 대부분의 로직이 들어가있습니다.
ORM입니다. EF Core의 방대한 기능에 비해 정말 민망할 정도로 기능을 사용하지 않았습니다. 그냥 간단하게 조회하고 저장하는 용도로 씁니다.
https://pepero.buzy.run 서버는 Azure의 PaaS인 App Service 위에서 동작합니다. AWS의 Elastic Beanstalk와 유사한 녀석이죠