전체 글109 [React] 유용한 Prop-Types 활용하기 리액트에서 컴포넌트의 props에 대한 타입 검사를 제공하는 중요한 기능입니다. PropTypes의 주요 장점과 기능은 다음과 같습니다. 1. 주요 장점타입 안정성 향상 - 컴포넌트에 전달되는 props의 타입을 런타임에 발견함으로써 조기에 오류 발견 가능코드 가독성 향상 - 컴포넌트에 어떤 타입의 props을 전달하면 되는지 명확히 지정디버깅 용이성 - 잘못된 타입의 props가 전달시 경고메시지 통해서 디버깅을 용이하게 함2. 기능다양한 타입 검사 - 문자열, 숫자, 불리언, 배열, 함수 등 javascript 타입 검사 가능필수 props 지정 - 'isRequired' 로 필수 입력 값임을 명시복잡한 타입 검사 - 'oneof', 'oneOfType', 'arrayOf' 등 사용하여 복잡한 타.. 2024. 11. 12. React Native - 기본 Template Component 만들기(1) 앱 개발의 표준화, 개발 속도, 유지보수 편이성을 높이기 위해 기본적인 컴포넌트를 템플릿으로 만들어 보고자 합니다.기본 기능으로 나눠진 컴포넌트를 atomic design pattern 이라고 합니다. atomic 을 기본으로 하고 compound desgin pattern 까지 간단하게 만들어 보겠습니다. 1. Typhography (텍스트 템플릿)텍스트 표출 템플릿으로 prop으로 폰트 컬러(color)와 크기(size)를 넘겨받아 변화를 줌특히 propTypes 라이브러리 사용하여 prop type을 지정한 type만 받도록 제한하는 방법을 적용 추천import React, { Component } from 'react';import { Text as RNText } from 'react-nati.. 2024. 11. 11. React Native - 위치기반 날씨앱 만들기(2) 이전 포스트에 이어서 날씨 정보 API를 사용하여 현재 위치 날씨를 보여주는 앱 페이지를 만들어 보겠습니다. 날씨 정보는 OpenWeatherMap을 사용합니다. 기본적인 사용법 및 API key 생성은 제 이전 포스트를 참고하기 바랍니다.2023.12.13 - [개발활용툴] - 날씨 API - OpenWeather 사용하기(1) 날씨 API - OpenWeather 사용하기(1)날씨 정보는 다양한 종류에 활용도가 높은 컨텐츠 중에 하나입니다.본인이 제공하는 주요 컨텐츠에 맞게 적절하게 사용한다면 좀 더 풍부한 정보를 가진 사이트를 만들 수 있겠습니다.여러 종peter-codinglife.tistory.com 1. 기본 기능 리스트처음 앱 구동시 위치정보 동의 여부 확인하기현재 핸드폰 위치정보 조회 하.. 2024. 11. 10. React Native - 위치기반 날씨앱 만들기(1) 핸드폰 위치 기반으로 현재 위치의 날씨 정보를 표출하는 간단한 앱을 만들어 보겠습니다.이를 통해 Expo 에서 핸드폰 위치를 가져오는 방법과 Open WeatherMap의 API 를 이용하여 현재 위치기반으로 날씨 정보를 가져와서 표출하고자 합니다. 1. 프로젝트 생성 및 라이브러리 설치앱명칭 : RN-weather 실행 : npx create-expo-app RN-weather --template blank참고 : --template blank 옵션 : javascript 로 개발핸드폰 위치조회 라이브러리 설치npx expo install expo-location2. Expo Location 관련 주요 기능현재 위치 가져오기핸드폰 현재 위치를 한번 가져옴위치 자동업데이트(subscribe)실시간으로.. 2024. 11. 9. [React Native] 갤러리&앨범 이미지 가져오기 앱 개발시 핸드폰 갤러리 이미를 가져다 사용하고자 할 때 expo 를 이용하는 앱개발에서는 imae picker 를 사용하면 쉽게 접근하여 적용하는 방법이 개발하는데 도움이 될 것 같아 내용을 정리해 보았습니다. 1. Expo image picker 사용하기https://docs.expo.dev/tutorial/image-picker/ 라이브러리 설치하기 터미널에서 "npx expo install expo-image-picker" 앱에 image picker 사용설정import * as ImagePicker from "expo-image-picker";image picker에서 제공하는 launchImageLibraryAsync 라이브러리 사용 2. 라이브러리 사용방법이미지 불러오는 aync/awa.. 2024. 9. 21. React- dayjs 활용 날짜가공하기 웹 또는 앱 서비스 제공시 날짜관련 하여 유용하게 활용할 수 있는 라이브러리인 dayjs 에 대해 알아보겠습니다. 서비스 제공에 있어서 날짜 계산, 시간 계산이 필요한 경우가 상당히 많은데 가벼우면서도 쉽게 사용할 수 있는 유용하여 몇 가지 예시를 들어 활용방법을 소개하겠습니다. https://day.js.org/en/ Day.js · 2kB JavaScript date utility library2kB JavaScript date utility libraryday.js.org 1. 설치하기일반적인 Node.js 패키지 설치와 동일npm install dayjs2. 사용하기라이브러리에서 기본 제공하는 기능오늘 날짜 const now = dayjs();다양한 날짜 포맷 지원 get - 특정 날짜.. 2024. 9. 9. 이전 1 2 3 4 5 6 ··· 19 다음 반응형
