개발일지 (1월 4주차 & 1월 5주차 회고)

 

Overview

 

최근 2주동안 멤버쉽 구독 관련 개발을 계속 진행했다. 멤버쉽이라는 것이 웹페이지 하나, 혹은 서버 API하나 잘 만든다고 잘 돌아가는 것이 아니라 전체 플로우를 고려해야 하기 때문에 클라이언트(앱), 웹뷰, API 서버, 멤버쉽 서버, 결제서버 등의 전체 아키텍쳐를 이해하고, 전체 플로우차트를 같이 설계하고, 각각의 요소들에 있어서 역할과 책임을 명확히 분리하고 논의하는데 주로 시간을 사용했다.

 

 

웹뷰는 결제 랜딩 페이지 2개를 동시에 개발했다. 기획이 확정되지 않은 상태에서 개발을 진행했기 때문에 Nextjs를 사용해서 만들기는 했지만, 결국에는 사실상 Nextjs를 사용하는 것이 별로 의미가 없어보이는? Static HTML 형식으로 개발이 되었다.

 

 

웹 서버를 하나 두고 클라이언트의 요청이 있을 때마다 해당 요청을 받아 HTML을 Generate해서 전달하는 SSR방식을 고려하여 개발하였으나, 서버 인스턴스를 줄여 관리해야 할 리소스를 줄이는 것이 전체 시스템을 관리하기에는 더 용이하고, 비용 측면에서도 유리하기 때문에 EC2 인스턴스에 배포했던 내용을 뒤집고, Static HTML(+JS, CSS)를 생성해서 S3 Bucket에 배포하는 방식을 사용했다.

 

 

물론 EC2 인스턴스에 웹 서버를 배포하는 것도 분명한 장점이 있지만, 해당 페이지가 변경사항이 거의 없는 Static 한 페이지라는 점, Server Side에서 처리해야 할 정보들이 거의 없다는 점, 그리고 웹뷰이기 때문에 SEO대응 등의 이슈로 Server Side에서 미리 HTML을 만들 필요가 없다는 점 등을 고려했을 때, S3 Bucket에 Static HTML을 배포하고, React를 사용하여 SPA방식으로 페이지를 그리는 방식도 크게 문제가 없을 것이라는 판단을 내렸다. 

 

 

React의 Atomic Design + Container_Presenter Pattern을 적용하여 로직과 뷰를 분리하고, 재사용한 컴포넌트의 갯수를 최대화하는 설계 방식이 점점 추가되는 기능들을 대응하는데는 큰 장점으로 다가왔던 것 같다. 

 

 

 

CSS

 

white-space: pre

텍스트에 대한 줄 바꿈 속성 옵션 중의 하나인데, 적용된 박스 안에서 개행문자와 <br/> 태그에서 줄 바꿈을 할 수 있는 속성이다. 번역이 들어가야 하는 텍스트의 경우 적당한 위치에 개행문자 \n을 통해 적절한 위치에서 줄바꿈을 적용할 수 있다. 공식 문서에 따르면, nowrap 옵션을 사용할 경우, <br/>에서만 줄 바꿈이 일어난다. pre 옵션 자체는 모든 브라우저에서 호환이 되기 때문에 웹뷰 작업에 적합하다.