Frontend 프론트엔드

useRouterrouter.push() 를 활용해 페이지를 이동한다.import { useRouter } from "next/router";export default function StaticRoutingPage() { const router = useRouter(); const onClickMove = () => { router.push("/section05/05-01-static-routing-moved"); }; return ( 페이지 이동하기 );} 게시판 목록 ,  상세조회 느낌 구현해보기import { useRouter } from "next/router";export default function StaticRoutingPage() { const r..

변수를 graphql 에 전달하는 방법mutation을 작성할 때 변수에 $ 를 넣고, 타입을 지정해주어야 한다.함수를 호출할 때 variable 속성을 넣어주어야 한다.import { useMutation, gql } from "@apollo/client";const 나의그래프큐엘세팅 = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } }`;export default function GraphqlMutationPa..

graphql 실습 코드 gql`` 로 요청할 데이터를 담아서 useMutation 의 매개변수로 넣는다.import { useMutation, gql } from "@apollo/client";const 나의그래프큐엘세팅 = gql` mutation { createBoard(writer: 123, title: "안녕하세요", contents: "반갑습니다") { _id number message } }`;export default function GraphqlMutationPage() { const [나의함수] = useMutation(나의그래프큐엘세팅); const onClickSubmit = async () => { const result = awa..

_app.js 파일에 설정 // import "../styles/globals.css";import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";export default function App({ Component }) { const client = new ApolloClient({ uri: "http://backend-example.codebootcamp.co.kr/graphql", cache: InMemoryCache(), // 컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장해 놓기 => 나중에 자세히 알아보기 }); return ( );}  매개변수 Componen..

비동기 동시에 여러 일 할때 사용한다. 비동기 예시코드function test(){ const data = axios.get("https://koreanjson.com/posts/1"); console.log(data);}console.log('start')test();console.log('finish')// 결과startPromise { }finish동기 async / await이란 ? Javascript 엔진은 코드를 동기적으로 실행하지만 , axios 같은 API 통신 라이브러리는 비동기적 실행이 default로 정해져 있다. 이때 게시글을 등록하고 그 게시글을 조회하는 것처럼 비동기 API 작업을 동기적으로 바꿔줄 때 사용하는 명령어이다.  동기 예시코드  const onClickS..

restAPI 요청 실습   graphql 요청 실습  mutation { createProfile(name :"밍우", age :22, school:"홍익대학교"){ message }} 기본 키를 알 수 없어 좋지 못한 예시 코드  mutation { updateBoard(number : 24073,writer : "밍우", title :"수정" , contents : "내용"){ message }}// 이렇게 하면 기본 키가 무엇인지 알 수 없어서 좋지 못한 코드이다. 기본키를 명시한 좋은 예시 코드  mutation { updateProduct(productId : "d36dc9b8-6244-481d-8be1-20c644edf4b1" , updateProductInput :{ ..

API( Application Programming Interface)애플리케이션이 어떤 프로그램이 제공하는 기능을 사용할 수 있게 만든 매개체다.컴퓨터와 인간을 연결시키는 사용자 인터페이스(UI) 와 반대로, API는 컴퓨터나 소프트웨어를 서로 연결한다.출처 : https://bentist.tistory.com/37HTTP API 란?HTTP를 사용하여 프로그램끼리 소통하는 API를 말한다.보통 우리가 흔히 보는 OPEN API, facebook API, kakao API 등의 대부분 API는 HTTP라는 통신 규칙으로 소통하는 API이다.출처 : https://bentist.tistory.com/37 REST API란?REST는 HTTP를 잘 활용하기 위한 원칙이라고 할 수 있고 REST API는 이..

useState없이 직접 DOM을 조작하는 방법 단점 : 모든 상태마다 ID를 설정해줘야 하므로 복잡한 페이지일수록 사용하기 어렵다.export default function CounterLetDocumentPage() { function onClickCountUp() { const count = Number(document.getElementById("qqq").innerText) + 1; document.getElementById("qqq").innerText = count; } function onClickCountDown() { const count = Number(document.getElementById("qqq").innerText) - 1; document.g..