[개발후기] 알쥐.net 개발 후기

https://alzi.net

AWS - S3, ElasticBeanstalk, CloudFront, RDS,  mailgun.com,

PHP - CodeIgniter,

React, Axios, Mobx, Material-UI, SASS, 

참여율 100% - 역시 모두 혼자 다 만들었다. ㅋ

1. REACT + PHP 사용.

  Fanzeel.com 은 Node.js 서버에 React + Next.js  로 서버사이드 렌더링을 구현해 놓았고, 참 좋다고 여겨졌었는데, 실제로 운영해보니, 나의 부족함을 여실히 느끼게 되었다. 이만큼 개발짬밥먹었으니, Node가 뭐 별거랴, 하는 마음으로, Node 서버에 대한 아무런 지식이 없는 채, 무작정 시작했던 것이다. 개발 자체는 어렵지 않고 테스트 환경에서는 아주 만족스럽게 개발을 했으나, 실제 Production 환경에서, 사람들이 몰리자 이런저런 문제가 발생되었고, Node 서버에 대한 지식과 경험이 턱없이 부족한 나는 잘 대응하지 못했다. Nginx로 Proxy 서버도 구성해보고 여러가지 경험을 하고 공부도 많이 되긴 했지만, 이런 부족한 경험으로 Production 을 운영하는건 뭔가 아니라는 생각이 들었다. 

  그래서 익숙한 PHP 로 다시 돌아왔다. 언젠가 시간이 나면 Node 공부를 좀 제대로 해봐야겠다.

2. SSR 을 포기하고 SPA 로 진행.

  React+Next.js = SSR 의 이점을 포기할때, 아쉬운점이 많긴 했지만, 그래도 SPA만의 장점도 많이 있기 때문에, 지금은 만족하고 있다. 이와 관련된 내용은, 내가 느낀 이 둘의 장단점은,  좀 복잡해서 다음에 써보겠다.

3. Material-UI 사용.

  React 에서 사용할 수 있는 Material-UI 라이브러리를 사용하였다. 사이드바를 누르면 나오는 SideDrawer, 네트워킹을 할때마다 헤의 밑단에 표시되는 Progress, AlertModal, 등등이 Material-UI 라이브러리를 이용하여 만든것이다. 

  MaterialUI 는 매우 멋진 효과들을 쉽게 구현해주기 때문에, 금새 그럴싸한 페이지처럼 보이게 해주어서 매우 좋다. 

  다만, 버튼하나조차  라이플효과를 주기위해 많은 계층구조를 가지고 있는 등, 꽤 무거운 라이브러리 인것 같다. 그리고 위젯하나마다 그렇게 복잡한 계층구조를 가졌기 때문에, 간단한 색상 변경조차,  Bootstrap 같이 손쉽게 CSS 변경을 할 수 없고, MaterialUI 만의 커스터마이징 코드를 구현해줘야 한다. 그게 좀 부담이 되긴 하지만, 그래도 멋진 효과때문에 그냥 포기할 수 없는 멋진 라이브러리 인듯 하다.

4. Netflix 와 비슷한 UI로 만들어주세요.

   이게 대표의 요구였다. 비디오 아이템들을 스크롤하며 볼 수 있게 해달라는것이였다. 우리회사는 모든 사이트를 반응형으로 만들고 있기 때문에, 모바일에서는 사람이 부드럽게 스크롤하게 되겠지만, 데스크탑에서는 페이징 버튼을 직접 만들어줘야 했다. 화면 사이즈에 따라, 자동으로 페이징의 넓이를 계산해야했고, 또 자연스럽고 부드럽게 넘어가게 하기 위해서, 스크롤값이 자연스럽게 줄어들도록 계산을 해주어야 했다. 관련된 내용은 18.10.05 리액트로 smooth scroll 되는 슬라이더 만들기. 여기에 적어 두었다.

5. 초대장으로 회원가입 시스템.

  처음에 초대장으로만 회원가입이 되도록 만들어 달라 해서, 이메일을 통해 초대장을 발송하고, 초대장을 가진사람만 가입할 수 있도록 만들었다. 메일링 서비스는 mailgun.com 을 이용하였다.  관련한 내용은 2019. 1.16. 알지넷에 초대장 시스템 만들기. 이 글에 써 두었다.

6. SASS (scss)

  SASS 정말 사랑한다. 이게 아니였으면, css 때문에 웹개발이 싫을것 같다. create-react-app V2 로 오면서, package.json 에, node-sass 만 추가하면, 바로 .scss 를 그냥 바로 사용할 수 있게 되었다. 

7. 조만간 결제를 붙이게 될것같다.

8. 정기 결제를 붙였다. - 결제 붙인 후기 글

iamport 이용하여, 정기결제 붙이기.

9. 빅카인즈 - 뉴스검색 API 이용하여, 콘텐츠 별 키워드로 최신 뉴스 검색해서 붙이기.

  빅카인즈 이용하여 관련서비스 개발 대회(?)같은게 있었다. 우리 회사에서는 알지넷에 각 콘텐츠별로 관련된 최신의 뉴스를 항상 새로 검색해서 하단에 함께 보여주는 기능을 개발해서 참여하고 입상하였다. 

  가장 적합한 뉴스를 검색할 수 있게 하기 위해서, 관리자 페이지에 콘텐츠 별로 '검색 키워드' 와, '제외해야할 키워드', '반드시 일치해야 하는 키워드' 등의 쿼리를 설정할 수 있게 해서, 관련 정확도를 높였다.