insta-native

들어가기insta-native시작expo로 만들어서 eject해서 필요한 부분은 cli에서 이어서 만듬npm i --global expo-cliexpo init schoolgram-nativeemulator가 실행 안될경우 react-native doctor 그 다

들어가기reactNative의 화면이동의 기본이 되는 reactNavigation을 설명함.login됬을떄의 navigation과 logOut됬을때의 navigation을 두개로 나누어 만듬.문법이 언제 바뀔지 모르니 항상 공식문서를 참조할 것https://r

들어가기\-npm i styled-components사용시, import styled from 'styled-components/native'\-web과 차이점.\-web에서 div, span 은 native에서는 View, Text로~expo install react

만드는 방법check!!1\. image load2\. styled. 다음에 붙는거 확인( View, Text, Touchable, image등등..)

들어가기native에서는 useForm사용이 web과는 다르다.항상 공식문서를 참조하면 변화를 따라가야 함https://react-hook-form.com/get-startednpm i react-hook-formmutation부분은 신경쓰지 말고 useFor

들어가기phone에서 서버와 통신을 하게 하는 방법.apollo client, graphql, web과 비슷함.npm install @apollo/client graphqlngrok은 내부 port를 바깥으로 쏴주는 기능임.한마디로 localhost:3000번에 돌고

들어가기native에서 useMutaion을 사용하는 방법임web과 다른점이 없다.별표 부분만 확인해면서 check해 볼것

1. screens/login.js ~

들어가기web에서 localStorage에 token을 넣어서 login Persist를 한것을,app에서 어떻게 구현할 것인지 설명함,web에서의 localStorage기능은 app에서 asyncStorage가 한다고 보면됨.

들어가기bottomTabNavigation에서 bottomTab에 있는 page들이 모두 공유해야 되는stack으로 쌓일 수 있는, 쌓여야 하는 page들이 있을 것이다.예를들어, userprofile화면이나, photo화면등은 어디에서 클릭을 해도 그 page로이동

들어가기insta-web과 마찬가지로 app에서도 server에 req를 보낼때, token을 같이 보내야 server에서 설정한 loggendInuser에 가로막히지 않는다.app에서 server쪽으로 req를 보낼때, token을 깉이 보내는 방법을 알아보자.

들어가기logout을 굳이 따로 정리할까 말까 고민하다가token이 깔끔하게 지워지지가 않아서고생을 해서정리하기로 함

들어가기seeFeed Query를 useQuery를 이용해서 data를 불러온 다음에Flatlist로 뿌려줌, web에서는 map으로 뿌렸는데app에서는 Flatlist로 뿌려줌.Scrollview를 이용해도 되지만, 이어서 infiniteScroll까지 사용하기 위해

들어가기폰 화면을 밑으로 내렸을때, refresh, reload되게 하는 기능Flatlist안에 포함되어 있는 기능임.

들어가기예를 들어, 손흥민 팔로우를 loading한다고 할때, data가 너무 많으면,loading시 error가 날수도 있고, server가 힘들진다.따라서, 스크롤이 화면 아래에 왔을때, 이어서 3~4개의 data를 loading하게하는것, 여기서 feed부분만 설

들억가기휴대폰을 껏다 켯을 때, 혹시 server가 다운되어있거나, 꺼져있을떄,마지막으로 접속해서 봤던 data들이 cache에 남아있게 해서,서버가 다운되어도, 그 data들을 볼 수 있게 cache를 저장해 놓는것npm i apollo3-cache-persist

들어가기app에서 하트를 눌렀을때, 색깔이 변하고, like 숫자가 올라감.components/Photo.js 중에서 관련 부분만 보여주겠습니다.///1번/// 2번id는 function Photo({id,user, caption, file, isLiked, likes

await persistCache({cache,storage: new \~\~~serialize: false,})==> Query를 수정했을때, error가 뜰 경우 serialize: false를 넣는다.==>예를 들어 seeFeed Query에서 data를 받는 값

들어가기insta에서 나에대한, loggendInUser에 대한 정보를 계속해서 받아야할 떄가 많다.그래서 useMe hook을 만들어 놓으면 편함query me 를 이용해서 loggedInUser의 id, username, avatar를 어느 page에서든 불러올 수

들어가기header의 title을 바꾸기 위해서 setOptions를 사용해서 바꿀 수 있다,

들어가기insta에서 사진의 caption에 있는 단어들을 근거로,검색을 해서 사진을 찾아서 뿌려줄 수 있다.사진을 클릭 하면, 사진을 feed에 나오는 사진처럼 like, comment, 등등을 볼 수 있다.화면 바깥을 클릭했을때, 키보드가 사라지는 component

들어가기search에서 keyword로 사진을 검색했을떄, 사진 click 시, feed에 나오는사진처럼, 사진을 보여주는 screen,search screen에서 클릭시 photoId 를 route로 보내줌.

1.material-top-tab-navigatorhttps://reactnavigation.org/docs/material-top-tab-navigator/npm install @react-navigation/material-top-tabs react-nat

들어가기insta에서 사용되는 page들의 nav를 마지막으로 정리함.nav에 nav가 들어가고 복잡하지만, 집중해서 머릿속에 깔끔하게 정리할 것.LoggedOutNav는 정리에서 생략함.loggedInNav.jsSharedStackNav.jsTabsNav.jsUplo

\*\*들어가기이번 POST에서는 reactNative에서 media(photo, viedo etc..)를 다루는방법을 알아보는데 ,이번 page에서는 폰에 있는 사진을 불러들이고,선택하는 방법을 알아본다.1\. 폰의 사진을 불러들인다(내가 만들고 있는 어플에)2\.

npm install expo-media-librarynpm install expo-cameranpm install @react-native-community/slider --savehttps://docs.expo.dev/versions/v45.0.0/sdk/

들어가기select Photo, take Photo한 사진을 props로 받아서caption과 함꼐 uploadPhoto Mutation을 실행하여,사진을 DB에 저장하고, 뿌리는 screen역시, file(picture, video)등을 다루는 부분은 어려우니 집중할

들어가기 DM(direct message)에 들어가기 전에 Message Nav를 만드는 POSTMessage Nav는 LoggedInNav에 Stack Nav 로 넣어준다.Message Nav는 방리스트를 보는 Rooms.js 스크린과 대화를 보는 Room.js 두개

들어가기채팅방 목록을 보는 Page DM부분부터는 엄청 어렵고 헷갈리는게 너무 많기 때문에,셈세하게 집중해서 공부해줘야함.아래에 보다시피, seeRooms는 argument를 받지 않음. context로 loggedInUser를 받아query를 바로 처리함.

들어가기subscription부분은 coding에서 가장 어렵고 난해한 부분같으므로,집중, 또 집중하자.그리고 subscriptions부분은 항상 공식문서를 참조 할 것.apollo가 한번씩 바뀌어서 고럼.https://www.apollographql.com/

대화방을 클릭 했을때, 대화 내용이 뿌려지는 방역시, 코딩에 있어서 가장 어려운 부분임.cache와 scriptions가 같이 들어가기 때문에 집중!!집중!! 반복!!반복!!이 필요한 부분.!!!persistCache 부분은 주석처리한다.꼭 필요한 부분도 아니고, su

들어가기대화방에서 subscription되는 방법을 알아본다.

들어가기server를 deploy하는 과정.AWS가 아니고 heroku를 이용한다.Production에서는 bable-node를 사용할 수 없다.그래서 babel/cli를 이용해야 한다. 빌드 및 deploy하기 위해서는npm i @babel/cli --dev-only

들어가기heroku.com site에 접속한다.create App을 클릭한다.App.name에 고유한 이름을 넣고 Create app을 누른다.Heroku Git을 클릭한다.Heroku CLI를 다운받는다 (화면의 맨 위에)cmd 창을 열고( cd desktop, cd

들어가기이번 POST에서는 netlify.com 을 이용해서forntEnd를 deploy한다.git에 있는 repository로 바로 build를 하니,항상 git에 업뎃하는 습관을 들이도록 하자.www.netlify.comnetlify.com 에 sign up 한다.

들어가기backend, frontend에 이어서 마지막으로 app buildplay store에 올리는거 까지는 생략하고 apk파일로 build하는것 까지만 다룬다.playstore에는 apk파일만 올리면 끝나는 것임.apk파일은 telegram으로만 다른 사람에게 보