어쨌든 공부하는 블로그

매칭 버튼을 누르면 매칭 중 모달이 뜨고, 2초 뒤에 매칭 완료 화면으로 넘어가는 기능을 구현해 보았다그런데 매칭 중 모달에서 취소 버튼을 누르면 매칭을 취소 시키고, 매칭 완료 화면으로 넘어가지 않게 해야 했어서 그 부분 구현한 것을 기록해 보겠다const [modalVisible, setModalVisible] = useState(false);const timeRef = useRef(null);const startMatching = () => { setModalVisible(true); timeRef.current = setTimeout(() => { setModalVisible(false); navigation.navigate('Done'); }, 2000)..

진행 중인 프로젝트에서 모달 창이 필요했는데, react native에서 제공하는 기본 Alert 스타일은 스타일 편집이 불가해서 그냥 새로 컴포넌트 형태로 만들었다export default class AlertModal extends Component { constructor(props) { super(props); } render() { return ( { this.props.setModalVisible(false); }} > ) }}우선 위와 같이..

const removeSpace = text => (text.replace(/\s/g, ''))const checkValue = () => { if (removeSpace(editTitle) == '') { console.log('제목을 입력해 주세요.'); } else if (removeSpace(editContent) == '') { console.log('내용을 입력해 주세요.'); } else { navigation.pop(); }}공백(space, tab)의 정규표현식은 '/\s/g'이다따라서 str.replace를 사용해 공백을 전부 없애 준 뒤 남은 문자열을 확인하여 제목이나 내용에 공백만 들어간 상태라면 안내 문구가 뜨도록 작성할 ..

위와 같이 게시글 제목과 내용을 입력받아 볼 것이다const [title, setTitle] = useState('');const [content, setContent] = useState('');우선 useState를 사용하여 변수를 선언해 준다배열에서 첫번째 오는 건 변수명, 두번째 오는 것은 해당 변수의 값을 변경할 함수명이다useState()에 인자로 기본값을 넘겨줄 수 있다  { setTitle(text) }} style={style.TitleText } placeholder='게시글 제목을 입력해 주세요.' /> { setContent(text) }} style={ style.ContentText } multiline={true} placeholder='스터디 내용을..

게시글 리스트(FlatList) 위에 고정된 위치에 글쓰기 버튼을 만들어야 하는데, position을 absolute로 주어 쉽게 설정할 수 있다WriteButton: { position: 'absolute', bottom: 20, right: 20, borderColor: '#5678F0', borderWidth: 3, borderRadius: 50, width: 60, height: 60, justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff'}위와 같이 스타일을 설정하였는데, position을 absolute로 설정했으면 top/bottom/left/right를 ..

이어서 위쪽에 언어 선택 카테고리를 만들어 볼 건데, 직접 만들어도 되지만, 컴포넌트 소스 코드가 있길래 그냥 사용했다 https://github.com/zengkm/react-native-select-button GitHub - zengkm/react-native-select-button: A react native buttton component for single selection and multi selectionA react native buttton component for single selection and multi selection - zengkm/react-native-select-buttongithub.com 그런데 내가 만들어야 하는 카테고리의 경우, 맨 처음 들어가면 '전체' 버..

https://reactnavigation.org/navigation은 위 라이브러리를 사용했다  ( navigation.navigate('Search')}> ) }} name='Board' component={boardList}/>원래는 이런 식으로 Navigation Screen들을 나열할 때 헤더를 설정해 줄 수 있다하지만 검색 버튼을 누르면 검색창으로 이동해야 했는데 저 위치에서는 navigation을 이용해 search 페이지로 이동할 수 없기 때문에, useEffect를 사용해서 boardList component 내에서 헤더를 설..

Login위와 같이 코드를 작성했는데 TouchableOpacity 컴포넌트를 클릭하지 않았는데도 자꾸 Main 화면으로 이동했다 onPress의 prop에 바로 명령문을 넣어버리면 그냥 실행이 되어버리기 때문에 반드시 함수 형태로 전달해야 한다  navigation.replace('Main')}> Login함수로 prop을 전달해 주면 해결된다

Unable to resolve "@react-navigation/native" from "App.js"Navigation 바를 만드는데 자꾸 이런 에러가 뜨면서 실행이 되질 않았다 npm start -- --reset-cache잔여 캐시 문제라는 말도 있어서 위와 같이 시도해 봐도 안 되었다npm remove @react-navigation/nativenpm install @react-navigation/native결국 @react-navition/native를 제거한 뒤 다시 설치해 주니 제대로 작동하였다 그리고 뒤에Unable to resolve "@react-navigation/bottom-tabs" from "App.js"이번엔 이렇게 에러가 떴는데, 마찬가지로 제거해준 뒤 다시 실행시켰더니 해..

React Native Expo 환경은 따로 안드로이드 스튜디오 설치를 하지 않고도 휴대폰 디바이스에 연결해서 개발 상황을 확인할 수 있는데, 휴대폰을 계속 켜놔야 하기도 하고 그냥 컴퓨터 내에서 에뮬레이터를 돌리는 게 나을 것 같았다 https://developer.android.com/studio우선 안드로이드 스튜디오를 설치해 준다 상단 메뉴바에서 File > Setting > Android SDK > SDK Playforms창에서 원하는 안드로이드 버전 설치 같은 메뉴바의 SDK Tools 창에서 Android SDK Build Tools, Android Emulator가 설치되어 있는지 확인한다 우측 상단에서 Device Manager로 들어가서+ 버튼을 눌러 새로운 디바이스를 만들어 준다옵션을..