TypeScript2 [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.. 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.. 2021. 9. 29. 이전 1 다음
