본문 바로가기

전체 글311

java - 상속, super, 오버라이딩, 추상클래스, final, Object 클래스 java 6 - 상속 백기선님의 https://github.com/whiteship/live-study 라이브 스터디 자바 공부입니다. 1 자바 상속의 특징 상속은 말 그대로 자식이 부모로부터 물려받는 것을 의미한다. 클래스 상속을 위해 extends 키워드를 사용한다. 자바에서 만드는 모든 클래스는 Object 클래스를 상속 받는다. 예제 Fruit.java public class Fruit { String name; public void setName(String name) { this.name = name; } } Apple.java public class Apple extends Fruit { } Apple 클래스에서 name 필드와 setName 메소드를 구현하지 않았지만, Fruit 클래스에서.. 2020. 12. 23.
[React Native] 앱 기능 인증 (Authentication) 2020. 12. 21.
[React Nativ] - 비동기 데이터 가져오기 (fetch, redux-thunk) React Native 202 - 데이터 가져오기 (fetch) 앱이 실행되자마자 서버에 있는 DB데이터를 가져와서 조회하려고 한다. 예를 들면, 아마존 홈페이지를 누르고 쇼핑탭에가면 쇼핑 상품들이 쫙 뜨는 것을 구현하고 싶다. 데이터는 메모리에 있는 것이 아니라 서버(server-side)에 있기 때문에, HTTP 의 GET 요청을 통해 데이터를 받는다. 리덕스에서 프로젝트의 액션을 보자. redux 는 기본적으로 액션 객체를 디스패치한다. ({type: ACTION_TYPE } 과 같은 액션 객체) 따라서 액션 생성자는 아래와 같이 파라미터를 받아와서 바로 액션 객체를 리턴해주는 함수였다. export const fetchProducts = (products) => { return { type: SE.. 2020. 12. 21.
[React Native] redux-thunk, Http 요청, 웹서버, DB React Native 201 - redux-thunk, Http 요청, 웹서버, DB 1 React Native App 2 Web Server 3 Database 1, 2, 3을 연동해보자. 1에서 바로 3으로 연동하는 것은 보안상 매우 위험한데, 그 중간에 미들웨어 역할을 하는 웹서버를 넣어준다. 여기서는 React Native를 위한 간단한 웹서버가 필요하므로, 이런 기능을 빨리 제공해주는 구글의 Firebase 웹서버를 적극 이용한다. 데이터 상태 관리 react-redux 에서 데이터의 상태 관리를 할 때, reducer,action 을 사용했다. 여기서 action 함수만 useDispatch 를 통해 모든 영역에서 사용할 수 있었다. 하지만, 리덕스에 등록되어 있지 않은 다른 함수도 사용하고.. 2020. 12. 20.
[React Native] TextInput 마음대로 사용하기, 유효값 체크 React Native 200 - TextInput 리액트네이티브 공식 사이트 를 방문하면 TextInput 의 사용법을 자세하게 알 수 있다. setTitle(text)} autoCapitalize="sentences" autoCorrect returnKeyType="next" onEndEditing={() => console.log("onEndEditing")} onSubmitEditing={() => console.log("onSubmitEditing")} />TextInput 에 여러 아규먼트를 사용할 수 있다. 신기한 기능들이 많은데 하나씩 살펴보자 대부분은 이름에서 알 수 있다. 헷갈리는 것만 기록한다. onChangeText : 텍스트가 바뀔 때 마다 함수 적용 returnKeyType : .. 2020. 12. 16.
[React Native] 사용자가 글 수정, 삭제 React Native 105 - 사용자가 글 수정, 삭제 userProductsScreenj.js 사용자가 들어가서 상품을 수정하고 삭제하는 화면이다. 왼쪽에 DrawerNavigator로 이동할 수 있도록 만들어 놓았다. useCallback useCallback 은 함수를 재사용하고 싶을 때 사용한다. 이 때 함수 안에서 사용하는 props가 있다면 deps 배열 안에 꼭 추가 해주어야 한다. 이로써 props 가 가장 최신 상태에 있는 것을 useCallback안의 함수가 사용할 수 있게 된다. useEffect useEffect 는 상태가 변화될 때, 특정 함수를 실행시킨다. useEffect 의 두 번째 파라미터 deps에 함수를 넣을 수 있다. deps 에 특정 값을 넣게 된다면, 컴포넌트가.. 2020. 12. 15.
[Reactive Native] 주문 하기 만들기 React Native 104 - 주문하기 장바구니에 담은 목록을 주문화면으로 가져와 본다. models/orders.js class Order { constructor(id, items, totalAmount, date) { this.id = id; this.items = items; this.totalAmount = totalAmount; this.date = date; } get readableDate() { return this.date.toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: &#39.. 2020. 12. 8.
[React Native] 아이템 주문목록에 담기 React Native 103 - 주문로직 장바구니에 있는 아이템은 '바로주문' 버튼을 누르면 '주문목록' 에 담긴다. 장바구니 아이템들을 그대로 주문목록에 담아주면 된다. 리듀서와 액션을 만들어보자. actions/orders.js export const ADD_ORDER = 'ADD_ORDER'; export const addOrder = (cartItems, totalAmount) => { return { type: ADD_ORDER, orderData: { items: cartItems, amount: totalAmount } }; }; CartScreen 컴포넌트에서 데이터를 전달받은 액션함수는 items, amount 를 리듀서로 전달한다. reduc.. 2020. 12. 7.
[React Native] 장바구니 삭제기능 구현 아이템 삭제로직 장바구니 안에 담긴 아이템을 삭제하는 것을 만들어 보고자 한다. cart 라는 액션과 리듀서를 통해 REMOVE_FROM_CART 의 액션이 주어지면 state 의 아이템을 제거하는 로직을 세워본다. 진행 순서는 다음과 같다. 장바구니에 들어가서 아이템 삭제버튼을 누른다. → useDispatch 함수에서 액션함수 REMOVE_FROM_CART 를 호출한다. 아이템 수량이 1개있으면 아이템을 삭제한다. → reducer 에서 해결한다. 2개이상 있으면 수량을 하나 줄인다. → reducer 에서 해결한다. 전체금액(totalAmount)도 같이 변경해준다. → reducer 에서 해결한다. CartScreen에서 삭제시 호출함수 설정 const dispatch = useDispatch().. 2020. 12. 6.
[React Native] 헤더버튼 React Native - 헤더버튼 헤더버튼 import { HeaderButtons, Item } from 'react-navigation-header-buttons'; import HeaderButton from '../../components/UI/HeaderButton'; ... const ProductOverviewScreen = (props) => { } ProductOverviewScreen.navigationOptions = (navData) => { return { headerTitle: '포도마켓', headerRight: () => ( { navData.navigation.navigate('Cart'); }} /> ) }; };.. 2020. 11. 30.
728x90

티스토리툴바