전체 글 128

달력 일자 선택시 7일이내의 유통기한 임박상품 불러오기 ( 리액트, 스프링부트 )

프론트 ( 리액트 ) 달력const [selectedDate, setSelectedDate] = useState(null); onClick={() => handleDateClick(day)}  // 날짜를 클릭했을 때 실행되는 함수  const handleDateClick = (date) => {    setSelectedDate(date); // 선택된 날짜 상태 업데이트    onDateSelect(date); // 부모 컴포넌트로 선택된 날짜 전달  };클릭이벤트로 일자 선택시 가져오는 이벤트 만듬  메인페이지 ( 달력 일자 선택 시 해당하는 데이터 조회 )Calendar onDateSelect={handleDateSelect} /> const handleDateSelect = (selectedDa..

재고관리 페이지 ( 리액트, 스프링부트 )

달력에서 일자 클릭하면클릭한 일자에 해당하는 유통기한 임박 상품들 재고테이블에서 가져와서 보여준다 근데 유통기한 임박 상품 리스트를 재고관리에서 가져와야해서재고관리 페이지를 먼저 만들어야함    프론트 ( 리액트 ) 1. 데이터를 받아오고 사용할 틀을 만들어준다import { useState, useEffect } from 'react';import axios from 'axios';import stockk from './StockList.module.css';import ReactPaginate from 'react-paginate';const Stock = ({ columns }) => {    // 선택된 행의 인덱스를 저장하는 상태    const [selectedRows, setSelectedR..

캘린더 (react, npm, 커스텀)

리액트 캘린더 라이브러리 설치 후 커스텀 할려고 했으나 실패 ( 이유 : 타입스크립트 형식 파일, css 재정의 )라이브러리 설치하면 node-modules에 설치되고 커스텀할려면 react-calendar 밑에 dist에 css 파일을 오버라이딩(재정의) 해야 된다. css 재정의는 같은 이름의 css파일을 내 src 아래 생성 후같은 클래스명에 대해 css를 적어준다=> 이 방법으로는 내가 만들려는 캘린더와 똑같이 만들기 힘들었고 다른 방법을 찾음 ---------------------------------------------------------------------------------------------------------------------새로운 방법달력의 기본적인 틀은 내가 만들고 날..

vscode에서 git 사용 ( 상위 브랜치 내용을 하위 브랜치로 가져오기 )

git branch를 maindev-fnjaehyeong 으로 총 3개를 사용할 때jaehyeong에서 작업 후 dev-fn에 올리고 테스트 후 main에 올리는 작업을 거쳤다 근데 팀원과 같이 사용 중에내가 dev-fn에 올린걸 팀원들이 pull 받을 때 본인 로컬 브랜치에 바로 안받아졌다이 때 팀원은 dev-fn으로 브랜치를 바꾸고 pull을 받고하위 본인 로컬 브랜치로 바꾸고 나뭇가지에서 ...을 누르고 branch - merge를 누르고 dev-fn을 선택하면 dev-fn에 있는 내용이 내 로컬 브랜치로 옮겨온다

Git 2024.07.20

Final 기획

우선순위 정하기 - 기획한 디자인 시안 중 보여지는 기능 중에 우선순위를 매김 ( 양이 너무 많아서 체계적으로 관리하기 위함 ) - qr코드, 캘린더, 그래프, 결제 순 ( 기능과 연관된 페이지 전부 개발 ) 넣으면 좋을 것 같은 기능 - 생성형 ai ( https://wrtn.ai/ 생성형 ai의 좋은 예시 ) 역할 정하기 (2명에서 작업) - qr코드 팀 : 주언, 윤기 - 캘린더 팀 : 재형, 애린  일정 정하기1차 DUE 8/4(일)(2주간) + JPA 공부 - 캘린더  redux, tanstack query 차이상태를 주관적으로 정의를 내려본다면 사용자와 상호작용하기 위해 동적으로 변하는 데이터를 말할 수 있다. 이 상태에 따라 UI를 적절하게 보여주도록 설정하는 것이 상태 관리 redux는 전..

react 프로젝트 생성 후 git 연동 (저장소는 프론트, 백 나눠서 써야함)

1. react 프로젝트 생성create-react-appreact-router-dom도 다운로드환경설정 수정 2. 프로젝트 수정변경사항 생기면프로젝트 파일 git bash로 열기 프로젝트 파일에 .git 파일 있으면 삭제 git init git add .git commit -m "커밋메세지"git branch -M main    ----> 이건 main브랜치명 안해도됌git remote add origin 저장소 주소     (원격저장소 연결)git push -u origin main   3. 팀원들은 프론트 저장소 git clone 후 수정하고 commit, push 하면됌

Git 2024.07.18

하이버네이트 백그라운드1

1. 특징 -  ORM 프레임워크 ( object-Relational Mapping )   ==> 자바의 클래스(엔티티, entity)를 이용해서 DB의 테이블을 생성 ( 자바의 클래스와 DB 테이블이 맵핑됨 )          자바의 메서드가 DB의 SQL을 자동 실행함 ( 자바의 메서드와 DB의 SQL이 맵핑됨 ) - JPA는 명세서임 ( 자바의 인터페이스와 같은 개념 )  JPA의 명세를 구현한 구현체들이 있음 ( 대표적으로 hibernate가 있음 ) https://hibernate.org/하이버네이트를 쓸려면 의존성 추가 우리가 실질적으로 쓰는건 하이버네이트가 아니고 스프링 데이터 JPA를 쓴다 - Spring Data JPA ==> hibernate 기술을 개발자들이 쉽게 사용하도록 커스터마이..

JPA 2024.07.16