2022년 10월부터 2023년 3월까지 진행한 KEYUM 프로젝트 회고글입니다.
💻 프로젝트 시작
프론트엔드 개발 공부를 시작하고 처음으로 좋은 기회가 생겨 7명의 팀원과 함께 첫 프로젝트를 시작하게 되었습니다.
인프런, 공식문서로 공부만 하던 저에게 프로젝트라는 기회가 생기니 열정을 가지고 열심히 프로젝트 준비를 진행했습니다.
📱 프로젝트 준비 과정
팀원 구성은 FE 2, BE 2(중도 하차 1명), UXUI 1, BX 2, PM 2명으로 이루어졌습니다. 주 1회 구글밋을 이용하여 회의를 진행하였고 협업툴은 노션 + 피그마를 활용하였습니다.
첫 프로젝트이다보니 어떤 것을 해야할지, 다른 포지션 분들과는 어떻게 협업할지 앞이 깜깜했습니다...😱 이런 문제를 해결하기 위해 프론트엔드 첫 프로젝트 후기, 다른 포지션과 협업하는 법 등을 찾아보며 정보를 얻었던 것 같습니다.
💭 이번 프로젝트를 하면서 신경쓴점
지금까지 했던 개발 공부는 WEB에 초점을 두고 React, JS 등의 기술들을 공부했습니다. 하지만 이번 프로젝트는 Android App 프로젝트였기 때문에 처음으로 React Native를 다루게 되었습니다.
작년 10월 처음으로 React Native 접했을 때는 상당히 어려움을 느꼈습니다.
그렇기 때문에 어떻게 하면 처음 접하는 React Native 활용하여 좋은 서비스를 제작할 수 있을까? 에 대해서 초점을 맞췄던 것 같습니다.
- React Native
- 협업
😶🌫️ React Native
원하는 구현을 할 수 있게끔 실력을 높이기 위해 공식문서, 해외자료, 인프런 강의를 활용하여 코드 구현 능력을 향상 시켰습니다.
but 개발환경 구축부터 매우 힘들었던 기억이 아직까지 생생하고... 그 이후에도 개발 과정에서 상당히 많은 고난을 겪었습니다..😂
😏 협업
첫 프로젝트였지만 협업이라는 단어는 정말 강력하게 와닿았습니다.
저를 제외한 나머지 7명의 팀원 분들은 전부 다 프로젝트 경험이 있으신 분들이었기 때문에 여기서 낙오되면 안된다는 생각이 들었던 것 같습니다.
특히 회의 때 나왔던 말들은 전부 정리하여 기억해두었고, 프론트 개발에 있어서 알아야 할 부분은 더욱 신경쓰면서 구글링을 통해 정리해두었습니다.
글을 보면서도 이해가 어려웠던 부분들이 많았지만 프로젝트를 통하여 직접 경험하고 사용해보니 조금 더 이해가 빨랐던 것 같습니다. (역시 실전이 최고인가..?)
💡 프로젝트를 하면서 기술적으로 배운점
React Native를 활용하여 담당한 컴포넌트를 마이그레이션 하는 과정에서 여러 상황들을 많이 볼 수 있었습니다. 그것들을 해결하고 구현하는 과정에서 기술적인 지식들을 많이 알게되었습니다.
React와 React Native의 차이점
기존에는 React를 사용했었기 때문에 단순히 'React' Native 만을 보고 React랑 같겠구나! 생각했습니다. 하지만 차이점은 분명 존재했습니다.
1. React는 화면 출력 시 ReactDom을 사용하지만, React Native는 AppRegistry를 사용한다.
2. React Native는 HTML 문법을 사용하지 않고, Components를 사용한다.
3. 기존의 CSS를 지원하지 않는다. 또 JS 파일 안에서 StyelSheet라는 것을 사용한다.
대표적으로 위와 같은 3가지의 차이점이 있었습니다. 이 차이점들은 React Native를 사용하는데 있어 상당히 중요하게 작용되었다고 생각됩니다.
React Native에서 AsyncStorage 사용하기
KEYUM 앱은 TodoList 앱이기 때문에 할일과 같은 데이터의 저장이 중요했습니다. 그렇기 때문에 로컬에서의 저장소 활용이 필요했는데요, 저희는 AsyncStorage를 활용하여 데이터를 저장했습니다.
- localstorage와 마찬가지로, 문자열 데이터만 사용이 가능하다.
- JSON.stringify 메서드와 JSON.parse 메서드의 사용이 필요하다. ex) token
- 하지만 AsyncStorage는 localstorage와는 다르게 비동기 처리가 필요하다.
새로운 상태관리 라이브러리, Recoil
기존 개발 환경에서는 Redux를 상태관리 라이브러리로 사용했습니다. 하지만 Redux의 경우 러닝커브가 높았기 때문에 개발을 공부한지 얼마 안된 저에게는 다루기 어려운 라이브러리였습니다.
그런 상황에서 동료 FE분께서 상태관리를 Recoil로 해보면 어떻겠냐 라고 물어봐주셨고 그렇게 Recoil을 사용하게 되었습니다.
Recoil은 부모 컴포넌트에 RecoilRoot가 존재해야 합니다. Redux의 Provider같은 개념으로 루트 컴포넌트에 구성하는 것이 제일 좋은 방법입니다.
import React from 'react';
import { RecoilRoot } from 'recoil';
import TodoForm from './TodoForm';
import TodoList from './TodoList';
const App = () => {
return (
<RecoilRoot>
<TodoForm />
<TodoList />
</RecoilRoot>
);
};
export default App;
자세한 내용은 이곳에 정리해두었습니다✅
API에 대한, 개발에 대한 더욱 명확한 이해
프론트에서는 API를 활용해 서버에게 요청하고 응답을 받습니다. 우리가 주로 사용하는 REST API는 HTTP를 사용하여 클라이언트와 서버가 데이터를 주고받습니다. 이 때 데이터는 주로 JSON의 형태입니다. 그리고 이 방법들의 특징은 ‘상태 없음’입니다. 그렇기 때문에 데이터를 영구적으로 저장하기 위해선 데이터베이스 등의 도움이 필요합니다. 이 때 우린 서버에게 데이터를 보관해달라고 요청하고 필요할 때 저장한 데이터를 조회해달라고 요청합니다. 요청을 받은 서버는 데이터베이스에 데이터 조회 또는 저장 등을 요청하게 됩니다.
하지만 API 요청을 보내고, 데이터를 조회하는 과정에서 데이터 활용을 적절하게 진행하지 못했습니다. 프로젝트를 진행하면서 이런 부분들을 어려움 없이 개발하기 위해서는 지금보다 더욱 열심히 공부해야겠다고 실수들을 통해 느꼈습니다. 이 뿐만 아니라 개발에 대한 전반적인 지식들도 지금보다 향상되어야 한다는 것을 느낄 수 있었습니다😢
😓 아쉬웠던 점
프로젝트를 시작하기 전 모집 단계에서는 웹서비스를 제작하는 것으로 알고 참여했는데 팀에 참가 후 갑작스럽게 앱으로 서비스가 변경되어서 초반에 상당히 많은 어려움을 겪었습니다😭
또한 직장인 + 대학생이 모인 팀이었기 때문에 프로젝트 진행 기간이 생각보다 오래 걸렸고, 후반부로 갈수록 팀원과의 소통이 힘들었던 점이 정말 아쉽습니다..
최근 프론트엔드 개발에 있어 타입스크립트가 중요해지고 있는 시점인거 같습니다. 또한 React Native 문서들을 찾아봐도 타입스크립트로 이루어진 코드들이 많았습니다. 하지만 저는 타입스크립트를 사용해보지 못했기 때문에 같은 FE 개발자분도 저에게 맞춰 자바스크립트를 사용해주셨습니다. 이 부분도 너무 아쉽게 느껴지는거 같습니다.
이러한 부분들을 통해 아직 부족하다는 것을 많이 느끼게 되었고 좋은 코드들을 보면서 나도 저렇게 완벽한 코드를 구현하고 싶다는 생각을 하게되었습니다.
🧑🏼💻 느낀점
이번 프로젝트를 하면서 처음 사용해보는 React Native와 Recoil에 대한 학습을 할 수 있었습니다. 또한 서로 협업하면서 프로젝트를 진행한다는 것이 어떤 것인지, 협업을 하는 것이 왜 중요한지 깨달았고 이런 부분을 신경쓸 수 있게되어 많이 배울 수 있었던 프로젝트였습니다.
이번 프로젝트를 시작으로 더욱 성장하여 유저들에게 유용한 서비스를 제공해주는 개발자가 되고싶습니다 :)
