마크투비의 고 GO

오늘은 8장 내비게이션에 대해 알아보겠다 😁 Navigation 리액트 네이티브에서는 네비게이션 기능을 지원하지 않아서 외부 라이브러리인 리액트 네비게이션 라이브러리를 이용해야 한다. 1. 리액트 네비게이션 리액트 네비게이션에서 지원하는 네비게이션의 종류는 스택(stack) 네비게이션, 탭(tab) 네비게이션, 드로어(drawer) 네비게이션 세 종류이다. 이 포스트에서는 리액트 네비게이션5 버전을 기준으로 진행할 것이다. 1) 네비게이션의 종류 1️⃣ NavigationContainer 컴포넌트 네비게이션의 계층구조와 상태를 관리하는 컨테이너 역할을 하며, 모든 네비게이션 구성 요소를 감싼 최상위 컴포넌트이다. 2️⃣ Navigator 컴포넌트 화면을 관리하는 중간 관리자 역할로 네비게이션을 구성하며,..

⛔ 문제 그림과 같이 git init을 하고 나면 로컬의 브랜치가 master로 변경된다. 분명 깃헙의 디폴트 브랜치는 main으로 설정되어 있는데, 아직 내 깃배쉬에서는 반영이 안 된 건지 자꾸 로컬에서는 디폴트 브랜치는 master 브랜치로 되어있다. 이것 때문에 그동안 계속 깃헙 쓰는 데 오류가 났다. ✅ 해결 로컬에서도 디폴트 브랜치를 main으로 바꿔야 한다. 그래서 전처럼 원격저장소와 로컬을 연결할 때 $ git remote add origin [저장소 주소] 이것만 하면 안되고 다음과 같이 디폴트 브랜치를 main으로 설정해주는 명령어도 입력해줘야 한다. 📍 깃헙에서 레포를 만들고 원격 저장소와 로컬을 연결하는 방법은 다음과 같다. 1. 깃헙에서 레포를 만든다. 2. 로컬(자신의 컴퓨터)에서..

보호되어 있는 글입니다.

오늘은 7장 Context API에 대해 알아보겠다 😁 Context API 이전 포스트에서 Hooks의 여러 함수를 통해 컴포넌트에서 상태를 관리하는 방법에 대해 알아보았다. Context API는 데이터를 전역적으로 관리하고 사용할 수 있는 기능이다. 이번 포스팅에서는 Context API를 이용해서 상태를 전역적으로 관리하는 방법에 대해 알아보겠다. 1. 리액트 네이티브에서의 전역 상태 관리 일반적인 리액트 네이티브 애플리케이션의 경우 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달된다. 하지만 자식 컴포넌트에서는 부모로부터 받은 데이터를 변경할 수 없으므로 데이터를 전달받은 과정의 역순으로 App 컴포넌트(최상위 컴포넌트)에 데이터 변경 요청을 전달해야 한다. 💢 하지만 딱 봐도 위의 방법으로 상..

오늘은 6장 Hooks에 대해 알아보겠다 😁 Hooks 리액트 Hooks은 리액트 16.8, 리액트 네이티브 0.59 버전부터 사용할 수 있는 기능이다. Hooks를 이용해서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 1. useState 주로 컴포넌트들의 상태를 관리하기 위해 useState 함수를 사용한다. const [state, setState] = useState(initialState); useState 함수를 호출하면 파라미터로 전달한 값을 초깃값으로 갖는 상태 변수(state)와 그 변수를 수정할 수 있는 세터 함수(setState)를 배열로 반환한다. useState 함수는 관리해야 하는 상태의 수만큼 여러 번 사용할 수 있다. ✅ 상태를 관리하는 변수는 반드시 세터 함수를 이..

5장 할 일 관리 애플리케이션 만들기 이번 장에서는 4장까지 배운 내용을 바탕으로 TODO List 어플리케이션을 만들어보겠다. 5.0 애플리케이션 개요 5.0.1 파일 디렉토리 구조 ├── src │ ├── components │ │ ├── IconButton.js │ │ ├── Input.js │ │ └── Task.js │ ├── App.js │ ├── images.js │ └── theme.js │ ├── assets │ └── 이미지 파일들 └── App.js 5.0.2 세부 기능 등록: 할 일 항목을 추가하는 기능 수정: 완료되지 않은 할 일 항목을 수정하는 기능 삭제: 할 일 항목을 삭제하는 기능 완료: 할 일 항목의 완료 상태를 기록하는 기능 5.0.3 실행 화면 다음은 미리 맛보기로 이 ..

깃허브 자꾸 내맘처럼 안 돼서 한동안 방치하고 있었는데 올해가 가기 전에 완전히 박살을 내버려야겠다 짱나서 안되겠음. 1️⃣ 문제 디렉토리가 푸쉬되는 과정(? 잘 모르겠다 어디서 문제인지)에서 문제가 생겨서 디렉토리에 화살표 표시가 생기고, 디렉토리에 접근이 되지 않는 문제가 발생했다. git add 폴더 입력해서 스테이징 시킨 다음에 커밋 푸쉬했는데 왜 이렇게 될까?😥 2️⃣ 원인 .git 폴더 때문인데, 내 로컬 저장소의 폴더는 다음과 같다. react-native-study 에도 .git 폴더가 있고 react-native-study/react-native-component 폴더에도 .git 폴더가 있다. 해당 폴더 그니깐 상위폴더가 아닌 해당 폴더에 .git 폴더가 생겨서 발생하는 문제이다. 이미..

Unable to resolve module @react-native-async-storage/async-storage 에러 해결 💢 How I got this Error 오류는 다음과 같다 expo install @react-native-community/async-storage 위 코드를 cmd창에 입력해서 모듈을 설치해주고, npm start해서 아이폰에서 expo를 실행시키려고 하는데 자꾸 오류가 발생하는 것이다 ㅜㅜ package.json 파일에 모듈 이름과 버전이 나와있는 거 보면 모듈 설치는 잘 된 듯 하다. 뭐가 문제인지 모르겠다. 한글로 된 관련 문서는 없는 듯하니 이제 영어로 열심히 구글링해봐야겠다! ✅ Solution 패키지가 변경되면서 발생하는 에러이다. @react-native-c..

1. node.js 설치 node.js 설치가 필요하다 - 이미 설치했다면 버전 확인만 한 번 해본다 2. Expo CLI 설치 다른 블로그들 보니깐 Expo CLI말고 다른 걸 권장한다던데ㅜ 나에겐 선택권이 없었다... 3. 프로젝트 생성 expo init (프로젝트명) 그리고 여기서 template을 선택하는 게 나오는데, 나는 여기서 맨 위에 있는 blank를 선택했다. 4. 모바일 기기와 연결 아래와 같이 코드를 작성하면 QR코드가 나온다. 모바일 기기에서 Expo go 앱을 다운받고, 아래에 나오는 QR 코드를 인식해서 PC와 모바일 기기를 연결해주면 된다!

1. 문제 문제는 위 사진과 같다. 슬랙에서 질문한 다른 사람들을 보니 많은 초보들이 겪는 문제인 듯하다. 에뮬레이터가 아예 작동하지 않는 건 아닌데, xml 파일에 어떤 걸 입력해도 초기화면과 동일하다. 거의 한 달 전부터 이 문제를 안고 있었는데, 시간이 너무 오래 걸리는 것이 문제인 듯해서 바이러스 검사 하는 파일도 몇 개 제외하고 그랬는데 여전히 해결하지 못했다. 스터디 진도를 따라가느라 에러 해결할 틈도 없이 그냥 저 xml 파일에서 보이는 가상 화면만 보고 공부를 하고 있었다. (진짜 오늘 게비스콘 먹은 기분... 드디어 발 뻗고 잘 수 있음😮‍💨😮‍💨) 2. 원인 아래에 링크 걸어둔 소희님 블로그를 보면 원인은 크게 세 가지이다. 그 중에서 나는 두번째 이유였는데 나름 가장 간단한 이유였다!..