안녕하세요 피플 개발자 이지원입니다.
피플은 현재 어플과 웹사이트 두 가지 서비스를 운영중인데요,
어플은 크로스 플랫폼인 flutter를 이용해서 개발을 진행중이고,
웹사이트는 typescript기반 React로 운영하다가, 올해 3월 Next js로 개발을
하여 새로운 기능과 함께 웹사이트를 운영하고 있습니다.
저는 피플에서 웹사이트 개발을 맡고 있습니다.
오늘은 피플 웹사이트 개발의 변천사를 적어 내려고 합니다.
React로 개발된 피플 사이트
처음 피플 웹사이트는 일반 typescript기반으로 CSR 방식의 React로 개발되었습니다.
그 당시에는 피플 어플이 우선이기 때문에 어플에서 지정헌혈 사연을 공유하면 보여주는 화면, 피플 소개 화면
을 보여주는 작은 사이트 였기 때문에 비용적인 측면에서도 CSR 방식의 React가 효과적이었습니다.
React의 배포과정
피플팀은 AWS를 이용하여 프론트엔드를 배포하고 있습니다.
- react 파일을 빌드하여 정적파일을 aws s3에 올린다.
- route 53을 통해 웹사이트에 사용할 도메인을 구입한다.
- CDN을 이용하여 보다 사용자들이 빠르게 접속할 수 있도록 cloudFront를 이용한다.
- cloudFront와 s3를 연결하고 route53까지 연결하면 끝이다.
이렇듯 React를 이용한 배포는 참 편리하고 간단해서 좋았습니다.
그럼에도 Next js로 변경한 이유는 뭘까요?
❓❓❔❔❓
React로 개발된 피플사이트의 단점
일반적으로 React는 CSR방식이기 때문에 웹사이트 소스를 사용자가 접속하면 js로 만들어주기 때문에
뼈대는 텅 빈 코드와 마찬가지 입니다.
그러다보니 검색엔진 부분에 있어서 단점이 있었습니다.
물론 네이버와 구글에 피플, 피플헌혈 등으로 검색하면
위와같이 첫 피플에 관한 소개는 검색이 되지만
위 사진처럼 피플에 관한 정보가 아닌 피플 서비스에서 작성된 게시글들이 검색되지는 않았습니다.
이러한 검색엔진 단점이 있어서 피플은 React -> Next js로 개발을 하게 되었습니다.
Next js로 개발을 하면서...
기존의 React로 개발된 사이트는 피플의 소개 페이지와, 공유된 사연의 게시글을 보여주는 기능뿐 이었지만,
피플 어플에 있는 기능들을 웹사이트에서도 할 수 있게끔 많은 기능들을 추가하였습니다.
(현재도 어플에 있는 기능 100%를 소화하진 않지만 꾸준히 개발중입니다...)
처음으로 Next js를 이용해서 배포를 하다보니 어려움이 많았지만, 팀원들에게 다들 좋은 경험이라고 생각이 됩니다.
Next js 배포 과정
Next js를 배포할 수 있는 서비스는 아주 많이 있습니다.
AWS s3,lambda,elastic beanstalk,amplify
Next js를 개발한 vercel 등등.. 여러가지가 있지만
피플팀은 elastic beanstalk를 선택했습니다.
이유는 아래 링크를 참고 했습니다.
(사실 제 개인블로그입니다. 많이 사랑해주세요 ❤️)
링크
배포 과정은 아래와 같습니다!
- Next js를 빌드하여 빌드파일인 .next폴더와 public 폴더 package.json 파일을 묶어서 압축한다.
- eb 인스턴스에 올린다.
그러면 이렇게 ok표시가 나오게 되는데
그럼 끝입니다!
참 쉽죠??
끝으로
오늘은 피플팀의 프론트엔드에 대해서 이야기 해보았는데요,
개발을 포함하여 피플팀은 아직도 부족하고 가야할 길이 멀다고 생각합니다.
하지만 그럼에도 좋은 팀원분들과 꾸준히 활동하면서 더 큰 가치를 창출해 낼 수 있도록 열심히 운영하고 있습니다.
많은 응원과 관심 가져주시면 감사하겠습니다!
