[코딩] 스파르타코딩클럽 앱개발 종합반 3주차 개발일지 (7/5~7/11)

벌써 앱개발 종합반 3주차!!!

절반이 지났다!

이번주도 금욜과 토욜 이틀에 걸쳐서 강의를 들었다.

 

 

3-1에서 배운 내용!!

-이번주에 배울 내용들 알아보기!

 

3-2에서 배운 내용!!

-나만의 꿀팁 상세 페이지를 만들어 보기! (pages 폴더에 DetailPage.js 만들어서)

-혼자 먼저 시도해보기! (아직까진 혼자 완성하는게 버겁다;;;)

 

3-3에서 배운 내용!!

-DetailPage.js 페이지 만들어가기!

 

3-4에서 배운 내용!!

-앱 필수 기초지식인 컴포넌트(Component), 상태(State), 속성(Props), useEffect!!

그 중에서 컴포넌트란 정해진 엘리먼트들, 즉 요소를 사용하여 만든 화면의 일부분!

버튼 하나가 컴포넌트가 될 수 있고 버튼을 모아둔 영역이 컴포넌트가 될 수도 있다.

 

3-5에서 배운 내용!!

-속성이란 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식, 즉 데이터 전달!

-기억해야 할 규칙!
1. 컴포넌트에 속성(데이터)을 부여해줘서 전달할땐, 키와 벨류(content={content}) 형태로 전달해줘야 할 것!

2. 컴포넌트를 반복문 돌릴땐, 컴포넌트마다 고유하다는 것을 표현하기 위해, map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것!

 

3-6에서 배운 내용!!

-상태란 컴포넌트에서 데이터를 유지하고 관리하기 위한 유일한 방법, 즉 사용할 데이터!

-상태는 리액트 라이브러리에서 제공해주는 useStatefh 생성하고 setState 함수로 정/변경 할 수 있다.

-useEffect란 화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수들을 모아두는 곳! (리액트 기본 제공 함수)

화면이 그려진 다음, 서버에게 필요한 데이터를 요청하여 받은 후, 화면을 다시 그릴 때 주로 사용!

 

3-7에서 배운 내용!!

-컴포넌트와 상태를 이용해서 로딩화면 만들기! (컴포넌트 폴더에 Loading.js 파일 만들어서)

 

3-8에서 배운 내용!!

-상태를 이용해 카테고리 기능 넣기!

-카테고리 기능을 위해선 카테고리 상태와 함수가 필요!

-요건 완성된 모습! (반려견 카테고리 버튼을 누르면... 반려견과 관련된 내용만 뜬다.)

 

3-9에서 배운 내용!!

-앱 상태 바 (Status Bar) 관리!

-상태 바는 배터리, 시간 등이 뜨는 모바일 맨 위에 바.

-Expo 상태 바 설치를 위해... VS Code 터미널 창에 expo install expo-status-bar

-status bar style이  light일 때는 하얀색으로, black일 때는 검은색으로 뜬다.

 

3-10에서 배운 내용!!

-네비게이션이란? 앱에서 만든 컴포넌트들을 페이지화 시켜주고 해당 페이지끼지 이동을 가능하게 해주는 라이브러리!

https://reactnavigation.org/ 공식문서 참고!

-네비게이션 설치 코드

yarn add @react-navigation/native

-네비게이션 추가 설치코드

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

3-11에서 배운 내용!!

-스택 네비게이션이란? 컴포넌트에 페이지 기능을 부여해주고 컴포넌트에서 컴포넌트로 이동, 즉 페이지 이동을 가능하게 해준다.

-페이지는 Stack.Screen, 책갈피는 Stack.Navigator라 부른다.

-설치할 때는 yarn add @react-navigation/stack

-navigation 폴더 하나 만들어서 안에 StackNavigator.js 파일 만들어서 코드 넣기!

 

3-12에서 배운 내용!!

-스택 네비게이션의 헤더 스타일 수정!

 

3-13에서 배운 내용!!

-메인 페이지에서 카드 버튼을 누르면 꿀팁 상세 페이지로 이동!

 

3-14에서 배운 내용!!

-페이지 내용 공유하기 기능!

-import { Share } from "react-native";

-완성된 모습은... 공유하기 버튼을 누르면 요로케 나온다.

 

3-15에서 배운 내용!!

-외부 링크로 연결되게 하기!

-expo install expo-linking으로 도구 설치하고 import * as Linking from 'expo-linking'; 입력!

-완성된 모습은... 버튼을 누르면 스파르타 코딩클럽 홈페이지로 연결.

 

3-16에서 배운 내용!!

-어바웃 화면 페이지화 시키고 소개 페이지 버튼 추가하기!

-완성된 모습은... 소개 페이지 버튼을 누르면 어바웃 페이지 뜬다. (상태바도 light로 바뀜. 메인 페이지는 dark.)

-꿀팁 찜 페이지 만들기!

-완성된 모습은... 꿀팁 찜 카테고리 버튼을 누르면 꿀팁 찜 페이지가 뜬다.

 

 

 

이제 정말 앱에 기능들이 새롭게 추가되고 나니 진짜 앱 같아졌다. ㅎㅎㅎ

4주차에는 더 앱 같아지겠지?!

 

아무튼 이것으로 3주차 앱개발 종합반 개발일지 끄으으으읕!!!