린온컴퍼니에서 4주동안 기업 협업을 진행했는데
오늘 4개월차 최종 발표를 끝으로, 기업 협업이 마무리되었다.
그 동안 배운 것들과 느낀 것들에 대해 간단하게 말해보려 한다.
서비스 소개
린온컴퍼니에서는 프리랜서 강사들을 타겟으로 하는 온라인 강의 플랫폼(V1)을 운영하고 있으며,
프리랜서와 창업자를 연결하여 모임을 매칭해주는 솔루션을 제시하는 플랫폼(V2)을 개발하고 있다.
기술 스택
V1을 개발할 때는 React.js, JavaScript, SCSS, HTML을 사용했고
V2를 개발할 때는 React Native for Web, JavaScript, HTML을 사용했다.
React Native for Web에 대해 간단하게 설명하자면,
React DOM과 React Native 간의 호환성 레이어이다.
담당 업무
V1은 이미 Vue.js로 완성된 상태였고, 우리는
React.js로 마이그레이션하는 업무를 맡게 되었다.
그리고, V2에서는 모임 상세 페이지 퍼블리싱 업무를 맡았다.
이제 내가 개발했던 기능들에 대해서 자세히 설명해보려 한다.
recharts 라이브러리를 활용해 월별 매출 차트 구현(V1)
V1은 백엔드 API가 구현되지 않은 상황이라서 mock data를 활용해 기능을 구현했다.
차트를 구현하기 위해 recharts 라이브러리를 사용했으며, 간단한 차트를 구현하는 거라서
오래 걸리지는 않았다.
기능 구현을 위해 차트 라이브러리들을 찾아봤는데,
내가 recharts를 선택한 이유는 아래에서 설명해보려 한다.
recharts는 React와 D3를 기반으로 만들어졌다.
npm trends에서 차트 관련 라이브러리들을 검색해봤을 때,
D3의 star 갯수가 가장 많았고, D3를 바탕으로 만들어졌기 때문에 믿을 수 있는 라이브러리라고
판단했다. 또한, React로 만들어졌기 때문에 React로 개발하는 상황에서는 생산적인 측면에서
유리하다고 판단했다. 업데이트된 날짜도 한 달 전이었기 때문에 관리되고 있는 라이브러리라고 판단했다.
recharts 깃허브에는 recharts 주요 목적은 아무런 고통 없이 React
애플리케이션에서 차트를 작성할 수 있도록 돕는 것이라고 기재되어 있는데,
가이드도 간결하고 명확하게 설명되어 있어서 실제로 아주 쉽게 구현할 수 있었다.
학생 결제 목록 테이블 페이지네이션 기능 구현(V1)
차트 기능과 마찬가지로 백엔드 API가 구현되지 않은 상황이라서 mock data를 활용해 기능을 구현했다.
page의 번호를 확인할 수 있는 state를 만들고 페이지 번호 버튼을 클릭할 때마다 state가 변경되도록 했으며,
page를 변수로 갖는 URI를 매개변수로 사용하는 fetch API를 활용하여 데이터를 가져오는 방식으로 구현했다.
모임 상세 페이지 퍼블리싱 (V2)
V2 개발에서 맡게된 업무는 모임 상세 페이지 퍼블리싱 작업이었는데,
작업을 진행하면서 React.js와 비교했을 때 스타일링 방법이
비슷하면서도 조금 다르다고 느꼈다.
스타일 선언은 JavaScript로 작성되고 style prop을 사용하여 요소에 적용된다.
const style = { flex: 1, opacity: 0 };
const Component = () => <View style={style} />;위와 같이 객체를 만들고 style prop의 값으로 할당해줌으로써
스타일을 선언해주는 방법도 있고,
const styles = StyleSheet.create({ root: { flex: 1, opacity: 0 } });
const Component = () => <View style={styles.root} />;위와 같이 StyleSheet API를 활용해 컴포넌트 외부에서 스타일을 정의하는 방법도 있다.
StyleSheet API를 활용하면 먼저 StyleSheet.flatten에 접근하지 않는 한 직접
액세스할 수 없는 스타일에 대한 불투명 참조가 생성되는데 이로 인해 스타일 성능이 향상된다.
React.js와 비교했을 때 margin, padding 등의 속성을 축약형으로 사용할 수 없지만,
그 대신 marginVertical, paddingHorizontal 등의 상하, 좌우 값을 한번에 적용할 수
있는 속성이 있다는 점이 달랐다.
스타일링을 할 때는 StyleSheet API를 사용했고 익숙해지니 큰 어려움은 없었다.
반응형 디자인을 적용할 때, 문제가 생겼는데 media query가 React Native for Web에는
적용이 되지 않는다는 것이었다. 하지만, 구글링을 통해 useWindowDimensions 훅을 사용해서
반응형 디자인을 적용하는 방법을 찾았고, figma의 디자인에 맞춰서 반응형을 구현하는 작업을
완료할 수 있었다.
기업 협업을 마치며
린온컴퍼니에서 실무를 경험해볼 수 있는 좋은 시간이었다. 기획과 디자인에 맞춰 개발을 해본 경험이
추후에 개발자가 되었을 때 도움이 될 거라는 생각도 들었다. 그리고, 대표님이 강조하셨던 것처럼 일정을
잘 맞추는 것도 굉장히 중요하다는 생각도 가지게 되었다. 기업 협업을 하면서, 일정에 맞추지 못한 적은 없었지만, 만약 일정에 맞추지 못한다면, 고객의 신뢰도 하락, 팀원 간의 신뢰도 하락 등의 문제가 발생할 것이고 그로 인해 매출 하락과 팀 사기 저하로 인한 개발 생산성 하락 등의 문제로 연결될 수 있다는 생각이 들었다.
아쉬운 점도 있었는데 회사는 빠르게 만드는 것에 집중하기 때문에 코드 리뷰가 없었다는 점과
업무가 생각보다 많지는 않아서 남는 시간이 생겼던 점 등이 있다.
하지만, 코드 리뷰가 없기 때문에 내 코드를 스스로 꼼꼼하게 보려고 노력했고,
남는 시간에는 개인 공부를 진행하면서, 개발자로서 성장하기 위해 노력했다.
내일 진행되는 수료식을 마지막으로 4개월 간의 과정이 끝난다.
취업하기에는 아직 부족한 점들이 많아 보이지만,
4개월 전과 비교했을 때, 많이 성장한 것 같아 뿌듯하기도 하다.
부족한 점들을 채워나가면서 개발자 취업에 성공할 것이다!!
🔥🔥🔥화이팅!!🔥🔥🔥
