[개발] 금융 커뮤니티 - 리치에이블 개발일지 #1

개발목적

현대사회에 들어서는 사람들이 저마다 자신의 장점을 표현하고 싶은 욕구가 있다. 보통 사람들은 온라인 공간에 이야기를 하게되면 시기 질투를 받게된다. 이러한 욕구를 충족할 수 있도록 사회적 합의하에 자랑이 용인된 곳에서 자유롭게 의사교환을 하면 좋겠다고 생각을 하여 다음의 금융 커뮤니티를 만들고자 한다.

 

개발일지

Next.js 기반에 Auth.js로 인증 인가를 적용 후 회원 가입시 이메일 인증을 통하여 로그인 가능하게 구현하였다. 자체 이메일 서버를 구축을 하여 발송 전용 계정을 생성했다. 추후 서비스가 오픈되면 이메일/메신저 서비스 추가도 고려 예정이다. 

로그인화면

메인화면은 트위터의 컨샙으로 피드를 작성할 수 있으며 따로 전통적인 커뮤니티 게시판을 마련하였다. 추후 포인트 제도를 통해서 각 게시판의 대결구도를 연출하고 게시판 대표자를 선임하여 국회의원 총선거와 같이 예산을 받아 서로 경쟁하는 것을 적용해보고자 한다. 또한 사이트 내의 포인트를 통하여 게시판 통제권을 가지는 것도 재미 있을 것 같다.

 

다음은 이메일 인증 시스템을 구현하기 위해서 필요한 인증 페이지이다. 테스트 할 때마다 React의 Strict Mode 로 오류 검증을 위하여 useEffect가 2번 실행이 되었다. 원래 성공해야하는 로직인데 자꾸 실패한다고 떠서 잠시 해맸던 부분이다. 실제 Production 환경에서는 useEffect는 1번만 실행된다. Next.js에서는 Strick Mode 를 True로 하는 것을 강력 권장하기에 다른 테스트 방안을 강구해보아야 할 것 같다. 해당 사이트는 API가 아닌 Server 컴포넌트로 하여서 직접 페이지 호출 하는 수 밖에 없었다.

 

인증페이지

ps. 메일 서버 구축방법은 다음의 글을 참고바란다

[정보] 메일서버 쉽게설치하기 docker mailserver

 

 

접속주소

접속 주소는 다음과 같으며 이 글 작성 시점에서는 회원가입하여 이메일 인증 후 로그인 동작까지 가능하다. 상세 데이터는 가끔씩 방문하면 바뀐 것을 확인 할 수 있다.

https://richable.cyber-luna.com

리치에이블 - 로그인

소스코드

https://github.com/TwoIceFIsh/richable-web-server

GitHub - TwoIceFIsh/richable-web-server: richable-web-server