목록프론트엔드/React-Native (6)

한량처럼 살고 싶다

[React-Native]ThemeProvider 사용 시 Warning: Failed prop type: Invalid prop `color` supplied to `Text`에러 발생

다크모드와 라이트모드 개발을 위해 ThemeProvider를 사용했는데... return ( ); 이 코드에서 theme 인자로 분명 다크모드 여부에 따라 색깔이 정의된 객체를 넘겨주게 되었다. 그런데 렌더링하는 화면에서 아무리 해도 색이 바뀌지 않길래 대체 뭐지 하고 렌더링 화면에서 받은 props를 찍어봤더니 theme 값이 안온다. 아래 코드는 렌더링하는 화면의 색을 정의한 styled component 이고, color: ${(props)=>props.theme.textColor} 부분에서 색을 지정한다. 그런데 이 코드에서 props를 찍어보면? 아래 오류 화면처럼 props의 theme이 빈 값인채로 덩그러니 와있다. const Btn = styled.TouchableOpacity` flex:..
프론트엔드/React-Native 2023. 10. 12. 20:04
[React-Native]axios 415 code error 발생

https://developer.mozilla.org/ko/docs/Web/HTTP/Status/415 415 Unsupported Media Type - HTTP | MDN HTTP '415 지원되지 않는 미디어 유형' 클라이언트 오류 응답 코드는 클라이언트가 보낸 페이로드가 지원하지 않는 형식이기 때문에 서버가 요청을 수락하지 않음을 나타냅니다. developer.mozilla.org 이 글을 읽어보면 415 코드는 '서버가 요청한 content-type 이 아닌 데이터가 왔을 때'를 의미한다. 나의 경우 json 타입의 데이터를 보냈는데, 왜 오류가 생기는지 알 수가 없었다. 심지어 JSON.stringify() 를 사용하여서 정확하게 JSON으로 변환했는데도 생긴 오류였다. 백엔드 서버에서도 분명..
프론트엔드/React-Native 2023. 2. 14. 19:32
안드로이드 에뮬레이터에서 localhost 접속하기

문제점 안드로이드 에뮬레이터는 컴퓨터에서 실행시켜주는 기계로 IP주소를 따로 부여받는다. 따라서 코딩할 때 코드 내부에서 localhost로 접속하면 접속이 안되는 (axios error) 오류가 발생한다. 해결책 코드내부에서 localhost 라는 주소를 쓰지 않고 10.0.2.2 로 작성해주면 된다. 10.0.2.2는 안드로이드에서 PC의 로컬호스트에 접속할 수 있도록 부여해주는 IP 주소이다. 별다른 설정을 건드리지 않았다면 저 값이 default 이므로 사용해주면 된다. ex) 접속해야 하는 url이 localhost:8080 이라면, 10.0.2.2:8080 으로 url을 수정한 뒤에 접속하면 된다.
프론트엔드/React-Native 2023. 2. 14. 18:58
[React-Native]비밀번호 입력 폼(눈 모양 클릭 시 비밀번호 보이게 하기, TextInput에 눈 아이콘 넣기)

아래 사진처럼 비밀번호 입력폼 안에 눈 아이콘을 넣고 싶으신 개발자분들이 많으실 것 같습니다. 저 역시도 수많은 stackoverflow를 찾아다니고,, 온갖 언어로 되어있는 글을 다 읽었는데도 잘 나오지 않아 정리합니다. 아마 글을 찾아보시면 안에 과 을 같이 넣으라는 글이 많이 나오는데요, 저는 이 방법으로 해도 모양이 만족스럽지 않았고 자연스럽지 못해서 다른 방법을 사용하려고 합니다. (아닌 분들도 계실 것이고.. 저보다 더 멋진 스타일링 실력을 가진 분들은 괜찮을 수도 있습니다.) 1. 우선 react-native-paper를 설치합니다. npm i react-native-paper 2. 눈 아이콘이 들어간 비밀번호 폼을 넣고자 하는 파일에 모듈 import 해줍니다. import { TextIn..
프론트엔드/React-Native 2023. 2. 9. 15:30
[React-Native]Unable to resolve module ./app.json from index.js

황당한 오류였다. 일단 모든 에뮬레이터와 작동중인 cmd를 중단시킨 뒤 react-native start --reset-cache 를 입력한 뒤에 다시 실행해보면 사라지는 오류이다. 만약 이렇게 해도 사라지지 않는다면 index.js가 Index.js로 되어있거나 철자가 틀렸을 수도 있다.
프론트엔드/React-Native 2023. 2. 6. 16:38
[React-Native/typescript]프로젝트 처음 시작 시 App.tsx 에서 생길 수 있는 오류(window, vscode)

리액트 네이티브 앱을 만들었을 때, App.tsx에 이런 오류가 생길 수 있습니다. 오류 01. Delete `CR` eslint(prettier/prettier) 단순한 개행문자 오류일 가능성이 높습니다. Mac에서 작업했던 파일을 윈도우에서 열었을 때 자주 생기는 문제입니다. 두 운영체제의 개행문자 default 스타일이 달라서 생깁니다. 이 오류가 생기면 파일 내부 모든 코드의 끝부분에 에러가 뜹니다. 해결책(vscode) vscode 하단을 보면 이렇게 CRLF 라고 적힌 버튼이 하나 있습니다. 이걸 누른 뒤에 아래 사진처럼 LF로 고치면 됩니다. 오류 02. Typescript - Cannot use JSX unless the '--jsx' flag is provided.ts(17004) tsc..
프론트엔드/React-Native 2023. 2. 6. 14:56
이전 Prev 1 Next 다음