본문 바로가기

Coding/Etc120

React Native Object 배열(Array)로 바꾸는 방법 react native object to array / react native object index리액트 네이티브를 사용하여 앱을 제작하고 있다.먼저 내가 받아오는 자료의 형식은 아래와 같다. Array [Object { "mon":"abcdefg"},Object { "mon":"bcdefgh"}, Object { "mon":"cdefghi"},Object { "mon":"dddddd"},Object { "mon": "aaaaaaa"}] 튼 이런식으로 배열(Array)안에 오브젝트(Object)들이 여러개 들어있다.오브젝트는 무조건 하나의 키밸류 쌍만 오도록 정해놨으므로 정해진 틀을 벗어나는 경우는 존재하지 않는다.(위 배열을 menu 라고 부른다고 가정하자)위와 같은 경우 menu의 첫번째 값을 불러.. 2018. 2. 16.
React Native 키보드 숨기기 방법 Auto hide the keyboard on tapTextInput 관련해서 상당히 거슬리는 문제가 있다. 그건 바로 키보드가 사라지지 않는 문제인데사용자가 직접 뒤로가기 버튼을 누르거나 네비게이터를 통해 페이지를 이동하지 않는 이상 사라지지 않는다.나는 키보드가 밑에서 올라왔을 때 키보드를 제외한 다른 공간을 클릭하면 자동으로 키보드가 내려가도록 하고 싶었다.여기에는 상당히 많은 접근법이 있는데, 그 중 가장 괜찮은 방법은 전체 페이지를TouchableWithoutFeedback으로 감싸주고 클릭이벤트가 발생할 때 dismissKeyboard()를 호출해주는 것이다. 하지만 다행스럽게도 최근의 리액트 네이티브는 이 문제를 해결하고 상당히 수월한 해결법을 제시했다.그냥 인풋 필드를 ScrollView로.. 2018. 2. 15.
MySQL 계정 생성 및 권한주는 방법 먼저 현재 생성된 계정부터 확인한다.use mysql;select user from user; 다음으로 아래의 명령어를 통해 계정을 생성한다.create user 계정명@localhost identified by '비밀번호'; 위 명령어로 계정을 생성하면 로컬에서만 접속 가능한 계정이 생성된다.원격에서도 접근 가능한 계정을 생성하려면 localhost대신 '%'를 입력해주면 된다.(위 예제대로 살펴본다면 create user cnubot@'%' identified by '비밀번호')이제 생성한 계정에 권한을 줘야 한다.아래의 명령어로 생성한다. grant all privileges on 데이터베이스명.테이블명 to 계정명@localhost identified by '비밀번호' with grant opti.. 2018. 2. 13.
React Native KeyboardAvoidingView로 키보드 가림현상 해결방법 expo를 통해 시뮬레이터로 돌렸을때는 아무런 이상이 없었는데휴대폰으로 옮겨서 작업을 하다보니 문제가 발생했다.댓글을 입력하는 칸이 있는데 클릭해서 입력을 하려고 하면 키보드가 올라와버려서댓글창을 가려버리는 것이었다.쉽게 말해서 아래와 같은 현상이다. 이렇게 아래쪽에 댓글을 달 수 있는 공간을 박아놨다.텍스트 인풋창을 클릭해서 글을 쓰려고 하면 이렇게 키보드가 올라오는데 댓글창이 보이지 않는다.검색해보니 이러한 경우가 상당히 많은데 KeyboardAvoidingView를 통해 해결할 수 있다.아래와 같은 코드가 있다고 가정한다. 여기서 그냥 뷰자체를 KeyboardAvoidingView로 감싸주면 된다. 아마 behavior를 통해 어떤식으로 반응할지 정하는 것 같다.padding을 주니까 그만큼 위로 .. 2018. 2. 11.
React Native FlatList 새로고침 하는 방법 기존에 Scrollable하고, Refresh가 가능한 리스트가 필요했는데찾아보다가 FlatList가 적합하다고 판단했다.(참고로 ListView는 Deprecated 됐다고 한다)써보니까 상당히 유용하고 편하다.사용자가 딥하게 건들필요 없이 속성 인자만 잘 맞춰주면 알아서 잘 돌아간다.사용법이 궁금하다면 아래 블로그 참고(https://www.vobour.com/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-flatlist-react-native-flatlist) 튼 FlatList로 작업을 하고 있었는데 새로고침이 필요한 상황이 생겼다.예를 들어 댓글을 지우고 새로고침을 하면 그 내용이 반영이 되어야 하는데 잘 되지 않았다.나같은 .. 2018. 2. 11.
each child in an array or iterator should have a unique key prop 오류 해결방법 each child in an array or iterator should have a unique key prop solution 현재 React Native로 앱을 만들고 있다.지금은 댓글 리스트를 prop로 받고 해당 prop을 state에 저장하고 작업을 하고 있는데 와 같은 에러가 발생했다.눌러서 자세한 내용을 확인해봤다. 댓글 리스트는 Array라서 쉽게 랜더링 해주기 위해 map을 사용하고 있다.검색해보니 map을 사용할 때는 key속성을 줘야 한다고 나와있다.먼저 아래와 같은 코드가 있다고 가정한다. const commentList = this.state.commentList.map((data) => { return ( {data.userkey.username} {data.content} .. 2018. 2. 9.

티스토리툴바