클론코딩의 정석 react-native로 네이버웹툰 만들기

당신의 시간은 넘블이 아껴드립니다! 30초 요약해볼게요!

📢

하나. ios & android 한번에 개발 가능한 react-native를 활용하여 네이버웹툰을 클론코딩해보는 챌린지입니다.

둘. 가이드라인을 통해 챌린지 진행에 필요한 구현범위 및 기능을 제공합니다.

셋. 동일한 프로젝트를 진행하고 있는 다른 참가자들과 소통과 공유를 통해 더 많은 성장을 이뤄낼 수 있습니다.

넷. 중견 스타트업 4년차 Frontend lead인 현직자가 TOP3에게 세부 피드백을 제공하고 상위권 결과물 및 피드백은 참가자 모두에게 공유됩니다.

챌린지 호스트

📌

이번 챌린지 호스트는 Brayan입니다.

400억 이상 투자받은 중견 스타트업 4년차 프론트엔드 lead.

react-native 관련모듈 contributor(react-native-foreground-service, react-native-sensor-step)

stackoverflow 12,000 점 이상

구체적인 챌린지 내용

📌

네이버 웹툰의 목록 화면을 표현해보는 챌린지입니다.

자세한 내용이 궁금하면 토글 버튼을 눌러주세요!

개발할 주요 화면(예시 화면)

가이드라인에는 실제 네이버웹툰을 기반으로 작성되어 있습니다.

구현범위

네이버 웹툰의 목록 화면을 표현하는게 목표입니다.

목록화면 구성시 필요한 기능들을 구현하게 됩니다.

제시된 기능외에 웹툰에서 제공하는 기능은 작업하지 않으셔도 됩니다.

구현 기능

구현 기능 설명화면

빨간색 숫자가 아래 구현 기능과 관련된 화면입니다.

상단 헤더 (쿠키 , 돋보기 고정)

스크롤시 Header , Footer 노출 , 최상단 스크롤시 미노출

가로 swipe 화면 구현

요일별 목록 화면 (좌 우 swipe가능)

숫자가 이미지 위로 노출되도록 가로 슬라이드 구현

3가지 묶음 가로 슬라이드구현

하단 탭 구성 (Main , My )

하단 탭 마이 부분 좋아요 목록 구현 (상단탭 x) - 실제 관심 목록과 연관 x, 랜덤데이터 노출

상세 페이지 (관심 버튼클릭시 등록하겠냐 묻는 alert 노출)

상세 설명 처음 가려짐, arrow 버튼 클릭시 보여지게 노출

권장

오픈소스 라이브러리를 사용해 구현 권장

가산점

앱 시작시 노출되는 (warn,error) 로그가 적을시 가산점

typescript 사용시 가산점

요일이 가려질때 요일이 같이 보여지면 가산점

상단 하단 노출이 animation을 이용하여 노출시 가산점

데이터 및 이미지 사용 URL

데이터

https://www.kmas.or.kr/guide/openapi

이미지

https://random.responsiveimages.io

챌린지 대상

🖐️챌린지에 관해서 질문이 있어요

이번 챌린지를 통해 성장할 수 있는 역량은 무엇인가요? → 이번 챌린지를 통해 아래의 것들은 분명 얻어가실 수 있습니다!

react-native의 기본적인 작동에 대해 이해 능력

android , ios 개발 역량

회사에서 요구하는 기본 화면 및 기능에 대해 구현이 가능

Javascript로 할 수 있는 범위 증대

특히, 이 과정을 완료하신다면 RN에서 가장 많이 사용되는 화면을 만드시게 되며, 회사에서 바라는 디자인에 맞추어진 화면에 대한 이해도가 높아지고 그 화면을 만드는데에 있어 두려움이 적어질 것입니다.

이번 챌린지에서 고민해봐야할 포인트는 무엇인가요?

→ 이번 챌린지를 딱 봤을 때,기능으로만 보면 간단하다고 느껴질 수 있습니다. 그러나 상단에 고정하는 기능이나 스크롤시 노출되는 상하단 컴포넌트, 세로 스크롤 화면에서 가로 swipe가 되는 컴포넌트의 구성등 고민해야할 요소가 많습니다. 위와 같은 기능들을 구현하면서 고민할 요소들을 짚어낸다면 더욱 성장할 수 있을 것입니다.

위 질문들 외에도 궁금하신 점이 있으시다면 챌린지에 참여하셔서 호스트님과 소통하시면 됩니다.

넘블과 함께 챌린지에 도전하여 더 성장해보세요!

평가방식

심사기준은 다음과 같아요.

넘블 X 네이버 클라우드 파격 혜택

📌

넘블 챌린지에 참여하는 넘블러님들께는 최대 100만원의 네이버 크레딧을 지급해요!

자세한 내용은 다음과 같아요

네이버 클라우드 신규 가입(10만원)+넘블 챌린지에 참여하는 모든 넘블러(20만원)+챌린지 회고록을 작성하는 넘블러(70만원) 챌린지에 참여하시는 넘블러님이실 경우 바로 20만원 크레딧을 드리며, 회고록을 작성할 넘블러님들께는 70만원의 크레딧을 추가로 드려요. 단, 20만원 크레딧을 받으실 경우 챌린지 종료 후 약 2~3분 정도 소요되는 설문조사를 작성해주셔야해요!

회고록은 많이 작성해야되나요? 부담스러운거 아닌가요?

아니요! 자신의 프로젝트를 돌아보며 회고하며 성장하는 것을 목표로 간단히 작성해주시면 됩니다! 정해진 양식은 없지만 프로젝트 미션, 어려웠던 부분, 해결방법, 아쉬웠던 부분, 사용한 기술스택, 사용해보며 느낀 기술스택의 장단점 등을 간단하게 velog나 블로그, 혹은 노션 등에 작성해주시길 권장드려요!

이 때 네이버 클라우드에 대해 피드백(ex. 장단점)을 간단하게만 추가해주시면 돼요😊

회고록을 대충 작성했다고 크레딧을 회수하지 않으니 걱정하지 마세요😊

보상

📌

상위 3명에게 호스트의 피드백 서면 피드백+온라인 3:1 피드백 제공

자세한 내용은 다음과 같아요

일시: 3월 25일 오전 10시-오전11시 (넘블측에서 조율 가능, 사정에 따라 변동 가능) 방법: 호스트와 상위 3명이 온라인상에서 각자의 결과물을 보며 피드백 미팅 진행

운영방법

📌

참여자들끼리 함께 하기에 특별한 넘블 챌린지

자세한 내용이 궁금하면 토글 버튼을 눌러주세요!

참여자분들은 모두 디스코드에 초대돼요.

1) 같은 미션을 선택하신 넘블러들끼리 서로 소통하시고 프로젝트에 필요한 인사이트를 공유하시라고 디스코드 채널을 개설해드립니다. 프로젝트 중간중간에 성실하게 소통해주신 분들 중 3분을 선정해 경품이 나갈 예정입니다.

2) 참가자들의 결과물은 디스코드 결과물 공유 채널에서 공유됩니다.

💰 환불 기준

📌

챌린지 오픈 전날까지는 결제하신 금액 100% 환불 가능합니다. 하지만 챌린지 오픈당일부터는 환불 불가합니다.

~ 챌린지 시작 전날 자정(23:59) 전까지

환불 100% 가능

챌린지 시작날 이후

환불 불가

딥다이브 일정을 알려드릴게요!

📌

2월 27일(월) ~ 3월 12일(일) (총 2주)

2월 27일(월) 오전 10시 : 딥다이브 안내문자 전달

디스코드 가입 링크, 챌린지 가이드라인, OT 링크 등 전달

오후 7시 : 딥다이브 OT

3월 12일(일) 오후 11시 59분 : 딥다이브 결과물 제출 마감

3월 21일(화) 오후 7시 : 결과 발표

3월 25일(토) 오전 10시 ~ 11시 (상위권 3명)

🔶보상 1.

상위 3명에 선정되신 분들께는 호스트의 피드백(온라인 피드백 및 서면 피드백 )을 제공해드려요! 본인의 결과물을 바탕으로 호스트에게 직접 피드백을 받을 수 있어요! 상위에 든 다른 참가자의 결과물도 함께 보며 내 것과 비교/분석하며 인사이트를 얻어가세요!

🔶보상 2.

상위 3명에 선정되신 분들, 딥다이브 결과물을 제출해주신 분들께는 이력서에 바로 어필할 수 있게끔 넘블에서 이번 딥다이브를 통해 성장한 역량을 어필할 수 있게 자동 완성해드려요! (딥다이브 참가내역에서 확인 가능합니다!)

🔶보상 3.

상위 3명에 선정되신 분들, 딥다이브 결과물을 제출해주신 분들께는 넘블 수료증이 발급돼요! 이미 많은 분들이 넘블의 결과물을 이력서와 포트폴리오에 활용하시고 있어요! 넘블이 인증한 실력자라는 타이틀을 얻어가세요! (인증서는 신청하신 분들에 한해서 제공됩니다! 신청방법은 ‘FAQ’에서 확인해주세요!)