[1~2일차] 기술스택 선정 및 Material-UI 로 대략적인 화면 구성

iPhone을 사용하는데 맥북은 없고, 앱스토어에서 앱을 받아쓰자니 믿음이 안가 웹앱 방식으로 개발해서 음악 재생 서비스를 만들겠다는 지극히 개인적인 목적으로 시작했다. 그런데 글을 쓰면서 개발을 진행해보니 귀차니즘이 어느정도 누그러지는 듯하다. 그래서 본격적인 개발 프로젝트에 대한 진척과 뻘짓을 기록하고자 카테고리를 따로 생성했다.

 

프로젝트 가능여부를 확인하기위해 react + firebase 서비스를 이용해 indexed DB를 활용한 테스트용 음악 재생 웹앱을 만들어 보았었다. 테스트 과정은 아래 포스트를 참조해주기 바란다.

 

https://ddochea.tistory.com/86

[javascript] 브라우저의 indexedDB 및 WebSQL을 손쉽게 사용할 수 있는 localForage 라이브러리

https://ddochea.tistory.com/87

[javascript] blob으로 저장된 미디어파일 재생처리

https://ddochea.tistory.com/88

[javascript] React 웹 앱 Firebase에 호스팅하기

 

테스트 결과 내가 쓰는덴 충분히 만족스러웠다. 비록 이어폰이나 잠금화면에서 이전 곡, 다음 곡을 지원할 수 있는 방법을 구현할 수 없는 한계가 있었지만 구글 드라이브에 올려두고 한곡 다 들을 때마다 다음 곡을 직접 선택해야 하는 번거로움이 사라진 것만으로도 편했다.

 

따라서 본 개발을 진행하기로 마음을 먹었고, 공개적으로 학습하자는 Shawn Wang 개발자분의 말씀에 따라 개발과정(이라 쓰고 뻘짓이라 읽는다.)을 포스트로 작성할 생각이다.

 

필자는 .NET으로 먹고사는 개잡병이라 웹 프론트엔드는 지식이 짧다. 더군다나 기술스택으로 선택한 React는 이번이 처음이므로 프론트엔드 개발자가 보기엔 답답할 수도 있다.

(사실 .NET 포스트도 답답하긴 마찬가지겠지만.. 😂)

 

포스트는 일차별로 무엇을 주로 진행했는지 작성할 예정이다.

1일차 : 기술스택 정의 및 프로젝트 구성

정식개발로 어떤 기술을 적용하여 개발할지 정했다. 이미 테스트 당시부터 정한거라 그닥 오래걸리진 않았다.

1. React (Typescript)

회사에선 웹 프론트엔드로 Vue를 사용했었다. Vue 가 사용하기 쉬운점도 있었고, 무엇보다도 3rd party UI Framework인 Vuetify가 개발하기 매우 편해서 사용한 점도 있다. (트리뷰 제공하는 UI Framework는 이것밖에 못찾았다.)

개인적으론 React와 Vue 중에 더 쉬운걸 뽑으라면 Vue가 쉽다고 말할 것이다. 처음 웹 프론트엔드를 접할 때도 쉬워보여서 선택했고, 지금도 상대적으로 쉽다고 느껴진다. 그런데 오래전 .NET과 Java 중 선택의 기로에 놓였을 때, 잘못된 선택으로 이직도 연봉도 나락으로 떨어진 현재 내 상태를 보면 상대적으로 입지가 적은 Vue에 계속 손대는 건 아닌 것 같다.

 

그리고 이번 개발에선 Typescript를 적용해 볼 예정이다. javascript 특성상 타입을 사전에 정의할 수 없어 오류나는 일이 종종 있었는데, vuetify가 아직 Typescript를 지원하지 않아 사용할 수 없었다.

2. Metmaterial-UI

Vue에서 유명한 UI 프레임워크로 Vuetify가 있듯, React에는 Material-ui가 대세인듯 하다. github 2021.02 기준 64.9k 의 start를 받은 경이로운 이 라이브러리는 항상 구글신이 1% 부족하게 느껴졌던 .NET 개발자에게 정보과다가 무엇인지 느끼게 해줄 것 같다.

 

material-ui.com/

Material-UI: A popular React UI framework

3. Firebase

테스트 개발당시도 Firebase를 이용했기 때문에 정식개발도 마찬가지로 Firebase를 이용할 예정이다. 차이점은 테스트 개발에는 적용하지 않았던 권한설정과 OAuth 서비스를 적용할 예정이다.

 

2일차 : 프로토타입 화면 구현

2일차인 오늘은 화면을 구성해보았다. 펜과 종이로 화면 구성을 먼저 그린 뒤 만들어볼까도 생각했지만, 구성할 화면개수가 2~3개면 끝날 듯 해서 구현부터 진행할까 한다.

 

컨트롤 부분과 음악정보를 표시하는 영역은 일단 컴포넌트로 분리하지 않고 전체 개발 후, 분리의 필요성이 있을 때 분해할 예정이다.