앱 프론트엔드 교육 시작
React의 학습이 어느정도 진행되었고, 우리 조를 포함한 일부는 Next.js를 활용하여 팀 프로젝트를 진행하였다. 웹 프론트엔드에 대한 이해도가 생겼다는 가정하에 앱 프론트엔드 실습 교육을 시작했다.
React-Native
React, Next.js와 문법적 유사성이 높은 React-Native를 활용하여 프로젝트를 진행하기로 한다.
API 활용
팀 프로젝트 진행 시 일부는 외부 API를 잘 사용하였고, 일부는 난항을 겪었기에 외부 API를 다루는 프로젝트로 선정하여 실습 겸 교육을 진행한다.
Gotta catch 'em all
개발에 관심이 있는 20~30대 남자 위주의 수강생들의 선호에 맞춰 포켓몬스터 API를 활용한 간단한 게임을 만들어보기로 한다.
기획
- 대상 포켓몬 : 1세대 151마리
- 사냥터 : 10마리의 포켓몬이 랜덤으로 등장
- 포켓몬 선택 : 해당 포켓몬의 정보를 간단히 보여주고, 실제 포획률에 맞춰 잡을 수 있도록 한다. - 도감 : 모든 종류의 포켓몬이 도감번호 순으로 보이고, 잡은 포켓몬의 경우 버튼이 활성화된다.
- 랭킹 : 사용자들 중 여러 포켓몬을 잡은 순으로 순위를 보여준다.
- 대시보드 : 미기획
- 회원가입 & 로그인 : 회원가입 & 로그인
주요 사용 기술
- App FE : React-Native, Expo
- sub FE : Lucide-react-native, Nativewind
- 상태관리 : Zustand
- DB : Supabase
- API : Pokeapi
결과물
회고
- React-Native 개발은 React와 흡사하여 태그 대신 쓸 컴포넌트만 잘 외워두면 예상보다 간단하게 앱을 개발할 수 있었다.
- 대부분의 핸드폰 화면 비율이 비슷하여 웹 FE에 비해 화면비에 신경을 덜 쓸 수 있었지만 대신 아이폰의 노치 & 다이내믹 아일랜드, 갤럭시의 카메라 홀 등의 새로운 신경 쓸 부분이 있다.
- pc화면으로 보이는 가상 핸드폰에서 보여주는 이미지와 Expo를 통해 실제로 구동한 앱의 이미지는 생각보다 차이가 있어서 주기적으로 확인이 필요하다.
- 코딩 중 포켓몬이라는 귀여운 이미지가 지속적으로 눈에 들어오는 것이 생각 이상으로 개발 과정에서 힘을 내게 해줬다.
본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 2기 (B-log) 리뷰로 작성 되었습니다.
#한컴AI아카데미2기 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업
코미디언