2022 11 10
프로젝트의 성향과 실질 개발시간 16일 가량의 프로젝트 기간을 고려하여 기술 스택을 고려하였다.
WebPack의 경우 속도가 느리기로 유명한데, 팀원 중 Windows를 사용하는 사용자에게는 특히 느리다고 알려져 있다. Vite를 새로 배워서 소요되는 기간보다 WebPack 번들링을 기다리는 데 소요되는 총 시간이 더 길다고 생각했다.
팀원 대부분이 SCSS에 대해 긍정적인 경험을 가지고 있고, 사용 경험이 존재하므로 러닝커브로 인한 프로덕트 성능저하가 일어나지 않을 것이라고 생각했다. React Styled Component의 이점은 props를 넘겨주어서 동적인 스타일을 쉽게 제공할 수 있는 이점이 있는데, 프로젝트의 특성상 스타일이 동적으로 변경되는 DOM 요소가 거의 없으므로, Styled Component의 이점을 제대로 누릴 수 없을 것이라고 생각했다.
IE는 현재 지원이 종료된 브라우저이며, 국내에서도 0.5% 이하의 사용자만이 사용하기 때문에 신규 서비스를 런칭하는 입장에서는 고려하지 않아도 무방하다고 생각했다. 추가적으로 이 프로젝트가 three.js를 사용한 WebGL 위주의 프로젝트이므로, IE 11은 WebGL의 성능을 제대로 끌어내지 못한다고 생각했다.
상태관리가 필요한, 즉 서로 다른 계층 간 통신이 필요한 부분이 그렇게 많지 않을 것이라고 생각해서 프로덕트 시작시에는 상태관리를 사용하지는 않을 것이다. 단, 점진적으로 상태관리가 필요하다고 판단될 때 Zustand를 도입할 예정이다. Redux, MobX, Recoil 등을 제외하고 Zustand를 상태관리 라이브러리로 채택하게 된 이유는 다음과 같다.
- React-Three/Fiber를 주된 캔버스 라이브러리로 사용하게 되는데, 같은 제작자들이 제작한 Zustand가 React-Three/Fiber와 호환성이 좋을 것이라고 생각했다.
- Redux와 비교했을 때 러닝커브가 낮으며, React Hook과 유사한 만큼 React에 익숙한 조원이 많은 환경에서 빠르게 프로덕트를 만들 수 있을 것이라고 생각했다.
- react-three/fiber의 디펜던시로 zustand가 있다.
- recoil을 사용하면 리액트 컴포넌트와 react-three/fiber 간 통신이 안되는 잠재적인 문제점이 발견되었다.(https://github.com/facebookexperimental/Recoil/issues/559)
- 간편함
- 로드밸런싱(트래픽 나눠주는거)
- 오토스케일링(트래픽 적으면 서버를 적게 두고 많아지면 서버를 많이 둠)
- 컨테이너 개수가 바뀌는건데 최대개수 설정해둘 수 있는가? -가능할거임
- 오버테크가 아닌가요?
- 나머지는 자동이라
- NCloud 쿠버를 쓴다고 하면 초기세팅이 될 거다
- 쿠버 인스턴스를 처음부터 설치를 해서 처음부터 시작하면 빡셀수 있으나 AWS 등에선 자동으로 설정되어있더라
- 도커로 컨테이너라이제이션-쿠버에 넣기만하면 됨
- NCloud에도 간단한가? - 써봐야안다
- AWS는 간편했었음
- NCloud에도 쿠버네티스가 도커 이미지만 올려놓으면 된다고 하네요
- CPU에 따라 달라지는데 버추얼머신 써서 동일한 사양으로 쓰고 싶은데 이걸 경량화해서 썼다
- 서버에서 버전별로 관리도 할 수 있고 서버가 여러개다 보니까 묶어서 이미지로 만들면 좋더라
- 분산서버를 쓰면 물리적인 서버가 여러대인데 각 서버의 하드웨어가 조금이라도 달라지면 오류가 나온다
- 짠 코드가 변환이 되면서 CPU 코어를 직접적으로 건드리는데 컴파일되는 과정에서 하드웨어에 맞춰줘서 변환됨 그 과정에서 오류가 생길 수 있다
- 가능성을 배제한다는 측면에서
- 자바스크립트도 똑같다고?
- 파이썬 모듈이나 자바스크립트 모듈을 깔아줄 때 오류 뜰 수 있음
- 버전사양도 맞춰
- 수작업으로 할 수 있는 걸 자동화시켜주는 데에 의의가 있음
- 서버 죽으면 데이터가 날아가는데 새로 설정을 해줘야 하는데 그 부분을 자동화할 수 있다더라
좀 더 자세한 계층구조와 세부 기능명세를 가진 백로그 초안을 기반으로 Google Docs로 정리하였다.
- 폰트는 Mapo꽃섬을 사용한다.
- 컬러 시스템은 위의 이미지와 같으며, 다른 톤의 컬러는 위의 이미지와 구분되면서 잘 어울리는 파스텔 톤의 색상을 차용할 수 있다.
https://docs.google.com/document/d/1a8vpQ7ylzs3t5CGX9xyjogO-NdcoLd-5ze8_Glm3sqY/edit?usp=sharing
| 1주차 | 2주차 | 3주차 | 4주차 | 5주차 | 6주차 |
|---|---|---|---|---|---|
| 정욱 | 종찬 | 기종 | 세연 | 종찬 | 세연 |
