1. GraphQl Code Generator 사이트에 접속해준다. https://the-guild.dev/graphql/codegen Home – GraphQL Code Generator GraphQL Code Generator Documentation the-guild.dev 2. installation 페이지에 들어간다 https://the-guild.dev/graphql/codegen/docs/getting-started/installation Installation – GraphQL Code Generator GraphQL Code Generator is a tool for generating code from GraphQL schema and operations. It can generate ..

타입스크립트의 유틸리티 타입에는1. Pick 타입2. Omit 타입3. Partial 타입4. Required 타입5. Record 타입 이렇게 있다. 그 중에서 Record 타입에 대해 정리해 보려고 한다.Record 타입을 설명 하기 전에 Union 타입에 대해 먼저 알아야 한다. type fruit = "사과" | "배" | "딸기"이렇게 fruit이라는 타입을 만들어 놓고 변수를 만들어 타입을 fruit으로 지정하게 되면 3가지 밖에 쓰지 못한다.vsCode에서 확인하면 이렇게 사용할 수 있는 값을 미리 보여준다. Record타입은 이렇게 union 타입으로 만들어 놓은 것을 키 값과 Value로 사용할 수 있다. interface Ifruit { price: number; } type ..

html의 영역에 있는 은 반드시 넣어야 하는 태그이다. 란 html 파일의 인코딩을 알려주는 태그이다. 입력하지 않을 경우 글자가 깨져서 보일 수 있다.

지난번에 만든 등록페이지와 수정페이지 https://sy-blog.tistory.com/103 [React] 컴포넌트(Component) 재사용 BoardWrite()라는 컴포넌트를 만들어서 등록페이지와 수정페이지에서 재사용 할 것이다 등록페이지에 들어갔을때는 등록이라고 뜨고, 수정페이지에 들어갔을 때는 수정이라고 떠야하는데 페이지 sy-blog.tistory.com 여기서 수정하기는 구현했지만 조금의 문제가 있었다..!! 수정페이지로 이동했을 때 하나의 input 만 채우고 수정해버리면 나머지 내용이 사라진다는 것.... 이유는 state! 코드를 살펴보면 const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); ..

vscode를 이용하다보면 파란색 밑줄이 쳐지면서 Unknown word라고 뜰 때가 있다 에러는 아니라 문제가 생기진 않지만 코드를 보는데 매우매우 불편...😣 자세히 보면 cSpell에 다루는 것 같은데 cSpell 은 Node를 설치할 때 같이 설치된 파일이다 파일을 삭제할 수도 있지만 간단하게 최상위 폴더에서 파일을 하나 만들어준다. 이름은 .cspell.json 파일을 만들었다면 아래와같이 적어주면 된다.

BoardWrite()라는 컴포넌트를 만들어서 등록페이지와 수정페이지에서 재사용 할 것이다 등록페이지에 들어갔을때는 등록이라고 뜨고, 수정페이지에 들어갔을 때는 수정이라고 떠야하는데 페이지 2개를 만들 필요없이 컴포넌트를 재사용해서 만들 수 있다. export default function BoardWriteUI(props) { return ( {props.isEdit ? "수정" : "등록"}페이지 작성자: 제목: 내용: {props.isEdit ? "수정하기" : "등록하기"} ); } props를 이용하면 된다. {props.isEdit ? "수정하기" : "등록하기"} 에서 isEdit가 true면 수정하기 false면 등록하기가 뜬다. 여기서 주의할 점은 number 인데 등록하기 버튼을 눌렀을..

query와 mutation을 사용하기 위해서는 _app.js에 설정해줘야 하는 게 있다. _app.js import { ApolloProvider, InMemoryCache, ApolloClient } from "@apollo/client"; export default function App({ Component, pageProps }) { const client = new ApolloClient({ uri: "http://practice.codebootcamp.co.kr/graphql", cache: new InMemoryCache(), }); return ( ); } http://practice.codebootcamp.co.kr/graphql 위 사이트에서 Back-end 개발자가 만들어놓은 API..

열심히 만들어 놓은 게시글 등록 페이지 input 창에 값을 입력해놓고 등록하기 버튼을 눌렀는데 띠용... 아무것도 뜨지 않는다... 코드를 살펴보면 import { Page } from "@/styles/board"; import { Header, Wrapper, Inform, Vector, Name, Date, Body, Title, Contents, } from "@/styles/board_detail"; import { gql, useQuery } from "@apollo/client"; import { useRouter } from "next/router"; //useQuery안에 담은 변수 만들자 const FETCH_BOARD = gql` query fetchBoard($boardId: ID..

React란? React는 javascript를 쉽고 효율적으로 사용할 수 있도록 Facebook에서 만든 도구이다 대표적인 서비스로는 페이스북, 인스타그램, 에어비앤비 등이 있다 OS(내 컴퓨터에 설치 해야 할 것) 1. VS code 2. VScode - Extension 3. Node.js 설치 (LTS 버전) 4. Yarn 설치 : sudo npm install -g yarn 폴더에 설치해야 할 것 ⭐ 여기서부터는 컴퓨터에 node.js가 설치되어 있어야 한다 ⭐ 1. 바탕화면에 폴더 만들기 (이름은 영어로!) 2. vscode에서 폴더 열기 3. 터미널은 git bash로 돼있어야 한다. 4. 아래 명령어를 터미널에 입력해서 설치한다. npx create-next-app 5. 만든 폴더로 이동한..