[ReactNative] 강의 정리

제로초 인프런 배달앱클론코딩 강의

⚽️ 초기세팅

• 라우팅, 중첩된 navigate기능을 초기에 설계해야한다(마을버스도 이것때문에 꼬였다..다시 해야지..)

🏀 Navigation

• Stack.Navigator
  • Stack이란 페이지들이 쌓이는 것으로 보면 된다
  • 계속 한페이지씩 쌓여서 뒤로가기를 누를 때마다
    1- > 2 -> 3 -> 2 -> 1식으로 간다
  • navigation.push를 사용하여 히스토리와 같이 쌓이고 뺄 수 있다.(전 page상태가 남아있음)
• <NavigationContainer>로 감싸면 safeareaview가 포함되어 편리하다

🏈 Style

• style = {{position: absolute, absoluteFillObject}}에서 absoluteFillObject는 top: 0, left:0, right:0, bottom:0을 가리킨다. 한방에 클리어!

⚾️ useRef<~ |null>(null)

• null을 넣어야한다! 위에서부터 js엔진이 코드 실행시 null이 없으면 에러 발생

🥎 로그인,회원가입시

• text.trim() : 스페이스바 입력을 막는다

🏐 IOS 키보드 내리고 Input창에 가리지 않게 하기

• <TouchableWithoutFeedback>는 의미없는 태그이기에 accessible={false}를 설정하여 시각장애인용 스크린 리더기를 위해 이 부분을 읽지 않도록 해줌
• 스크롤이 동작하게 되는 컴포넌트는 다음처럼 TouchableWithoutFeedback의 바깥쪽에 구성해주도록 하자

const DismiossKeyboardView: React.FC<{
	style?: StyleProp<ViewStyle>;
}> = ({ children, ...props }) => (
	<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
		<KeyboardAwareScrollView
			{...props}
			style={props.style}
		>
			{children}
		</KeyboardAwareScrollView>
	</TouchableWithoutFeedback>
);
export default DismiossKeyboardView;

🪀 요즘 axios보다 다른 걸?

• axios에서 Ky,got으로 넘어가는 추세라고 한다. 이유는 종료된 explorer을 제외해서 더 가벼워졌고 axios는 서버와 클라이언트단에서 둘다 같은 역할을 수행할 수 있기에 비대하다는 단점이 있다.

🏸 광클을 막아보자

• Loading창을 만듦으로써 재클릭막고, 유저에게 돌아가고 있음을 보여주기(안전장치)
  • 클릭막기1 Pressable 태그내 disabled={!canGoNext || loading}
  • 클릭막기2 submit시에 if(loading) return
  • 클릭막기3 서버 요청 header에 토큰을 보내서 서버에서 광클한 사람인지 로봇인지 걸러낸다

		const response = await axios.post(
		      `${Config.API_URL}/ user`,
		         {
		    		 email,
		             name,
		             password, //해시화, 일방향 암호화},
		             { token: "고유한값" },
		            );

---

출처 : https://evst.tistory.com/30