본문 바로가기

App Study/React Native6

노마드코더 리액트 네이티브 입문 - 6 Alert API https://reactnative.dev/docs/alert Alert · React Native Launches an alert dialog with the specified title and message. reactnative.dev Alert.alert() 말고도 Alert.prompt() 도 존재한다. (only iOS) Alert.prompt('Title', 'Message'); 입력 받은 값을 활용해줄 수 있다. 일단 기본적인 강의는 여기까지이다. 코드 챌린지 기본적으로 수정기능과 완료기능을 넣기 위해서 삭제 버튼 옆에 버튼들을 추가해주었다. 그리고 섹션을 나눠주기 위해서 flex 사이즈로 내용 부분과 버튼 부분의 레이아웃을 만들었다. 1. 수정 기능 수정 기능을 처음에는.. 2023. 5. 31.
노마드코더 리액트 네이티브 - 5 지금껏 입력 받은 내용을 onSubmitEditing 이벤트로 returnKey 입력을 감지하여 object 에 담아줬다. 이 값을 todos 에 객체 형태로 저장하고 Date.now() 를 키로 전개시켰는데 {Object.keys(todos).map((el, idx) => { return ( {idx+1}. {todos[el].text} ); })} 이렇게 object에 유일한 키로 저장한 값은 Object.keys(객체) 로 키 전체를 반환하는 배열을 받아줄 수 있으며, 이를 통해서 map 으로 반복문을 돌린다. 이때 map 의 값은 키로 받아온 것들이므로 todos에 대괄호로 키에 직접 접근해주고 text 내용을 받아온다. 이제 travel 의 값도 todo와 동일하게 처리해주면 된다. {Objec.. 2023. 5. 30.
노마드코더 리액트 네이티브 입문 - 4 Todo 와 여행 기록 앱 만들기 1. theme을 만들어서 컬러를 미리 저장해두기 관리를 위해서 utils 안에 만들어둠 export const theme = { bg : 'black', gray : '#3a3d40', } 그리고 스타일부분에 하드코딩 대신 적용시켜주기 const styles = StyleSheet.create({ container : { flex: 1, backgroundColor: theme.bg, paddingHorizontal: 20, }, header : { flexDirection: 'row', justifyContent: 'space-between', marginTop: 70, }, btnText : { color : theme.gray, fontSize : 38, font.. 2023. 5. 29.
노마드코더 리액트 네이티브 입문 - 3 open weather API 사용하여 날씨 연동시키기 https://openweathermap.org/api Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. openweathermap.org 1. 로그인/회원가입 후 API Key 발급 2. https://openweatherm.. 2023. 5. 27.