코딩강의/인스타그램클론(expo-노마드코더) (25) 썸네일형 리스트형 DEPLOYMENT 🍔 핵심 내용 🥑 백엔드 배포 기존 폴더/파일들을 src 폴더로 옮겨놔야 한다. 거기서 옮겨 놔야 할 것은, 실제 배포에 필요한 파일들만 들어간다. 아래와 같이 넣었다. npm i @babel/cli --dev-only 설치 npm i --save-dev @babel/plugin-transform-runtime 설치 (async 가능하게 해주는,,) 🍔 코드 리뷰 🥑 package.json "scripts": { "preinstall": "npx npm-force-resolutions", "dev": "nodemon --exec babel-node src/server --delay 2", "migrate": "npx prisma migrate dev --preview-feature", "studio": .. DIRECT MESSAGES 🍔 핵심 내용 🥑 Rooms(채팅 방 목록)와 Room(채팅 화면)을 꾸며 보자. 🍔 코드 리뷰 🥑 LoggedInNav.js ... MessageNav 추가 🥑 MessagesNav.js import React from "react"; import { Ionicons } from "@expo/vector-icons"; import { createStackNavigator } from "@react-navigation/stack"; import Room from "../screens/Room"; import Rooms from "../screens/Rooms"; const Stack = createStackNavigator(); export default function MessagesNav() { re.. Upload Photo 🍔 핵심 내용 🥑 사진 업로드 부분을 만들기 위해서는 아래 큰 두가지 작업이 필요 하다 1) 현재 세팅이 탭 네비게이션 -> 스택 네비게이션으로 되어 있는데, 이를 스택 네비게이션 -> 탭 네비게이션 -> 스택 네비게이션 개념으로 해줄 것이다. 말로 설명하기 어렵긴 하지만, 이유는 하단 카메라 탭을 눌렀을 경우 https://reactnavigation.org/docs/material-top-tab-navigator/ 들어가서 npm install @react-navigation/material-top-tabs react-native-tab-view@^2.16.0 설치 2) 카메라 화면에서는 2개의 탭이 존재하는데, 이는 meterial top tabs를 이용하였다. 🍔 코드 리뷰 🥑 LoggedInNa.. LIKES, SEARCH AND PHOTO 화면 🍔 핵심 내용 🥑 Likes 화면 꾸미기 좋아요 수를 누르면 좋아요를 누른 사람 목록이 나오는 스크린을 만들어 보자. 🍔 코드 리뷰 🥑 components/Photo.js import React, { useEffect, useState } from "react"; import PropTypes from "prop-types"; import { Ionicons } from "@expo/vector-icons"; import { useNavigation } from "@react-navigation/native"; import styled from "styled-components/native"; import { Image, useWindowDimensions } from "react-native"; imp.. FEED 🍔 핵심 내용 🥑 Tab Navigatior 하단 Tab Navigatior를 만들어 보자. 🍔 코드 리뷰 🥑 LoggedInNav.js import React from "react"; import { Ionicons } from "@expo/vector-icons"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import Feed from "../screens/Feed"; import Search from "../screens/Search"; import Notifications from "../screens/Notifications"; import Profile from "../screens/Profile"; c.. AUTHENTICATION 🍔 핵심 내용 🥑 화면 이동을 배워 보자. stack 을 활용하여 배워 봅시다~! 🍔 코드 리뷰 🥑 LoggedOutNav.js import React from "react"; import { createStackNavigator } from "@react-navigation/stack"; import Welcome from "../screens/Welcome"; import LogIn from "../screens/LogIn"; import CreateAccount from "../screens/CreateAccount"; const Stack = createStackNavigator(); export default function LoggedOutNav() { return ( ); } 첫 화면은 We.. REACT NATIVE SETUP 🍔 핵심 내용 🥑 기본 RN을 셋업하자. npm install --global expo-cli expo init 프로젝트명 입력 expo install expo-font expo install expo-app-loading npm install @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 npm install @react-navigation/stack npm install styled-components 설치 진행 🍔 코드 리뷰 🥑 .. Profile 🍔 핵심 내용 🥑 프로필 화면을 만들어 보자. 1. useParams 훅을 배워보자. Params 는 url 주소의 파라미터 값을 말한다. 2. 프로필 링크 걸어주기 헤더 부분, 포토 부분에 있는 아바타사진과 유저네임 부분에 링크를 걸어주자. 3. Profile 컴포넌트를 만들어 주자. 해당 컴포넌트에서 useParams를 통해 파라미터 값을 가져와보자 🍔 코드 리뷰 🥑 Photo.js ... {user.username} ... 🥑 Comment.js ... {author} ... Link 걸어주었다. 🥑 App.js ... ... Public 하게 Route를 하나 만들어 주었고, 이때 :userName 부분을 통해 Parameter 역할을 한다. 만약에 : 가 없으면 그냥 userName 문자 그대로.. FEED (3) 🍔 핵심 내용 🥑 comment 작성 기능을 만들어 보자. 로그인, 회원가입 시 일부 활용 했던 useForm기능을 다시 사용할 것이다. 🍔 코드 리뷰 🥑 Comments.js import PropTypes from "prop-types"; import { useForm } from "react-hook-form"; import styled from "styled-components"; import Comment from "./Comment"; import { gql, useMutation } from "@apollo/client"; const CREATE_COMMENT_MUTATION = gql` mutation createComment($photoId: Int!, $payload: String!) {.. FEED (2) 🍔 핵심 내용 🥑 comment 부분을 수정 및 추가해주자. comment 백엔드 부분 일부 내용 수정 및 프론트에 적용해주자. 🍔 코드 리뷰 🥑 photo.typeDefs.js ... export default gql` type Photo { id: Int! user: User file: String! caption: String likes: Int! commentNumber: Int! comments: [Comment] isMine: Boolean! hashtags: [Hashtag] createdAt: String! updatedAt: String! isLiked: Boolean! } ... commentNumber 및 comments 변경 🥑 photo.resolvers.js ... comment.. 이전 1 2 3 다음
