지난번에 만든 등록페이지와 수정페이지 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. 만든 폴더로 이동한..

이렇게 동작한다Keyframes 와 animation을 이용해 위와 같이 움직이는 효과를 만드는 실습을 했다.html과 css를 사용했는데 문제는 css파일이 아닌 React에서 쓰는 @emotion/styled를 이용해JavaScript 파일에서 태그 대신 함수를 만들어 사용했기 때문에 Keyframes를 어떻게 사용해야하는지 몰라 한참을 해매다가 겨우 성공!!ㅜㅜ 일단 기본적으로 css에서는@keyframes titleText { 0% { transform: translateY(70px); opacity: 0; } 92% { transform: translateY(-10px); } 100% { transform: transl..

index.js import { Page, Wrapper, Title, Content, Text1, Text2, Text3, Text4, Subtitle, DiaryDate, } from "@/styles/my_diary/mydiary"; export default function MyDiary() { return ( 나만의 일기장 나만의 일기장 입니다! 원하는 색과 사이즈로 일기장을 커스텀 해보세요. Have a Good Day.😊 📌 쭈꾸미의 일기 오늘은 김치찜을 먹었다. 🧀치즈 계란말이 도 같이 나오는 세트였다. 맛있어서 정신없이 먹다보니 배가 너무 불러서 힘들었다. 내일은 과식하지 말아야겠다!! 2023년 3월 8일 날씨 맑음☀️ ); } mydiary.js import styled from "@..

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

div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용한다. div는 웹페이지에서 논리적 구분을 정의하는 태그이다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있다. 요즘에는 레이아웃 배치를 거의 div를 활용해 구성하는 추세 태그 속성 내용 style 스타일 width 가로크기 height 세로크기 border 테두리 굵기 background - color 배경 색상 float 정렬 margin 여백 예제 MY HOMEPAGE HTML5 CSS3 JAVA MYSQL 결과화면