실습 (4) 썸네일형 리스트형 게시판 만들기.04 실무용 폴더구조(container / presenter) 프로젝트를 만들때 폴더 구조는 굉장히 중요합니다. 실무에서 사용하는 폴더 구조는 여러가지 방법이 존재하는데, 이러한 방법들을 패턴이라고 부릅니다. 리액트에서 사용하는 유명한 패턴으로는 container / presentational 패턴과 atomic 패턴이 있습니다. container / presentational 패턴을 사용 하였습니다. container import { useState } from "react"; import { useMutation } from '@apollo/client' import { useRouter } from 'next/router' import BoardWriteUI from './BoardWrite.presen.. 게시판 만들기.03 gql을 이용하여 데이터를 보내주는 작업을 하였습니다. const CREATE_BOARD = gql` mutation createBoard($createBoardInput: CreateBoardInput!){ createBoard(createBoardInput: $createBoardInput){ _id } } ` gql선언 createBoardInput: $createBoardInput : 변수값 $createBoardInput: CreateBoardInput!: 변수타입 // 쿼리문 적용 const [createBoard] = useMutation(CREATE_BOARD const result = await createBoard({ variables: { createBoardInput: { write.. 게시판 만들기.02 기존의 게시판에 기능을 넣어주었다. writer password title contents 중의 하나라도 없으면 Error 상태 메시지가 아래에 나오도록 만들어주었다. 입력을하면 실시간으로 사라지게 하기위해 onClick 을 이용 하였다. const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); const [writerError, setWriterError] = useState(""); const [passwordError, setPasswordError.. 게시판 만들기.01 먼저 가장 기본이되는 게시글 등록 페이지를 만들어 보았다. 일단 기능구현은 만들지않고 형태만 만들었다. 이전 1 다음
