개발이 즐겁다!

안녕하세요 강정호입니다. 오늘은 인스타그램클론코딩에서 검색창 UI 개발 관련하여 포스팅을 작성 해볼게요. UI 작성시에는 styled-component를 주로 사용합니다. UserCard.js UserCard는 아래와 같이 검색했을 때 각 유저의 프로필 사진과, 이름, 팔로잉 버튼을 카드형식으로 보여주는 것입니다. const Card = styled.div` ${props => props.theme.whiteBox} display: flex; flex-direction: column; align-items: center; padding: 20px; `; const EAvatar = styled(Avatar)` margin-bottom: 15px; `; const ELink = styled(Link)` c..

리액트 styled-component onKeyUp, onKeyDown, onKeyUp spread syntax 구문 developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax 전개 구문 - JavaScript | MDN 전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시 developer.mozilla.org useQuery 에서 skip 하는 기술 const {data, loading} = useQuery(SEARCH, { skip: term === undefined, varia..

안녕하세요 강정호입니다 오늘은 useMutation을 사용하여 좋아요 기능을 구현해보겠습니다. PostQueries.js 좋아요와 댓글 추가 Graphql 쿼리를 호출하는 함수를 만듭니다. import { gql } from "apollo-boost"; export const TOGGLE_LIKE = gql` mutation toggleLike($postId: String!){ toggleLike(postId: $postId) } `; export const ADD_COMMENT = gql` mutation addComment($postId:String!, $text: String!){ addComment(postId: $postId, text: $text){ id text user { userName ..

안녕하세요 강정호입니다 오늘은 인스타그램 클론 코딩에서 슬라이더 기능을 개발해보겠습니다. 슬라이더 기능 : 사진이 여러개일떄 일정 시간이 지난 후에 자동으로 다음 사진이 보여질 수 있도록 하는 것. 슬라이더 구현 로직을 살펴보겠습니다. PostContainer.js import React, { useState, useEffect } from "react"; import PostPresenter from "./PostPresenter"; import PropTypes from "prop-types"; import useInput from "../../Hooks/useInput"; // 입력받은 매개인자 const PostContainer = ({id, user, files, /** 사진id, url이 배열..

안녕하세요 강정호 입니다 오늘은 Post를 게시판에 보여주는 기능을 개발하면서 배울 개념들에 대해서 작성해볼게요. useState useState는 가장 기본적인 Hook 이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해주는 기능이다. 즉 한마디로 요약하자면 "함수형 컴포넌트 내부에서 특정 변수의 값을 변경시키는 것" 이라고 생각하면 된다. useState에 대한 예시입니다. (출처 : 리액트를 다루는 기술 Velopert 김민준 저서, 8장 Hooks) import React, { useState } from 'react'; const Counter = () => { //1) value : 상태를 변경할 변수 //2) setValue : useState 함수를 호출하여 반환 받은 상태를 변..

안녕하세요 강정호입니다 오늘은 인스타그램에 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! 설정 ==..