insta-reactJS

\-apollo graphql prism등으로 만든 insta-backend server와 연동할 web-frontend를reactJS로 만듬.공식문서https://www.apollographql.com/docs/react/get-startedhttps&#x3

들어가기login상태유지, darkmode/lightmode 같이 모든 page에 적용되는 부분을ture/false로 전체 page에서 접근 및 제어가 가능하게 해 주는 기능check!!page전역에서 관리 및 제어하고픈 변수( login, darkmode등)을src폴

들어가기insta-reactJS에서 design에 사용할 styled-components를 간략하게 알아보고,복습해 보는 POSTstyled-components를 사용하는데 있어서 모든 page에 적용 혹은 사용할 수 있게함.styles.jsApp.js

들어가기frontEnd부분의 Login부분 page Designcomponent로 만들어서 signUp page에도 재활용되게 함.처음에 통으로 만들었다가 component로 분리시킴.1.src/compnents/auth/AuthLayout.js2.src/compnen

위에서 만든 Login UI component들을 Login.js page에 적용함FontAwesomeIcon을 사용해서 인스타 아이콘 및 다양한 icon을 사용함.

들어가기react의 form을 쉽고, 직관적으로 관리함..react-hook-form 역시 update가 자주 발생하니,꼭, 공식문서를 참조할 것npm i rect-hook-form

~

server와 client 간의 data를 주고 받는 mutationclient부분의 가장 중요한 부분. subscription과 더불어~눈감고도 머리속에 그려져야함..let's do it!export const LOCALSTORAGE_TOKEN='insta-token

매우 중요함!!!!

1. src/screens/SignUp.js ~

useNavigate로 page가 이동할떄, 이동하면서 보내진 value나 state들을받아서 사용할 수 있음.console.log(location)을 찍어보면 넘어오는 data들을 확인 할 수 있음.logout fn을 만들어서 onClick={logout}적용시켜주면

instagram의 맨처음 page나의 사진 및 follower들의 update된 사진을 볼 수 있음.component로 다 분리 시키니 잘따라올것 ㅠㅠ다음에 header를 이용할 때, 이 형식대로 가져다 사용하면 됨

들어가기useUser는 page어디에서나 loggedInUser의 정보를 받아서 사용할수 있음.useQuery는 server의 Query를 frontEnd에서 사용해서 정보를 뿌릴 수 있음.useReactiveVar는 page어디에서나 loggedIn 여부를 확인 및

들어가기front에서 query나 mutation을 실행시킬떄, back에 token을 보내주어야되는 경우가 많이 있다. back쪽의 query나 mutation들이 token이 있어야실행되는 경우가 많이 있기 때문이다이 문법은 바뀔수가 있으니, 공식 문서를 꼭 참고할

들어가기간단한 Photo의 header, page의 header에 사용될 Avatar component별로 어렵고 할 거는 없음.사진을 뿌리는 방법 확인할것!url받는부분url보내주는 부분

insta에서 사진을 보여주는 component photo.js 라는 component가 Home.js에서 props들을 받아서 뿌려줌.

들어가기실시간으로 화면을 update하기 위해서 사용좋아요를 누르고 refetchQuery로 다시 seeFeed Query롤호출하면, 웹페이지 속도를 늦출 수 있다.그래서 cache를 바로 업데이트 하면, 웹의 속도를 빠르게 유지시킬 수 있다.chrome에서 f12 누

들어가기댓글달기 기능을 만들어 봅시다. backend부분에서 Photo부분에(seeFeed는 Photo를 return받음) comments, commentNumber를 computed Field로 만들어줌. 마찬가지로 photo.typeDefs에도 comments

들어가기(1)에서 server에서 seeFeed로 Photo를 return받을떄, Photo에 comments, commentNumber도 같이 return 받을 수 있게,server에서 설정하고 Home.js에서 seeFeed가 실행될 때,comments, comme

들어가기앞에서 새로고침 없이 바로 screen을 업데이트 하는 방법으로refetch Queries, writeFragment, readFragment등이 있었다.modify cache는 apollo 3에서 등장한 cache update방법으로가장 간단하고 깔끔한 방법

들어가기사진에 댓글다는 기능을 구현createComment(1)에서는 useForm과 useMutaion을 이용해서 댓글 다는것을구현하고 createComment(2)에서는 realTime, cache를 다루는 방법을 알아보자.Photo Component에서 Comme

들어가기

들어가기내가 만든 댓글(Comment)를 지우는 코드,createComment에서 newCacheComment를 만들어서 evict로쉽게 내가 단 댓글을 바로 지울 수 있음.

follow, unFollow에 들어가기 이전에 useParams, keyField에 대해서알아보고 넘어가자\->avatar나 username등을 클릭했을때, user의 Profile page로 넘어가게 하는것\->주소는 localhost:3000/users/(\*ex

"""cache: new InMemoryCache({ """ 부분만 집중해서 볼것.typePolocies 에서 User를 위와같이 설정하는 이유는 인스타에서 User:${id}가너무 많이 사용되어 헷갈릴 우려가 많기 때문에 cache에 User가 쓰이는 내용을User:

들어가기front부분에서 user를 follow, unfollow하는 부분,일단은 cache부분은 생략하고 useMuataion, useQuery 부분만 마무리 한다.Profile에서 follow, unFollow할 수 있게 구성한다.\-styled부분에 대한 설명은

\*\*들어가기@follow, unfollow mutaion을 실행시켜서refetchQueries가 아니라 cache를 바로 실시간으로 update하는 방법을 알아본다2가지 방법으로 알아보는데,@첫번째, update: followUserUpdate로 cache, res