React Native/Intermediate(11)
-
[React Native] 로그인 화면 구현 (프론트엔드) - 2. TextIput 이벤트 핸들러
1. TextIput 이벤트 핸들러 및 함수 textInput 에 커서를 두고 클릭을 하고 키보드 입력을 해도 아무런 반응이 없다. 텍스트가 입력이 될 때마다 이벤트를 발생시키는 onChange 라는 텍스트 프로퍼티가 필요하다. 단순히 입력된 값을 업데이트 시키는 함수만이 아니라 이번에는 onChangeText라는 이벤트 핸들러에 화살표 함수를 사용할 것이다. 여기에 value라는 매개변수를 전달해 값을 바로 업데이트시킬 것이다. updateInput 함수에는 2가지 인자를 넣는데 하나는 string, 하나는 value를 넣자. string 값을 써주는 이유는 2가지가 있다. 1. 이메일, 비밀번호 textInput에서 구분하기 위한 인자를 만들기 위해서 2. 업데이트되는 value 값은 state에서 ..
2022.05.22 -
[React Native] 로그인 화면 구현 (프론트엔드) - 1. 화면 준비 및 재사용 컴포넌트 작성
1. 로그인 화면 작성 위한 파일 및 로고 준비 auth 파일 안에 authForm.js, authLogo.js 파일을 만들자. authLogo.js 에서 로고 이미지를 가져와 쓸 건데 로고 이미지를 보관하기 위해 /app 안에 assets 라는 폴더를 만들고 그 안에 imgs라는 폴더를 만들자. 이 안에 다운받은 로고 파일을 넣으면 된다. 변화된 디렉토리 구조 ├─ app │ ├─ assets │ │ └─ imgs │ │ ├─ winthiary_login_logo.png │ │ └─ winthiary_login_logo@2x.png │ ├─ components │ │ ├─ auth │ │ │ ├─ authForm.js │ │ │ ├─ authLogo.js │ │ │ └─ index.js │ │ ├─ d..
2022.05.21 -
[React Native] 신규 프로젝트 생성 및 셋업
1. 새 프로젝트 생성 및 라이브러리 설치 react-native init [project-name] npm install --save axios@0.18.0 react-redux@6.0.1 redux@4.0.1 redux-promise@0.6.0 axio - promise API 를 활용하는 http 비동기 통신 라이브러리, 백엔드를 다룰 예정으로 필요 react-redux - react, redux UI binding redux - 사용 redux-promise - 미들웨어 사용 위해 필요 npm install @react-navigation/native navigation 설치 npm install react-native-gesture-handler navigation 관련 dependency 설치..
2022.05.20 -
[React Native] Redux
1. Redux란 Redux - 애플리케이션 상태(state)를 용이하게 관리하기 위한 프레임워크(오픈소스 JavaScript 라이브러리) react나 react native에서 제공해주는 내부 기술이 아니라 html, angular JS, jQuery 등 과도 사용할 수 있지만 컴포넌트를 많이 다뤄야 하는 React Native와 상호성이 가장 좋다. 또한 시너지 효과를 낼 수 있어 React, React Native 개발자들은 Redux와 함께 개발하고 있다. state의 까다로운 관리, state 접근, 프로젝트 규모에 따른 컴포넌트 구조의 복잡성 등의 문제가 있는 걸 basic 강의에서 이미 많이 느꼈을 ㅓ것이다. 이럴 때 모든 컴포넌트들이 state를 쉽게 공유하고 관리도 쉽게 만들어주고 상태 ..
2022.05.20 -
[React Native] Intro
1. Intro basic 설명 생략하고 진행 서버와 연동하는 하나의 완벽한 앱 개발 목표 1. Redux 사용법 2. React Native 심화 내용 3. 회원가입 & 로그인 4. Data의 CRUD 5.공공API 활용법 참고 자료 https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EC%A4%91%EA%B8%89/dashboard iOS/Android 앱 개발을 위한 실전 React Native - Intermediate - 인프런 | 강의 React Native 기반 모바일 앱 개발을 위한 중급 강의입니다. 프론트엔드의 심화내용 학습 뿐만 아니라 Firebase 기반의 백엔드..
2022.05.20