Immersive Course
Immersive Course(이하 IM)는 프로그래밍 교육기관 코드 스테이츠의 웹 개발 심화 코스이다. 아래 내용은 IM에서 배우고, 내가 찾아보고, 다른 수강생들이 전해 준 지식이다.
새로운 프로젝트, 식물 관리 기록장 '초록 ChoLog'
두 번째 프로젝트가 시작되었다. 주어진 기간은 약 24일(이 글을 적은 시점에 이미 2주가 흘렀다). 이번에도 전 프로젝트와 마찬가지로 수강생들이 어떤 서비스를 만들고 싶은지 아이디어를 냈고, 자율적으로 원하는 프로젝트에 지원해 팀을 구성했다. 수강생 프로젝트 외에도 부트캠프 협력 기업에서 제안한 프로젝트도 있었다.
나는 저번 프로젝트 때부터 묵혀왔던 '식물 관리 어플리케이션'을 발표했고, 순조롭게 지원자가 모여서 팀이 만들어졌다. 저번 프로젝트를 함께 진행한 사람들이 그대로 이번에도 함께 하게 되었고, 다른 팀원은 페어 프로그래밍 경험이 있어 어느 정도 서로를 아는 상태라 마음이 편했다.
아이디어를 냈다는 점이 이번에도 크게 작용해서 내가 팀장이 되었다. 과연 이번에는 어떨까? 저번보다 더 잘 할 수 있을까? 맡은 포지션은 프론트엔드.
새로운 도구를 사용하기
식물 관리 서비스는 웹보다는 모바일이 알맞다고 판단해서 모바일 어플리케이션을 개발하기로 했다. 이전 프로젝트에서 아쉬웠던 점, 그래서 이번에는 적용하고 싶은 점을 팀원들과 상의한 후 알맞은 도구들을 결정했다.
1. React Native
개발 시간이 그리 길지 않아서, 이미 어느 정도 익숙한 React로 모바일 어플리케이션을 만들 수 있는 React Native를 택했다. 이 때 여러 가지 편리한 도구들이 미리 셋업된 expo를 사용할 수 있는데, 편리한 만큼 빌드 시 용량이 크다. 배포를 염두에 두었기에 어플리케이션 사이즈를 줄이기 위해서 expo는 사용하지 않았다.
2. React Navigation
React에서 사용하던 react router와 비슷한 기능을 모바일에서 해 주는 라이브러리라고 추천을 받아 도입했다.
3. React Native Paper
이전 프로젝트에서는 기능을 우선 구현하고 마지막에 화면을 디자인했는데, 아쉬운 점이 많아서 이번에는 처음부터 디자인을 고려하고 UI 라이브러리를 적용해가며 개발하기로 했다. React Native Elements가 가장 주간 사용자가 많은 라이브러리였지만, React Native Paper는 React Navigation 블로그에 적용 예를 보여주는 글이 있었고, 기여하는 사람도 많고 디자인이 깔끔해서 선택했다.
4. TypeScript
코드 오류를 줄이기 위해 TypeScript도 사용해보기로 했다. 이번에는 배포를 염두에 두고 있었기 때문에, 최대한 오류 확인이 쉽고 코드 관리에 도움이 되는 것들을 도입하고 싶었다.
5. Hooks
이전에 React를 공부하면서 Hooks를 조금 사용해보았는데 클래스형 컴포넌트를 사용하는 것보다 코드가 간결해졌고 다루기 편했다. 프로젝트 스택을 결정할 때 부트캠프 엔지니어분의 조언을 얻었는데, Hooks와 React Navigation에서 이동하는 스크린으로 파라미터를 넘겨주는 기능을 조합하면 state 관리 라이브러리가 필요하지 않을 수 있다는 이야기를 듣고 Hooks를 도입해서 적극적으로 활용하기로 했다.
기능 설문조사 실시, 그 결과는?
주변 친구들이 식물을 많이 키우는 모습을 보고, 실제로 친구들이 사용할 수 있도록 만들어야겠다고 생각한 앱인지라 배포를 염두에 두었는데, 팀원 모두 비슷한 의견이어서 서비스 개발 후 배포를 결정했다.
배포한다면 정말 쓸만한 기능을 갖춰야 했다. 그래서 어떤 기능이 식물 관리에 필요한지, 최대한 많은 사람의 의견을 듣고 싶어서 설문조사를 실시했다. 팀에서 기획한 기능들이 정말로 필요한 기능인지, 원하는 기능이 있다면 무엇인지 알아보는 내용으로 질문을 구성해서 내가 주로 사용하는 SNS에 올려보았다. 다음 날 아침까지 50명만 참여해도 좋겠다고 생각했는데, 놀랍게도 이틀간 220여 명이 참여했다! 다른 웹사이트와 커뮤니티에서도 약 30명의 답을 얻을 수 있었다. 주관식 문항도 굉장히 길고 정성스럽게 작성해 준 사람이 많아서, 서비스 자체의 필요성을 느꼈고 정말 잘 만들어봐야겠다는 마음이 강해졌다.
스프레드시트로 답변 통계를 내고 분석한 뒤, 기능을 다듬어 정리했다.
User Flow와 UI 디자인
협업 툴 miro를 이용해서 User flow 큰 틀을 팀원 모두가 함께 설계했다. 식물을 어떻게 관리했는지, 변화는 어땠는지 기록하는 구조는 건강관리 앱과 비슷한 점이 많아서, 여러 건강/생리 주기 관리 앱을 받아서 화면 구성을 참고했다. 그 후에 디자인 목업을 Figma에서 했는데, 이 단계에서는 React Native와 React Navigation으로 어떤 화면을 만들 수 있는지 알 수 없어서, 얼마나 자유롭게 디자인을 해도 될지 감이 오지 않았다. 그래서 우선 UI 라이브러리 예시 화면을 참고해 비슷한 모습으로 디자인하고, 이후에 더 자유로운 디자인에 도전하기로 합의했다.
<설계한 User Flow 일부>
React Navigation 4.x 에서 5.x로
웹의 route와는 또 다른, 모바일 화면을 쌓고 옮겨가는 방식인 스택과 탭을 이해하는데 꽤 시간이 걸렸다. 팀원과 함께 고심하면서 원하는 대로 화면을 구성했는데, 공식문서를 잘 살펴보니 화면을 구성하는 데 사용한 React Navigation 버전 4는 past 버전이었고, 현재 버전은 5였다. 버전 5가 React Native Paper와 더 잘 맞는 것 같고, 배포하고 지속해서 관리를 하려면 최신 버전을 사용하는 게 좋을 것 같아 버전 5로 변경하기로 했다.
버전 4와 5는 상당히 달라서 변경하는 데 시간을 많이 사용했다. 변경하고 보니 버전 5가 4보다 React 컴포넌트를 정의하는 문법과 비슷해서 편하다고 느꼈다.
버전 4로 스택 네비게이터 만들기
import { createStackNavigator } from 'react-navigation-stack';
import {
MyInfo,
Setting,
} from '../screens';
// MyInfo와 Setting 컴포넌트(화면)을 하나의 스택으로 묶음
const MyInfoStack = createStackNavigator({
MyInfo,
Setting,
});버전 5로 변경한 모습
// 버전 5 모듈을 설치해서 메서드를 import
import { createStackNavigator } from '@react-navigation/stack';
import {
MyInfo,
Setting,
} from '../screens';
// 원하는 변수명으로 스택 네비게이터 컴포넌트를 만들어 할당한다
const Stack = createStackNavigator();
const MyInfoStack = () => {
return (
<Stack.Navigator>
<Stack.Screen name="MyInfo" component={MyInfo} />
<Stack.Screen name="Setting" component={Setting} />
</Stack.Navigator>
);
};여담으로, 중간에 라우터 이름을 인식 못 하는 에러가 계속 이어졌는데 안드로이드 가상머신 문제였다. 모듈을 새로 설치하거나 파일 구조 변경, 기타 여러 가지 변화가 있을 때는 항상 캐시를 지우고 다시 빌드해야 정확한 결과와 동작이 가상머신 화면에 나타난다.
마주친 난관
설문조사 내용을 보니 많은 사람이 날씨 정보를 앱 내에서 얻고 싶어 했다. 식물이 날씨에 민감하게 반응하고, 관리 방법에도 영향을 줄 수 있어서다. 그래서 앱 내에서 날씨 정보를 제공하려고 기획했다. 정보를 메인 화면에 표시하기로 정했는데, 관련 API를 알아보니 사용자의 위치 정보를 이용하려면 사업자 등록이 필요했다. 그리고 배포 시에 인앱 결제도 고려했는데, 그 역시 사업자등록이 필요했다.
팀에서 논의 끝에 사업자등록은 하지 않기로 했다. 그러고 나니 기획을 대폭 수정해야 했다. 날씨 정보와 인앱 결제를 포함해 기획을 세운지라 내용을 바꾸고 다듬는 데 시간이 상당히 걸렸다. 시간이 얼마 남지 않았다는 생각에 마음이 조급해져 모두 늦게까지 작업을 했는데, 잠이 부족하니 집중력이 떨어지고 집중력이 떨어지니 작업 능률이 떨어지는 악순환이 발생했다. 그래서 조급한 마음을 가다듬고 팀원 모두 11시에는 일과를 마치기로 약속했다.
물론 약속이 잘 지켜지는 날도 있고 아닌 날도 있다. 하지만 앞으로의 계획을 다시 세우고 코딩을 시작하니 마음이 편해졌다.
남은 시간은 2주
공부하며 만들기
타입스크립트 기본은 팀원이 추천한 노마드코더의 타입스크립트로 만드는 비트코인을 보고 이해했는데, React에 적용하기는 Nodejs에 적용하기보다 형식이 단순한 것 같지 않다. 그래서 우선 어느 정도 컴포넌트 구조를 짜고 나서 적용해볼 생각이다. 컴포넌트를 여러 개로 나누어보니 props로 내려오는 항목이 무엇인지 바로 파악하기 어려워서 타입스크립트의 필요성을 느꼈다.
React Navigation, React Native, Hooks, TypeScript 모두 처음 접해보니 의문투성이다. 그래도 한 발짝씩 앞으로 나가고 있는 게 참 신기하고 재미있다. 모두 처음이라서 잘 정리하기가 어려운 점이 아쉽다.
사실 지금으로서는 시간이 충분히 남은 건지 아닌지 모르겠다. 하지만 프론트엔드 팀원과 컴포넌트 구조 설계를 합의했고, 여러 가지 도구에 조금 익숙해져서 목표한 지점까지 완성은 할 수 있을 것 같다. 우선은 하루하루를 잘 보내는 게 중요하다. 그리고 건강관리.
