코딩 노트

그룹웨어 우리 프로젝트는 모두 리엑트로 진행된다. 내가 맡은 테이블은 근태 관리 테이블이다. 근태 - 출, 퇴근시 버튼을 클릭해서 버튼 누른 시간을 입력 후 기록한다. - 근무 상태(정상근무, 휴무일근무, 휴무, 지각, 조퇴, 결근,...)이 나온다. - 출근 시간이 9시 이후면 지각, 퇴근 시간이 6시 이전이면 조퇴, 출근과 퇴근 시간이 null이면 결근, 주말이면 휴무, 주말에 출퇴근 기록이 있으면 휴무일근무, 출근 시간이 9시 이전, 퇴근 시간이 6시 이후면 정상근무 - CRU만 있으면 된다. 삭제는 필요 없다. 데이터베이스 구문 날짜를 숫자로 표시하는 코드 select to_char(to_date('2023-10-19','yyyy-mm-dd'),'D') from dual; 근태 -- 근태 시퀀스 ..

무한스크롤 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( 배열 ..