비엣맨의 공부 노트 비엣맨의 공부 노트

#12.0 AuthHome AuthHome 화면부분을 다시 만들어보자. >constants.js import { Dimensions } from "react-native"; const { width, height } = Dimensions.get("screen"); export default { width, height }; constants파일에는사용자 화면 크기(가로, 세로)의 변수를 선언해 두었다. >AuthHome.js import React from "react"; import styled from "styled-components"; import constants from "../../constants"; const View = styled.View` justify-content: center..

#11.1 AuthNavigation ~ #11.2 Tabs Navigation ~##11.3 Photo Navigation 리액트 네비게이션이 5.x 버전으로 업데이트되면서 강의 내용과 많은 부분이 달라졌다. 버전 문제로 에러가 너무 많이 나서, 전부 다 최신버전으로 업데이트 하였다. 일단. 설치 모듈 1. npm install @react-navigation/bottom-tabs 2. npm install @react-navigation/material-top-tabs react-native-tab-view >components/NavController.js import React from "react"; import { View } from "react-native"; import { useIsLo..

#10.0 Creating the Project 1. npm install --global expo-cli 설치 진행 2. expo init prismagram-app 로 프로젝트 초기화 (blank 선택) 3. npm i styled-components react-navigation apollo-boost graphql react-apollo-hooks apollo-cache-inmemory apollo-cache-persist 설치 진행 4. expo install expo-font expo-asset 설치진행 5. 안드로이드스튜디오를 다운 받자(안되면, 모바일 전용 expo 어플 설치) #10.1 Preloading Assets Preload는 실제 app을 실행 시킨 후, data를 받아오기 전까..

#9.0 Profile Screen part One~ #9.1 Two Profile 부분을 만들어보자. Routes.js 파일에서 url 주소/:username을 입력 하면 Profile Route파일로 이동하게 된다. 해당 /:username은 params에 담기게 된다. 이게 무슨말인지 이어서 보자. >Routes.js const LoggedInRoutes = () => ( ); >ProfileContainer.js import React from "react"; import { gql } from "apollo-boost"; import { withRouter } from "react-router-dom"; import { useQuery } from "react-apollo-hooks"; impo..

#8.0 Search Screen Queries ~ #8.2 Search Screen UI Part Two 중간에 문제가 생겼었다..... Search 부분에 검색을 하면 에러가 떴다. 언마운트 관련한 문제가... 문제는, PostContainer부분에 useEffect부분 이었다. 해결책 부분만 얘기하자면 >PostContainer.js useEffect(() => { const totalFiles = files.length; let timer = null; if (currentItem === totalFiles - 1) { timer = setTimeout(() => setCurrentItem(0), 3000); } else { timer = setTimeout(() => setCurrentItem(..