개발이 즐겁다!

안녕하세요 강정호입니다 오늘은 인스타그램에 Feed를 보여주기 위해서 포스팅 객체를 조회하기 위한 밑작업을 진행하겠습니다. Post 객체를 조회하기 위해서 이렇게 3개로 구성하였습니다. index.js : Post를 조회하려는 요청이 들어올 경우 index.js로 요청이 가고, index.js는 PostContainer.js로 요청을 보낸다. PostContainer.js : Post 객체를 가공하고, PropTypes를 검증하는 프로그램 PostPresenter.js : Post 객체를 View로서 조립하여 보여주는 프로그램 프로그램 흐름 1) Feed.js : useQuery(FEED_QUERY)로 user의 Post 내역을 모두 조회한다. 조회한 Post 데이터를 에 넣고 호출한다 2) /Post/..

안녕하세요 강정호입니다 오늘은 Header 개발을 끝내보겠습니다. [개발 내용] 로그인 한 사용자의 userName을 가져와서 localhost:3000/#/wwwkang8 이런식으로 라우팅 주소 끝에 사용자의 유저명이 조립되어 호출될 수 있도록 개발 하는 것입니다. [소스코드] Header.js export default withRouter(({ history }) => { const search = useInput(""); const { data } = useQuery(ME); // useQuery(ME) 로 조회한 me 데이터 출력. // undefined 일 때는 데이터가 없기 때문에 data.me가 오류 발생 if(data !== undefined){ console.log(data.me); } ..

안녕하세요 강정호입니다 오늘은 인스타그램 클론코딩에서 header 부분에 대해서 개발해보겠습니다. 헤더에서 Search 검색창을 추가하였습니다. 1. const meQuery = userQuery(ME); 자신의 userName을 조회하는 쿼리이다. 서버의 me 함수를 호출하여 로그인 한 user의 정보를 조회하는 API이다. 2. export default withRouter - withRouter : 이 함수는 Hoc(Higher-order Component)입니다. 라우트로 사용되는 컴포넌트가 아니어도 match, location, history 객체를 접근할 수 있게 합니다. 즉 history 객체에 접근하기 위해 withRouter 함수를 사용하였습니다. ** 라우트로 사용되는 컴포넌트 : re..

안녕하세요 강정호입니다 오늘은 인스타그램클론코딩을 하면서 인증(Authorization) 흐름을 정리해보겠습니다. Authrorization에는 크게 3가지 중요 로직이 있습니다. 1. 회원가입 2. 로그인 3. 이메일 인증 위 3개를 거쳐야 token을 발급 받아 로그인을 할 수 있습니다. 1. 회원가입 1) 로그인 여부 확인 Apollo Client가 아래 쿼리로 브라우저 cache에 로그인 상태가 true/false인지 확인 false라면 로그인 화면을 노출시켜줌. App.js const QUERY = gql` { isLoggedIn @client } `; const { data: {isLoggedIn} } = useQuery(QUERY); cache에 isLoggedIn 값이 true/false ..

안녕하세요 강정호입니다. 오늘은 ApolloClient를 이용하여 Graphql API와 연동해보겠습니다. index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './Component/App'; import {ApolloProvider} from "react-apollo-hooks"; import Client from "./Apollo/Client"; ReactDOM.render( , document.getElementById('root') ); ApolloProvider 란? ApolloClient를 사용하여 Graphql API와 연동 가능하게 해주는 컴포넌트로 앱의 최상위 컴포넌트를 감싸주어야 한다...

안녕하세요 오늘은 리액트 라우터에 대해서 공부해 보겠습니다. 프로그램 흐름은 아래와 같습니다. 1. App.js : Router.js에 isLoggedIn 인자값을 넣어 호출한다 2. Router.js : isLoggedIn true/false 여부에 따라서 Auth.js, Feed.js를 렌더링 하여 보여준다. App.js import React from "react"; import { ThemeProvider } from "styled-components"; // 동일한 폴더내의 Router.js import. 상대경로로 설정 import Router from "./Router"; // ( ); Router.js import React from "react"; import PropTypes from ..

안녕하세요 오늘은 로그인 기능을 구현해보겠습니다. index.js import AuthContainer from "./AuthContainer"; export default AuthContainer; index.js가 실행되면, AuthContainer를 호출한다. **export default 뜻 1) default export : default로 선언된 모듈은 파일에서 단 하나의 변수, 클래스만 export가 가능하다. - import는 아무이름이나 가능하다 ex) import hello from "./AuthContainer" 또는 import thisisAuth from "./AuthContainer" 2) named export : 한 파일 내에서 여러 변수 / 클래스들을 export 하는 것이..

안녕하세요 강정호입니다 오늘은 인스타그램 스타일 테마에 대해서 만들어보겠습니다. 인스타그램의 화면 색상을 따서 테마를 만듭니다. 이 때 색상을 알아내는 방법은 크롬 F12 버튼도 있고, Colorzilla 라는 확장앱이 있습니다 chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp/related ColorZilla Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies chrome.google.com Theme.js const BOX_BORDER = "1px solid #e6e6e6"; const BORDER_RADIUS = "4p..

안녕하세요 강정호입니다 오늘은 인스타그램 클론코딩의 프론트엔드 개발을 시작해보겠습니다. 1. create-react-app 명령어 npx create-react-app prismagram-frontend 위와 같이 하면 리액트 앱 프로젝트 생성 2. 불필요한 파일 삭제 - App.css - App.test.js - index.css - logo.svg - serviceWorker.js 3. 필요한 util 설치 npm add styled-components react-router-dom graphql react-apollo-hooks apollo-boost npm add react-helmet 4. 리액트 앱 정상작동 확인 npm start

안녕하세요 강정호입니다. 오늘은 newMessage Subscription API 개발을 해보겠습니다. Graphql Subscription(구독) 이란? 특정 이벤트가 발생했을 때 서버가 클라이언트에게 데이터를 전송해주는 Graphql 기능입니다. 클라이언트는 구독을 설정하여 서버와의 연결을 지속하고, 특정 이벤트 발생시에 서버에서 클라이언트로 데이터를 푸쉬하게 합니다. (참고 : velog.io/@cadenzah/graphql-node-08-subscription) (참고2 : www.howtographql.com/graphql-js/7-subscriptions/) newMessage.graphql type Subscription { newMessage(roomId: String!): Message!..

안녕하세요 강정호입니다 오늘은 seeRoom Resolver를 개발해보겠습니다 seeRoom 쿼리는 Room id를 인자로 하여 채팅방의 참여자, 메시지들을 조회하는 쿼리입니다. seeRoom.graphql type Query { seeRoom(id: String!): Room! } fragments.js export const USER_FRAGMENT = ` id userName avatar `; export const COMMENT_FRAGMENT = ` id text user { ${USER_FRAGMENT} } `; export const FILE_FRAGMENT = ` id url `; export const FULL_POST_FRAGMENT = ` fragment PostParts on Pos..

안녕하세요 강정호 입니다 오늘은 포스팅을 수정, 삭제하는 API를 개발하겠습니다. editPost.graphql // ACTIONS 라는 enum 타입 객체 생성 enum ACTIONS { EDIT DELETE } // Resolver에 아래와 같이 수정할 데이터변수(caption, location) 넣고, action 변수를 생성한다. // action변수는 enum 데이터로 Resolver에서 어떻게 처리해주는지 행동 옵션 type Mutation { editPost(id: String! ,caption: String ,location: String ,action: ACTIONS): Post } editPost.js import { prisma } from "../../../../generated/p..

안녕하세요 강정호입니다 오늘은 upload Resolver 개발하는 것에 대해서 포스팅 해보겠습니다. upload.graphql type Mutation { upload(caption: String! files: [String!]): Post! } Post를 create할 때 필수적인 값이 id, caption. id는 자동으로 생성이 되기 때문에 caption만 input 값으로 설정. 그리고 Post 생성시에 같이 생성할 File 객체를 위해서 String 타입의 files 배열을 input 값으로 설정. Post 생성 후에는 Post를 리턴. upload.js import { prisma } from "../../../../generated/prisma-client"; export default {..

안녕하세요 강정호입니다 오늘은 isSelf, isFollowing, isLiked를 Boolean으로 여부를 판단하는 API를 개발해보겠습니다. model.graphql type User { id: ID! userName: String! email: String! firstName: String lastName: String fullName: String isFollowing: Boolean! isSelf: Boolean! bio: String following: [User!]! followers: [User!]! posts: [Post!]! likes: [Like!]! comments: [Comment!]! rooms: [Room!]! } model.graphql의 User 타입에 isFollowing..

안녕하세요 강정호 입니다 오늘 개발할 API는 내 프로필 보기(me)와 seeFullPost API입니다. me.graphql type Query { me: UserProfile! } me.graphql에서는 Query 작업으로 UserProfile 객체를 조회한다. 응? 근데 UserProfile이라는 객체는 존재하지 않는데 이것은 무엇이지 라고 생각할 수 있다. UserProfile은 개발자가 직접 만든 조회용 객체이다. 아래 model.grapql에서 보면 UserProfile 타입은 User객체와 Post 배열을 포함하는 타입의 객체이다. 이번 포스팅의 핵심!! Prisma에서는 하나의 데이터 타입과 연결된 하위 데이터들을 가져올 수 없는 한계가 있다. Query에 리턴타입을 User! 설정 ==..

안녕하세요 강정호 입니다 오늘은 editUser와 seeUser API를 개발해 보겠습니다. seeUser.graphql type Query { seeUser(id: String!): User! } seeUser.js import { prisma } from "../../../../generated/prisma-client"; export default { Query: { seeUser: async (_, args, { request, isAuthenticated }) => { const { id } = args; return prisma.user({id}); } } } 테스트 id를 사용하여 User 데이터를 정상적으로 조회 확인. editUser.graphql type Mutation { editUs..

안녕하세요 강정호입니다 이번 포스팅에서는 팔로잉, 팔로잉 취소 API를 개발해보겠습니다. follow.graphql type Mutation { follow(id: String!): Boolean! } 수정을 하는 쿼리작업이기 때문에 Mutation을 사용하였고, follow 메서드는 userId를 매개변수로 받습니다. 리턴값은 변경여부를 보여주는 Boolean 타입입니다. follow.js import { isAuthenticated } from "../../../middlewares"; import { prisma } from "../../../../generated/prisma-client"; export default { Mutation: { follow: async (_, args, { requ..

안녕하세요 강정호입니다 이번 포스팅에서는 User와 Post를 검색하는 API를 Graphql과 Javascript로 만들어 보겠습니다. searchUser.graphql type Query { searchUser(term: String!): [User!]! } User 조회 함수인 searchUser 함수는 term 이라는 String 타입의 매개변수를 필요로 합니다. searchUser의 리턴 타입은 User 배열입니다. searchUser.js import { generateSecret, sendSecretMail } from "../../../utils"; import { prisma } from "../../../../generated/prisma-client"; export default { ..

안녕하세요 강정호 입니다 오늘은 좋아요 API를 마무리 하고, 댓글 추가 기능을 만들어보겠습니다. toggleLike.js import { isAuthenticated } from "../../../middlewares"; import { prisma } from "../../../../generated/prisma-client"; export default { Mutation: { toggleLike: async (_, args, { request }) => { isAuthenticated(request); const { postId } = args; const { user } = request; const filterOptions = { AND: [ { user: { id: user.id } }, {..

안녕하세요 강정호 입니다. 오늘은 인스타그램에서 포스팅에 좋아요를 체크하는 API를 만들어보겠습니다. ES6의 const와 let에 대해서 잠깐 짚고 넘어갈게요 const : 선언을 하고 할당을 하게 되면, 다른 값으로 변경이 되지 않는다. let : 선언을 하고 값을 할당한 후에, 다른 값으로 재할당이 가능 ** 기존 var 타입의 변수선언의 문제점이 존재하여 ES6에서는 const, let을 사용. (출처 : happycording.tistory.com/entry/let-const-%EB%9E%80-%EC%99%9C-%EC%8D%A8%EC%95%BC%EB%A7%8C-%ED%95%98%EB%8A%94%EA%B0%80-ES6) 오늘의 핵심!!! prisma.$exists Prisma는 각 모델에 대한 C..