본문 바로가기

전체 글

[TIL-157] React Native - 유효성 검사 정규표현식 regex.test("문자열") regex(정규표현식)에 text() 메서드를 사용하면 인자로 넘겨준 문자열이 주어진 regex에 일치하는지 불리언으로 값을 반환함. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test const idRegex = /^[a-zA-z-0-9]{6,20}$/; => o (자바스크립트) const idRegex = "^[a-zA-z-0-9]{6,20}$"; => x (파이썬) const re = new RegExp('ab+c') regex는 문자열이 아니라 객체 형태이다. 따라서 변수에 정규 표현식 리터럴을 할당할 때 따옴표로 감싸면 안 된다. 대신 /(슬래시.. 더보기
AWS EC2 프리티어 과금 오늘 갑자기 AWS 결제 문자를 받았다. 6215원이 나갔다고 한다. S3는 요금이 나간다고 들었지만 나는 EC2만 썼고, S3를 써서 과금됐다는 얘기를 들었을 때도 몇 천원 안 되는 금액이었다. 나는 EC2 프리티어만 사용하고 있는데 갑자기 돈이 왜 나가지 싶어서 청구서를 확인해봤다. AWS 사이트가 너무 복잡하고 다 번역투에 원하는 기능 찾기도 힘든데, 검색해보니까 billing을 검색해서 들어가면 볼 수 있었다. 내역을 살펴보니 EC2에서 무료 750시간 외에 318시간의 사용분에 따른 요금이 부과된 것 같다. 그냥 AWS 프리티어 1년 동안 공짜다~ 이렇게 알고 써왔는데 그 기준이 복잡했던 모양이다. 750시간도 있고, 용량도 있고, 정해진 범위 안에서 무료인 것 같다. 그런데 나는 750시간이라.. 더보기
[TIL-156] React Native 빈공간 터치하면 키보드 내리기 Keyboard.dismiss() Keyboard 객체에 dismiss()라는 메서드가 있다. TouchableWithoutFeedback 컴포넌트와 함께 쓰면 된다. TouchableWithoutFeedback과 Keyboard를 import 한다. TouchableWithoutFeedback에 onPress 함수에 Keyboard.dismiss() 추가. https://medium.com/@binarydiver/react-native-dismiss-keyboard-23ddafbb981d [React Native] 빈공간 클릭시 Keyboard 사라지게 하는법 https://matthew-jo.tistory.com/15 React.Children.only expected .. 더보기
[TIL-155] React Native UI 만들기 & 안드로이드 테스트 안드로이드 fetch 문제 android/app/src/main/AndroidManifest.xml android:usesCleartextTraffic="true" fetch를 처음으로 시도했는데 "Network request failed"라는 에러가 뜸. [React Native] fetch 사용 시 안드로이드 localhost에서 "Network request failed" 해결법 https://gochibul.tistory.com/5 Android 실행시 React-Native Local server에 연결되지 않을 때 https://7stocks.tistory.com/165 React Native에서 fetch 시 415 에러 content-type: application/json fetch('u.. 더보기
[TIL-154] React Native UI 만들기 - 꼭 읽어볼 것 React Native UI 개발 시작하기 https://wit.nts-corp.com/2020/03/23/6014 Image 컴포넌트 https://kkiuk.tistory.com/195 padding, margin https://daesiker.tistory.com/22 Linking.openURL https://surprisecomputer.tistory.com/125 버튼 컴포넌트는 스타일링하지 못함 https://docs.expo.dev/ui-programming/react-native-styling-buttons/ react native에서 스타일 컴포넌트 사용하기 https://velog.io/@ikaret/React-Native-%EC%97%90%EC%84%9C-Styled-.. 더보기
[TIL-153] React Native 시작하기 - React-Native CLI 프로젝트의 구조 [React Native] React Native 프로젝트 시작하기 https://velog.io/@holidenty/React-Native-React-Native-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 라우팅/네비게이팅 router-flux router-flux 라이브러리를 이용한 라우팅. 이전에 리액트로 웹 만들 때와 비슷하게 Router.js를 만들어서 렌더링할 컴포넌트를 입력해둔다. router flux를 사용한 화면 전환 방법 https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=njaegy.. 더보기
[TIL-152] React Native 초기 세팅 - CRNA, React Native CLI, 안드로이드 스튜디오 SDK, adb 보호되어 있는 글입니다. 더보기
[TIL-151] 노마드코더 React Native #0.0~#1.3 React Native 세팅 - expo react native native는 안드로이드나 ios 같은 운영체제를 말함. native에서 이벤트를 감지해서 발생한 이벤트에 대한 정보를 javascript 코드에 보냄. 그럼 javascript가 ui를 변경하는 코드를 native에 보냄. 이 메시지대로 native가 ui를 업데이트함. native와 javascript가 이렇게 메시지를 주고 받음. 메시지를 주고받는 사이에 bridge가 있음. 이러한 전체 인프라를 컴파일하기 위해 java와 xcode가 필요함. 그래서 리액트 네이티브를 초기 세팅하는 게 복잡함. 이때 인프라를 만들고 싶지 않으면 expo를 씀. 자바스크립트 코드만 빼고 준비되어있는 상태. expo 역할 react native를 이용하면.. 더보기

티스토리툴바