Develop/ReactNative6 RN 카카오 맵 + 공공데이터 API 사용하기 화면 위에 카카오 맵 API 사용해서 webview 형식으로 불러오는 거 까지 성공한 상태에서 추가 작업하기! 상단에 버튼을 두고 버튼 누를 시javascript로 공공데이터포털에서 제공하는 전기차 충전소 제공 API를 사용해보려고 했다. ☑️ 충전소 찾기 버튼 + 드롭다운 리스트 일단 상단에 주변 충전소 찾기 라는 버튼을 하나 두고버튼을 클릭 시 드롭다운 리스트가 나오게 했고사용자가 시/도 선택시 시/군을 선택 할 수 있는 리스트가 활성화되게 했다.각각 시/도와 시/군에는 value값을 둬서 전기차 충전소 API를 호출할 때 사용할 수 있게 했다.충청남도에 해당하는 value 44를 선택하게 되면 cityDistricts에서 값을 가져온다.여기서 다음 드롭다운이 활성화되면서 시/군이 사용자한테 보여지.. 2024. 11. 15. 네이티브 환경설정 + 카카오 맵 프로젝트 폴더는 잘 만들었고 이제 카카오API 사용을 위한 환경설정 하기! 웹으로 할때는 간단했다. 거의 다 자바스크립트로 했고 그냥 문서 보면서 API 가져와서 쓰면 됐었는데 네이티브로 하려고 하니 각종 기본 설정을 해야 할 것들이 많았다! 일단 환경은 vscode, reactNative 0.72.6, jdk11, node.js 18.20.4 LTS 로 설정 + 테스트 기기는 z플립4 로 설정 하고 시작! 환경설정 카카오 디벨로퍼 공식 문서를 많이 참고하면서 진행했다.https://developers.kakao.com/docs/latest/ko/android/getting-started 기존에 쓰던 카카오 디벨로퍼 플랫폼에서 Android도 추가해줘야했다. 안드로이드 사용하려면1.패키지명 [필수]2... 2024. 11. 10. 네이티브 살짝 건드려보기 2차 프로젝트가 끝나자마자 3차 프로젝트가 시작됐고 3차 프로젝트 주제는 이건데.. 프로젝트 주제를 듣고 바로 생각이 들었던 건주유소 전기차 충전소 정보 제공, 위치 기준 목적지 추천이라는 주제는 좋지만이걸 웹으로 구현을 한다고 해도 활용도가 높을까?요즘엔 다 모바일 기기로 네비나, 지도로 주유소 찾고 하는데사용자들이 굳이 웹으로 검색을 할까? 였다.그래도 그냥 프로젝트니까 '이런 페이지를 구현했다.' 하는 거에 목표를 두고 개발을 하고 있었다. 3차 프로젝트가 시작되자 마자 1차 최초보고를 했고 멘토님이 우리 팀의 최초보고를 보고이런 피드백을 내려주셨다.(여담이지만 우리팀 PPT ,발표 미쳤어 너무 잘 만들고 발표도 잘해!!! 그냥 행복 그자체인 3차플젝!!)전기차나 주유소에서 주유정보 등등을 제공.. 2024. 11. 9. RN의 앱 로그인 과정 + DB연동 (3) 엑세스 토큰과 리프레쉬 토큰으로 구성앱 실행 → 리프레쉬 토큰 API 호출, 성공/실패로 결과값 받기 실패시 → 신규 유저 or 만료된 유저(토큰 만료) → 저장된 토큰 지우고 재 로그인 → 홈으로 이동 성공시 → 홈 화면 npm i react-native-encrypted-storage encryptStorage.js를 만들어주는데 사용법 자체는 웹의 로컬 스토리지와 거의 똑같은데,대신 async await 문법을 사용해 주어야 한다! 그리고 다시 npm start 후 android studio도 껐다 키자! ( 그냥 설치하고 start 했더니 오류 발생.. 다시 껐다 키니까 오류 사라짐! ) 다음으로는 postgresql, pgadmin 설치! 환경설정이 가장 어렵다.. postgresql 설치하면 .. 2024. 9. 10. 하면 할수록 어렵지만 쉬운(?) RN.. (2) 오류가 일단 엄청 많이 난다.. 근데 막상 npm run 하면 또 잘 된다..나 같은 삐약이는 빨간색이 보이면 일단 겁부터 먹기 때문에 그만 보고싶은데!! 엄청 많이 나온다!!(한동안 빨간색이 싫어질거 같다..ㅎ) 기능 구현이 쉽게 잘 되어있다!React로는 만들어서 color나 hover나 css로 스타일 입히고 했는데ReactNative에서는 라는 걸 지원해준다! 말고도 많은 기능들을 쉽게 사용할 수 있다는걸 공부하면서 느낀다! 그렇다면,, 시작! 버튼 컴포넌트랑 비슷하지만 버튼을 눌렀을 때를 감지해서 스타일을 쉽게 지정할 수 있다!https://reactnative.dev/docs/pressable Pressable · React NativePressable is a Core Component.. 2024. 9. 8. ReactNative 공부 시작! (1) React를 공부하던 중 앱 만들때 쓰는 ReactNative에 관심이 생겼다.리액트나 RN이나 같은 리액트 기반이기도 하고, 리액트를 쪼끔 건드려봤으니 RN도 할 수 있겠다(?) 라는 생각으로 시작! 프로젝트 만들기npx react-native@latest init 프로젝트명 리액트에서 쓰던 가 RN에서는 같은 느낌텍스트도 텍스트로 감싸줘야 한다.스타일 지정할때는 기본적으로 Camel case를 사용 버튼 속성 + 클릭 이벤트 예시.console.log('클릭!')}/> RN에서의 flex는 기본적으로 flex-direction 컬럼이 기본값 ( display : flex 생략 가능)RN에서의 navigation 설치법npm add @react-navigation/nativeCLI 사용중이므로np.. 2024. 9. 7. 이전 1 다음
