Wecode는 세 달째에 기업 협업을 갈지 남아서 자기 주관데로 공부할지 정해야합니다. 개인적으로 저는 현장에서의 경험을 중요시했고 나가보는게 좋다고 생각했습니다.
그래서 가게 된 QUANTUM.AI 골목 상권을 분석하여 소비자의 Needs를 파악하여 소비자의 성향을 맞춰 음식점을 소개하고 구독하면 할인해주는 서비스입니다.
가기 전에는 정확히 무슨 일을 하게 되는지 몰랐지만 어느 정도 예상하기로는
기업이 토이 프로젝트를 내주면 거기에 따라 코드를 짜고 피드백해주는 느낌이였는데 예상과는 다른게 4주 만에 앱을 만들어 배포해야한다는 것이였습니다.
예에? 배,, 배포여?? 그것도 사이트가 아닌 앱이여??
프론트는 저랑 제 동기 둘이서요? 👀
기업에 가면 다양한 계획에 대해서 다른 느낌을 받을 수 있다고 말씀은 해주셨지만 이렇게 빠듯한 일정으로 생각치도 못한 서터레스😵가 이만 저만이 아니였습니다.
그래서 본론은!!!! 💥빠밤💥
📍 React-Native는 Nav와 Floating Button, 나머지는 WebView 태그로 React로 구현하라
React-Native를 처음 접하는 한달 전의 저와 똑같은 생각을 할 수가 있습니다.
RN인데 어떻게 react로 만들 수 있다고 말씀하시는거죠???
대표님은 정확히 말씀하셨지만 받아들임에 오류가 있었습니다.
React-Native의 <WebView>라는 태그에 props로 source={{ uri: (uri 주소) }}를 넣어 React를 앱으로도 충분히 보여줄 수 있다는 것이였습니다.
( 내 머릿속 🤯 )
장장 일주일동안 expo(React의 CRA같은 역활)로 아니면 react-native로 구현할 것인가 또한 expo로 한다면 어떻게 구현할 수 있을까에 대한 저에게는 심각했던 고민을 어이없게도 새벽 잠을 자기 전 어떤 유튜브 동영상에 나온 WebView태그로 풀게 되었습니다.
기업마다 react-native를 한다고해서 방향성이 아주 다르겠지만 퀀텀AI는 빠른 배포가 목적이였기에 expo와 WebView를 사용했습니다.
너무 허무한 기분이 들었지만 이 것을 제외하고도 큰 산들이 너무 많이 남아있었습니다.ㅎㅎ
🔍 React-Native Stack, Tab은 어떻게 이동하고 쌓을건데?
개인적으로 앱에서 nav가 구조를 뜻하며 가장 중요하다가 생각합니다.
그리고 나서 contents를 어떻게든 넣으면 된다라고 생각을 하는데 stack과 tab 요놈 요놈 이해하기 증말 어렵더라구요 허허
기업협업에서 플러터를 하신 분 얘기를 들어보니 라이브러리와 프레임워크의 장단점이 서로 있겠지만 플러터는 처음부터 알아서 stack이 기본 값으로 들어간다는 소리를 듣고 정말 부러우면서도 절망스러웠지만
저는 React-Native를 해야죠?ㅎㅎ! (맡은 임무 최선을 다하는 1인🙋♀️)
RN에서는 navigation은 라이브러리라 설치해야합니다. 고로
npm install @react-navigation/native을 해야합니다.
그리고 나서 expo인지 react-native인지 따라서 하는 방법이 다릅니다.
정확한건 공식문서를 참고하세요! 꼭!🤙
stack / tab 다른게 뭐람?
stack은 쌓는걸 말합니다. 예를 들면 push와 pop같이 한 컨테이너에 담고 뺄 수 있는 역활입니다.
tab은 쌓인다는 개념보단 그냥 어딘가로 이동한다는 개념입니다.
Stack 사용법
import { createStackNavigator } from '@react-navigation/stack';
import Login from '../pages/Login/Login';
import Home from '../pages/Home/Home';
const Stack = createStackNavigator();
export default function StackNav() {
return (
<Stack.Navigator>
<Stack.Screen name='Login' component={Login}></Stack.Screen>
<Stack.Screen name='Home' component={Home}></Stack.Screen>
</Stack.Navigator>
);
}엄청 간략화한 사용법이지만 기본적으로 설명하자면 React-Native에서 제공하는 createStackNavigator 함수를 Stack이란 변수에 담아
최상위 요소에 Stack.Navigator, 안에는 Stack.Screen으로 구성되어 있으며, component 이름을 가진 props는 {}에 담긴 요소가 보여줍니다. name의 이름을 가진 props에는 문자열로 이름을 지정하는데 이것은 각 nav를 가리키는 라벨, 나중에는 라우터의 pathname같은 역할을 합니다.
Tab
tab같은 경우도 기본적인 원리는 비슷하지만 import 하는 함수만 다릅니다.
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();🔍 Floating Button을 만들어보자
Floating Button을 react-native 주제로 이어져서 꼭 RN로 만들어야하는거냐?라고 생각하실 수 있지만,,
사실 다른 이유 없습니다 기업에서 (내부적인 이유) 인해 만들어 줬으면 하는 부분이라 만들었습니다.🙂
하지만 여기에서도 배울 점이 많다는 것!!!!
React에서는 내 맘데로 아무거나 Props를 넘길 수 있지만 RN는 아니다!
개인적으로 React와 RN의 어떤 점이 가장 다르다고 말할 수 있냐면 props로 넘길 수 있는 부분이 정해져 있다는 점입니다.
이게 도대체 머선 말이고?!?!?!!!라고 생각하실 수 있겠지만 사실입니다. 받아드리세요.
버튼이란 태그를 예를 들면 오른쪽에 보이는 목차들이 저게 정해져있는 props이고 빨간 동그라미 표시는 필수 props라는 것입니다.
그래서 RN하는 사람들을 공식문서의 절친이 되어야한다는 말이 우슷개소리하는 소리가 아닌 것을 뼈저리게 느끼실 것입니다.🥲
props 넘기는 법도 잘 모르겠는데 animation이라뇨?
애니메이션을 구현하기 위해선 구글 선생님의 도움보단 유투브 선생님의 도움이 절실해 react-native floating button으로 비롯해 아무 키워드를 냅다 쳤던 기억이 있네요,,,
사실 처음부터 로직을 머릿속으로 생각하여 노트에 적어 완성시키는게 정석이긴 하지만 스케쥴에 대한 압박과 1도 모르겠는 RN, 저는 어찌해야될지 모르겠어서 동영상데로 따라 했습니다. (참고했던 유투브는 마지막 링크에 남겨주겠습니다.ㅎㅎ)
동영상은 class 컴포넌트로 이루어져있으며 영어이기도하고 주의되야 할 부분만 남겨놓겠습니다. (Hooks랑 연동이 되어 참 다행이라 생각합니다.)
animation = new Animated.Value(0);
toggleMenu = () => {
const toValue = this.open ? 0 : 1;
Animated.spring(this.animation, {
toValue,
friction: 8,
useNativeDriver: true,
}).start();
this.open = !this.open;
};
- Animated.decay() 초기 속도로 시작하여 점차적으로 정지합니다.
- Animated.spring() 기본 스프링 물리 모델을 제공합니다.
- Animated.timing()여유 함수를 사용하여 시간이 지남에 따라 값에 애니메이션을 적용 합니다.
일단 Animated.Value(0)이란 객체를 생성 해야하는데 (0)을 붙이는 이유를 아직 모르겠습니다. 혹시라도 아시는 분이 계신다면 댓글을 남겨주세요 부탁드립니다.
decay, spring, timing 등은 css의 Animation의 linear, ease-in처럼 메소드마다 다른 동작이라고 생각하시면 됩니다.
불과 포스팅한지 하루 만에 생각이 바뀌어서 수정하게 되었습니다.
decay, spring, timing은 react의 animation의 react-spring라는 라이브러리처럼 각각 형태에 맞춰 다른 애니메이션이 진행되고 속도 감속같은 부분은 인자의 {}안에 넣으면 됩니다.
(사실상 Animated.timing()이 일반적으로 생각하는 animation이고 두 번째 인자 객체안의 ease: ''라는 매개변수가 linear같은 요소를 지정하는 곳이지만 내용이 너무 방대함으로 참고한 사이트에 링크들을 올려두도록 하겠습니다.)
📝 toValue는 0, 1로 작동한다 (truthy, falsy)
1로 변하면 실행함으로 this.open으로 값을 조절합니다.
( true, false로도 작동하지만 꼭 0, 1로 값을 지정해야합니다. )
📝 warning을 잡기 위해 useNativeDriver: true을 넣어준다.
동영상데로 따라했더니 사진처럼 warning이 뜨는데 useNativeDriver: true를 적어줘야한다는 솔루션이 많았고 그 전 대체 과거의 나는 무슨 생각인지 몰랐지만 위의 값을 this.open ? false : true 이렇게 주어 double 형상이 일어나는 error 메세지가 계속 떴습니다.
그래서 toValue값을 0, 1값으로 바꾸게 되었고 useNativeDriver도 true로 넣어주니 더 이상 메세지가 뜨지 않았습니다.
어디서부터 잘못된지 모르겠지만 어쨋든 warning과 error를 풀게되서어서 참 다행이라고 생각합니다.
📃 끝 마치며
그 시간에 제가 겪은 RN의 세계는 내게 이런 시련이 올 수 있을까라는 생각을 했지만 맛이라도 봤다라는 긍정적인 마음을 가지며, 사실 앱에 대한 궁금증이 아직 많아서 시간만 된다면 차근차근 앱을 만들어 보고 싶다는 생각이 듭니다.
그럴러면,,, 네이티브 언어도 같이 공부해야한다는 다짐부터 하길 바라며
시작할 때 스트레스가 이만 저만이 아니였지만 긍정적으로 바꾸게 된 계기는 일단
.
위코드 데이에 우리 리더 멘토님이신 준식님이 회사를 들어가게 된다면
기술 스택은 언제든지 바뀔 수 있고 그 것에 대한 문제는 문제도 아니다 기획도 디자인도 그리고 다른 부수적인 것 들이 결정 되었다고해도 언제든 뒤바뀔 수 있는 경우가 부지기수하다라는 정말 현실을 깨우치는 말들을 해주셨고
다른 분들은 모르겠지만 나에게는 그 말이 정말 깊에 와닿았습니다.
.
또한 우리 동기 중 정말 본받고 싶은 9년차 개발자 분이 계신데 (지민님) 프론트로 이직을 하고 싶었고 위코드 FE 커리큘럼을 배웠지만 기업협업에 가서 백엔드를 맡게 되었었습니다. 만약 그게 저였으면 정말 스스로에 대한 본질적인 질문부터 시작해 스트레스, 자신감 부족 등으로 우울했을 것 같지만 그 분은 그러지 않으셨습니다. 오히려 더 배움이 많다고 생각하시고 잘 견뎌내셨습니다. ( 경력에서 오는 바이브였는지, 긍정적인 성격이셨는지 모르겠습니다. 그냥 둘 다였는지도 )
.
그 모습을 보고 생각에만 그치고 싶지 않았고 더욱 그 분과 같이 마인드 셋을하여 모든 일을 새롭지만 긍정적으로 받아드리고 싶습니다.
위코드가 끝난 시점인 지금 내가 어떤 곳을 갈지, 어떤 일을 할지, 어떤 개발자가 될지, 결론적으로 어떤 사람이 될지는 아직 모르지만 지금 원하는 것처럼 노력하면 미래에 나는 그렇게 되어있다고 믿고 싶습니다.
(React의 남은 부분은 언제 블로깅을 할지 모르겠군요ㅎㅎ, 그럼 이만 할 일이 많아서)
