위코드 2차 프로젝트를 마무리하고 쉴 틈 없이 기업 인턴을 나가게 되었다. 위코드를 선택했던 이유 중 하나가 인턴을 진행하는 것이었기 때문에 몸은 지쳤었지만 기대가 많이 되었다. 우리 팀은 나 포함 프론트 2명으로 기업에 가게 되었는데 그 기업에 구글, 삼성 출신 개발자분들이 있다는 소식을 듣고 가서 꼭 내가 원하는 일을 안 하더라도 많은 것을 배울 수 있을 거란 생각에 희망했던 기업이었다.
🖥 프로젝트 소개
- 현재 기업에서 'Uber' 와 같은 승차공유 플랫폼 앱개발을 진행 중
- 올해 3월 정식 런칭 예정인 서비스
- 서비스 중 드라이버 입장에서의 예약 관리 리스트 페이지, 예약 상세 프로세스 페이지를 맡아 프로젝트 진행
🗓 인턴기간
- 2021.12.27 ~ 2021.01.14
🛠 Skills
- Skills : React Native, React-Navigation, Typescript, Styled-components
- 초기 환경 설정 : React-Native-Cli
- API : Google Map
- Libraries :
react-native-maps (구글 맵 React Native 에 적용, 마커 적용)
react-native-maps-directions (경로 표시)
react-native-safe-area-context, react-native-status-bar-height (상태바 크기 가져오기)
react-native-geolocation-service (사용자 현재 위치 불러오기)
- VCS : Git, GitHub
- 협업툴 : Slack, Notion, Zeplin, Swagger
📱 Platform
- IOS, Android
🚕 구현 사항
드라이버 _ 예약 리스트 View
- 렌더링 최적화를 위한 FlatList 활용
- 새로고침 기능 -> 드래그, 버튼 구현
- 버튼 조건부 렌더링
- 수락 하기 click -> 수락 완료
- 예약 당일 날짜 -> 예약 상세
- Stack Navigate
- 예약 리스트 View -> 승객 승차 View
- service_id 값 전달
- 백엔드 통신
- services -> GET -> 예약 데이터 전체
- services -> PATCH -> 예약 status 변경
드라이버 _ 승객 승차 View
- 사용자 위치 사용 권한 받기
- 지도상 경로 표시
- 드라이버 현재 위치 -> 출발지
- 출발지 -> 목적지
- 화면에 따른 Maker 아이콘 변경
- 화면의 구성
- 1단 - 구글맵 / 2단 - 정보 / 3단 - 별점 Modal
- Stack Navigate
- 뒤로가기, 별점 화면 후 - List 화면
- 백엔드 통신
- service_id -> GET -> 예약 정보 가져오기
- user_id -> POST -> 별점 추가
🔥 프로젝트 성과
React Native
- CLI와 Expo 초기 환경설정의 차이점
- React에 비해 좁은 생태계와 불친절한 에러 메세지 안에서 여러 방법을 시도하여 얻은
문제 해결역량 - 기존
div태그와 달리View컴포넌트를 사용하여 레이아웃을 작성하는 법 - 기본적으로 제공하는 다양한 코어 컴포넌트
Ex)ScrollView,FlatList,TouchableOpacity... - 스타일 적용 방식
styled create - IOS와 Android 를 각각 달리 설정해야 하는 부분이 존재한다는 점
Ex) Permission, Style, Font, Google Map...
TypeScript
- Style-component 를 사용하거나 다른 라이브러리를 사용할 때 추가로 설정하는 법
- 다른 사람들과 협업시 어떤 입력값을 넣어야하는지에 대한 고민이 적어짐
Others
- 프론트 측면에서의 알고리즘 활용법
Ex) 지도에서 마커를 보여줄 때
📖 인턴 회고
1주차
1주차에 내가 진행할 프로젝트에 대해 설명과 간단하게 기술면접 비슷하게 봤다. 생각지도 못한 면접이었다...! 리액트 라이프 사이클과 리덕스를 왜 쓰는지 등 면접에서 많이 나올법한 질문들이었다. 난 정말 생각지도 못해서 그냥 편안하게 떨지 않고 내가 아는 대로 말했다. 아직 이론적으로 많이 부족했지만 CEO, CTO 님이 면접에 대한 피드백을 정말 친절하게 해주셨다. 피드백해 주신 내용을 토대로 면접 준비하면 정말 좋은 내용들이었다.
이번 프로젝트는 한 번도 접해보지 못한 ReactNative와 TypeScript로 개발을 했어야 해서 동기 분과 노션을 활용해서 체계적으로 계획을 세워 빠르게 익히기로 했다. 매일 인터넷 강의, 공식 문서를 통해 공부한 내용을 공유하고 질문이 필요한 내용을 사전 미팅 로그에 작성하여 사수분과 매일 스크럼 회의를 통해 소통했다.
1주차는 빨리 새로운 기술을 익혀서 코드를 작성하기 위한 준비가 필요한 시간이었다. 새로운 플랫폼에 개발한다는 것 자체가 너무 흥미로웠다. 예전에 안드로이드 스튜디오를 통해 안드로이드 개발 경험이 있는데 그때보다 더욱 익숙한 리액트를 통해 ios, android를 동시에 개발한다는 것이 좋았다.
2주차
1주차 주말까지 강의만 듣다가 너무 지루했다. 이건 안되겠다 싶어 프로젝트 코드를 쳐보면서 부딪혀보기로 결정했다. 프로젝트에 대한 플로우 체크를 하고 동기 분과 바로 ReactNative-expo 초기 세팅에 들어갔다. 하지만 날벼락 같은 CTO 님의 말씀 'Expo로 개발하시면 안돼요~ 빌드 오류 많고 무거워서 못써요!' 우린 인터넷 강의 주입식 교육에 당한 것이었다... 그날 진짜 인터넷 강의의 단점을 몸소 느꼈다. 멘토님들이 괜히 공식 문서~ 공식 문서 했던 게 아니었다. 꼭 공식 문서를 많이 참고하자!! 아무튼 빠르게 Native-CLI로 초기 세팅을 진행하였는데 역시나 많은 에러들이 반겨주었다. 하지만 에러를 애인 보듯이 하ㄹㅏ고... 했는데!! 에러 메시지가 너무 불친절하다.. 안 그래도 작은 네이티브 생태계에서 에러 해결하는 데 많은 시간을 썼다. M1 아키텍처로 인해 열심히 찾아야 해결할 수 있는 오류들도 많았다. 그래도 여러 에러를 해결하면서 얻은 내용을 네이티브를 사용하는 동기들에게 공유할 수 있는 좋은기회였다.
개발을 시작하면서 코드를 쳐보니 확실히 부딪혀 봐야 한다. 새로운 기술로 개발이라는 것부터 재밌고, 문제를 직면해 봐야 해결하려고 뭐라도 찾아보기 때문에 배우는 속도도 빠르고 효율이 좋다. 동기분이랑 구글맵은 같이 학습이 되면 좋을 것 같다고 생각하여 구글맵을 제외한 나머지 레이아웃과 로직을 이틀 만에 끝냈다. 구글맵 상에 마커를 찍고 경로를 그리는 것을 구현할 때 많은 에러 요소가 있었지만 구글맵 상에 내가 찍은 좌표에 대해 경로가 그려졌을 때 정말 환호를 지르듯 기뻤다!!
CTO님께서 개발 경험을 말씀해 주셨는데 우리가 많이 쓰는 따릉이 앱의 맵 마커 최적화를 하셨다고 한다. 따릉이 앱 초기엔 실행 시 맵 전체에 모든 마커가 찍혀 렌더링 속도가 심각하게 느렸는데 수학적 알고리즘을 활용하여 마커를 부분 렌더링 시켜 앱 속도를 크게 증가시켰다고 하셨다. 실제로 내가 느꼈던 사용자 경험이어서 정말 크게 와닿았고 프론트 측면에서의 알고리즘 활용법을 배우게 되는 기회였다.
2주 차는 개발도 개발이지만 동기 분과 사수분과 소통을 정말 정말 많이 했던 시간이었다. 동기 분과 프로젝트의 플로우를 하나하나 그려보며 꼼꼼하게 체크하고 개발에 필요한 컴포넌트를 어떻게 나눌지, 컨벤션, 유틸 함수 등을 정하고 매일 오전에 스탠드 업 미팅을 통해 수정할 부분은 그때그때 신속하게 수정했다. 이번에 백엔드 API 정의서가 담긴 Swagger라는 툴을 처음 접해봤는데 프론트 측면에서 한눈에 알아보기 좋고 너무 유용했다. Swagger가 없을 때는 백엔드 분들과 불필요한 소통이 잦았는데 이번엔 통신이 한 번에 성공하여 뿌듯했다. 이로써 프론트와 백엔드 사이에 문서로 된 소통도 굉장히 중요하다는 것도 깨달았다.
3주차
백통신도 잘 되고 계획보다 일찍 개발을 끝냈다. 처음 걱정과 달리 수월하게 프로젝트가 진행되었다. 남은 기간 동안은 CTO님께 코드 리뷰를 부탁드려 피드백을 받아 리팩토링을 진행하였다. 3주 차 수요일 프로젝트가 끝나 다른 팀들과 다르게 1주 먼저 인턴을 마무리하게 되었다.
처음 인턴을 나가기 전 위코드에서 인턴 도중 오퍼를 받는 경우도 있다고 했는데 같이 가는 동기 분과 가기 전 원하는 회사가 아니더라도 기분 좋게 꼭 오퍼 받아보자!!라고 다짐했었는데 마지막 날 개인 면담을 통해 기업분들께서 좋게 보셨는지 채용 의사가 있다고 말씀해 주셨다. 다짐이 이루어지는 순간이라 성취감에 정말 뿌듯했다. 좋은 조건에 정말 좋은 기회였지만 고민 끝에 입사는 안 하기로 결정했다. 이유는 여러 가지가 있지만 일단 난 바쁘게 달려온 3개월 동안 배운 내 머릿속 인풋들을 단단한 아웃풋을 내기 위해 정리가 필요했고, 내가 원했던 개발 서비스가 아니었었다. 언제 또 이런 좋은 기회가 올지는 모르겠지만 빠른 기간 내에 단단해져서 도전할 것이다. 아무튼 짧은 3주의 시간이었지만 직접 실무에 나와 환경을 접하고 배운 것도 많고 값진 경험이었다.
