지난번에 만든 등록페이지와 수정페이지 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 인데 등록하기 버튼을 눌렀을..

열심히 만들어 놓은 게시글 등록 페이지 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. 만든 폴더로 이동한..

1. 컴포넌트(Component)란? - React로 만들어진 앱을 이루는 최소단위 - 데이터(props)를 입력받아 View(state)상태에 따라 DOM Node를 출력하는 함수 - Component 이름은 항상 대문자로 시작 - UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것 - 페이지도 하나의 큰 Component 가 될 수 있다 - 함수형과 클래스형 두가지가 있다 1) 함수형 컴포넌트 (Stateless Functional Component) - 가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다 - 사용하기 더 쉽기 때문에 주로 함수형을 사용한다 export default function MyFunction() { //JavaScrip 작성 return( 함수형..