나아가는중

React Native borderStyle React Native borderStyle은 solid(default), dotted, dashed 이렇게 단 3개만이 존재합니다. 기본으로 스타일을 명시하지 않으면 solid 스타일이 적용이 됩니다. 스타일 속성에 borderWidth를 0이상의 값으로 설정한뒤, borderStyle 에 원하시는 style을 넣으시면 됩니다. const styles = StyleSheet.creat({ button: { width: '100', height: 50, justifyContent: 'center', borderWidth: 2, borderRadius: 5, borderStyle: 'solid' // borderStyle: 'dotted' // borderSty..

Github git config core.ignorecase false Github는 파일명이나 폴더명을 대소문자만 변경하면 인식하지 못합니다. 그것을 인식하게 해준다고 알려진 git config core.ignorecase false 설정방법입니다. 기존에는 파일명을 변경하고 commit을 하면 commit할게 없다고 나왔는데요, 위의 설정을 해주시면 commit이 정상적으로 나타나게 됩니다. 하지만 권장하지 않으며, 이것을 사용하면 다른 문제가 발생합니다. 이렇게 하면 파일명이 변경된 것이라고 생각하실 텐데 github에서 확인해보시면 아래와 같이 대문자 파일 하나, 소문자 파일 하나가 있는것을 확인하실 수 있습니다. 이제 github에는 두개의 파일이 있지만 이것을 git pull을 해도 로컬에는 ..

Github 파일명 대소문자 변경 Github는 파일명을 대소문자만 변경하면 구분하지 못하는 사실을 알고 계신가요? 로컬 영역에서 파일명을 변경하면 로컬 영역에는 변경된 파일명이 나타나지만, Github내에서는 그 변경이 적용이 되지 않습니다. 파일명을 변경한 뒤 commit를 해주면 변경된 것이 없다고 나옵니다. 그러면 파일명을 어떻게 변경해야 할까요? 방법은 git mv 를 사용하는 방법입니다. git mv 를 사용하여 파일명을 변경하니깐 이제 commit이 동작합니다. 다른 방법은 파일명을 임의의 파일명으로 수정한다음 push 해주시고, 다시 그 파일명을 대소문자 구분하여 변경한다음 push 하는 방법도 있습니다.

Github 폴더 생성 create folder 폴더를 생성하는것은 다들 어렵지 않게 하실 수 있을실 겁니다. 근데 왜 폴더 생성이라는 제목으로 글을 쓰냐면은 Github에서 비어있는 폴더는 만들 수 없다는 것을 알려드릴려고 합니다. Github는 폴더를 생성하고 폴더에 파일을 포함해야지만 그 폴더가 생성이 됩니다. Github 사이트에서 생성할때 아래 이미지 처럼 Create new file과 Upload files는 있지만 폴더 생성은 없는 것을 보실 수 있습니다. Github에서 폴더를 생성하시려면 우선 Create new file을 선택해 주시고 파일 이름을 입력하는 란에서 Test/폴더명/file명 이렇게 입력해주시면 폴더가 생성되고 그 안에 파일이 생성됩니다. 폴더명을 입력하시고 "/"를 입력..

Github Repository 생성 및 command line 이해 repository를 github 사이트에서 생성하고 command line을 통해 repository 생성해보도록 하겠습니다. 우선 github에 로그인을 해주시고, 아래 이미지의 new 버튼을 통해 새로운 repository 생성하도록 하겠습니다. 버튼을 누르셨으면 이제 아래와 같은 창이 나타나게 됩니다. Repository name에 프로젝트 명을 입력해주시고, 아해 Create repository 버튼을 클릭해주세요. Add a README file은 선택 안하도록 하겠습니다. 여기에서 Public은 타인에게 공개되어 다른사람들도 코드를 볼 수 있습니다. Private를 선택해주면 타인은 볼 수 없으며 본인만 볼 수 있습니다. ..

React Native react-native-pulse API 사용법 React Native animation 중에서 pulse 효과를 API를 사용하여 쉽고 간편하게 사용하는 방법입니다. 저한테 필요한 기능과 정말 딱 맞는 효과를 가지고 있어서 너무 유용하게 사용하였답니다. 직접 react-native-animatable을 import해서 구현하기에는 어렵고 힘든데, 이 API 덕분에 쉽게 구현하게 되었습니다. Animatable 중에 pulse가 어떤 효과인지 모르시는 분들은 아래 링크를 참조하시면 됩니다. pulse이외에도 여러 animatable 효과들이 있습니다. 다만 저는 npm만 보고는 구현하기가 어렵더라고요... www.npmjs.com/package/react-native-animata..

React Native Stopwatch - Functional Component Hooks 구현 React Native 앱 개발 stopwatch component 구현 예제(example)를 보여드리겠습니다. 별도의 API는 사용하지 않으며 React의 useRef를 사용하여 구현한 방법입니다. Functional Component방법을 사용하여 구현하였습니다. StopWatch.js import React, { useState, useRef } from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { TouchableOpacity } from 'react-native-gesture-handler'; const Stop..

React Native react-native-stopwatch-timer API를 사용한 stopwatch 구현 React Native 앱 개발 중 스탑워치를 API를 사용해서 구현하는 것을 알려드립니다. npm에서 제공하는 기본 코드는 class component 형식을 사용하고 있는데요, 요즘 방식인 hooks functional component 방식으로 변경해서 사용하는 방법을 보여드리겠습니다. 우선 아래 코드를 입력해서 react-native-stopwatch-timer를 설치해 줍니다. npm install react-native-stopwatch-timer 이 API는 시간초가 증가하는 stopwatch랑 timer 두 가지를 제공하는데요, 저는 stopwatch만 사용해서 하는 방법을 보..

React Native Header - Functional Component Hooks React Native 앱 개발 중에 본인이 원하는 custom header bar 가 필요한 경우가 있습니다. 그럴 경우에 사용할 custom header bar를 만들어 보겠습니다. React Navigation을 사용하면 자동으로 header bar가 생성되게 됩니다. 우선 기본으로 제공해주는 header bar를 먼저 제거해줍니다. 방법을 모르시는 분은 아래 링크를 참조해주세요. dlee0129.tistory.com/15 [React Native] Navigation Option no Header 헤더 없애기, 제거 React Native Navigation Option no HeaderBar 헤더 없애기, 제..

React Native Modal Functional Component Hooks Modal은 특정 이벤트가 실행되었을 때, 화면 상단에 표시되는 창으로, 화면 전체를 다 가리지 않고 일부만 가리는 것이라고 생각하시면 됩니다. 사용자의 응답(reponse)를 요구하며 확인, 예/아니오 등의 응답을 요구합니다. 응답이 있기 전까지 화면에서 사라지지 않으며 응답을 받으면 사라지는 동작입니다. Modal은 React Native에 기본으로 포함되어 있는 기능이기도 합니다만, 별도로 react-native-modal을 설치해서도 사용을 합니다. 저는 React Native에 기본으로 내장되어 있는 modal을 가지고 보여드리겠습니다. 두 파일로 분활하여 구현하였습니다. AppModalContainer.js im..