티스토리

KeepCoing
검색하기

블로그 홈

KeepCoing

keepcoing.tistory.com/m

킵코 님의 블로그입니다.

구독자
1
방명록 방문하기

주요 글 목록

  • [Project] login AccessToken Login accessToken 사용자가 로그인을 하면 백엔드에서 사용자가 맞는지 검증을 하고, 데이터를 가져온다. 이때 사용자 데이터를 백엔드 컴퓨터나 데이터 베이스에 저장해서 가져오면 벡엔터 컴퓨터 메모리와 CPU에 부담이 되고, 데이터 베이스도 마찬가지로 부담이 커진다. JWT토근은 토근 안에 데이터를 저장해서 데이터베이스까지 가지 않아도 데이터 처리가 가능하다. 사용자가 로그인을 하면 벡엔드에서 JWT토근을 만들어준다. JWT 토큰으로 로그인하는 코드를 만들어보자. import { useState } from "react" import { gql, useMutation } from '@apollo/client' //로그인 API const LOGIN_USER = gql` mutation login.. 공감수 0 댓글수 0 2021. 10. 12.
  • [Project] 검색 기능 (검색하기, Debounce, 검색한 단어에 색 넣기) 검색기능 추가하기 게시글 목록 페이지에 검색 기능을 추가해보자! fetchBoards에 있는 search를 가지고 검색을 할 수 있다. 우선 useQuery 해준다. const FETCH_BOARDS = gql` query fetchBoards($search:String, $page:Int){ fetchBoards(search:$search, page:$page){ _id writer title createdAt } } ` const { data, refetch } = useQuery(FETCH_BOARDS) querty로 가져온 데이터를 화면에 map으로 보여준다. return ( 검색 페이지 {data?.fetchBoards.map((el) => ( {el.writer} {el.title} {el.c.. 공감수 0 댓글수 0 2021. 9. 30.
  • [Project] Image Upload 이미지 업로드하기 1. 이미지는 3개까지 업로드 할 수 있다. 2. 이미지를 업로드 하면 미리보기로 어떤 이미지를 올렸는지 알 수 있다. 3. 게시물 등록 버튼을 클릭하면 이미지가 구글 스토리지에 저장되고 url을 받아온다. 4. 게시물 상세 페이지에서 내가 올린 이미지를 확인할 수 있다. 차근차근... 1. 이미지 업로드 하기 게시물 등록하기 화면에서 +Upload 박스를 클릭하면 이렇게 이미지 파일을 등록할 수 있는 창이 뜬다. 코드..코드를 보자! 🤔 하지만 그 전에 우선 설치해줘야 하는 녀석이 있다. npm install apollo-upload-client 아폴로 업로드 클라이언트를 설치해줬다면 이제 _app.js로 가자 import {createUploadLink } from 'apollo-u.. 공감수 0 댓글수 0 2021. 9. 29.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.