코딩 노트

무한스크롤 App.js에 구문 추가 export default App; Menu.js에 구문 추가 도서 최초에 보여줄 데이터 개수가 필요하다. 최초에 보여줄 데이터 개수 30개 스크롤이 아래로 내려가면 추가 30개(반복) bookInfinite.js 생성 후 구문 추가 import { useState } from "react"; const BookInfinite = (props)=>{ const [bookList, setBookList] = useState([]); return ( 무한 스크롤 예제 제목 저자 출판사 ); }; export default BookInfinite; 백엔드로 넘어와서 BookRestController에 구문 추가 //프론트엔드에서 페이지번호, 데이터 개수를 보낼 경우의 조회 ..

no가 있으면 수정, 없으면 추가이다. none: css에서 없다 empty: 배열에서 비어있는 것을 의미 undefinded: 선언만 하고 값을 준 적이 없으면, 값이 아예 없으면 정의 된 적이 없는 것을 의미 null: 항목은 있는데 대상이 없는 것을 의미 patch는 하나씩 나올 때, 풋은 전체가 다 나올 때 pocketmon.js 수정 구문 추가 import {useState, useEffect, useRef} from "react"; import axios from "axios"; import {LiaEdit} from "react-icons/lia"; import {AiFillDelete, AiOutlinePlus} from "react-icons/ai"; import { Modal } fro..

spring22rest에 BookDto 생성 @Schema(description = "도서 정보 객체") @Data @NoArgsConstructor @AllArgsConstructor @Builder public class BookDto { private int bookId, bookPageCount; @Builder.Default private float bookPrice = -1f; //절대로 들어올 수 없는 값 private String bookTitle, bookAuthor, bookPublicationDate, bookPublisher, bookGenre; } mybatis 폴더에 book-mapper.xml 생성 DOCTYPE mapper PUBLIC "-//mybatis.org//DTD M..

PocketmonRestController 구문 추가 @PostMapping("/") public void insert(@ModelAttribute PocketmonDto pocketmonDto) { pocketmonDao.insert(pocketmonDto); } PocketmonDao에 구문 추가 void insert(PocketmonDto pocketmonDto); PocketmonDaoImpl에 구문 추가 @Override public void insert(PocketmonDto pocketmonDto) { sqlSession.insert("pocketmon.save", pocketmonDto); } pocketmon-mapper.xml에 insert 구문 추가 insert into pocketm..

백엔드와 연결하기 REST API - 자원(Resource)을 기반으로 하여 데이터를 주고 받는 시스템 SOA - 서비스기반 설계구조 /member/login 회원 로그인 페이지 /board/detail 게시글 상세 페이지 클래식웹(서버사이드렌더링) 방식일 때 쓰는 형태 PUT은 전체를 바꿀 때, PATCH는 하나만 바꿀 때 사용 spring22rest 프로젝트 생성 properties 파일 구문 추가 # project setting file # key=value #sever setting #server.servlet.context-path=/khacademy ##server.port=9999 # database setting spring.datasource.driver-class-name=oracle...

리엑트 CRUD 복습 예제 demo04 project 생성 cmd에 npx create-react-app demo04 --skip-git 해서 프로젝트를 생성한다. bootstrap을 가져오기 위해 cmd에서 cd demo04로 생성한 프로젝트를 경로로 설정한 뒤 npm i bootstrap npm i bootswatch 을 해서 설치한다. index.css, App.css에 내용을 다 지운 뒤, index.js에 구문을 추가한다. (demo03 거를 가져온다.) import React from 'react'; import ReactDOM from 'react-dom/client'; //link 대신 import를 통해 설치한 라이브러리 CSS를 불러오도록 처리 //- node_modules에 설치한 요..

리엑트는 for를 사용하지 않는다. Exam08.js 생성 import { useState } from "react"; const Exam08 = ()=> { const[names, setNames] = useState(['피카츄', '라이츄', '파이리', '꼬부기']); //배열 형태의 데이터를 출력할 때는 ES6의 map 함수를 사용한다. //- map 함수는 배열의 데이터를 변화시키면서 새로운 배열을 생성하는 명령 //- map 함수로 화면을 반복적으로 출력할 때 반드시 반복되는 영역에 key 속성이 있어야 한다. //- key 속성은 반드시 유일해야 한다. (백엔드에서 데이터를 가져오면 PK사용) //- 도저히 사용할 값이 없다면 map에 두 번째 매개변수인 index 사용 return( 배열 ..

Exam04.js 생성 첫 번째 방법 import { useState } from "react"; //function Exam04() {} const Exam04 = ()=> { const [content, setContent] = useState(""); return ( 네 번째 예제 (Q)주말에 뭐하세요? setContent(e.target.value)}/> {/* onChange는 이벤트를 수동으로 발생시켜도 값이 변하지 않는다. input은 이벤트를 발생시키면 강제로 값이 변한다. 그래서 onChange 선호 */} {content.length} / 1000 ); } export default Exam04; Exam04.js 생성 두 번째 방법 - 바꾸는 건 하나만 바꾸고 두 개를 쓴다! (내용과..