박주니 개발 정리

설명 이유 보통 그룹으로 지정할 것도 없이 동시에 적용을 할려면 클래스 name을 가지고 와서 , 구분한다음 한번에 이벤트를 적용하면 됬지만 hover이나 동작에 대한 이벤트를 줄때에는 별도로 설정해야한다는 것을 알게 되어서 정리하게 되었습니다. 예시 코드 테스트 적용 미적용 조건 li테그에 테스트에 마우스를 갖다대면 h1테그 적용부분도 동시에 hover 적용해서 글자가 빨간색으로 변하게 만들어보세요 css .test-group:hover li, .test-group:hover h1 { color: red; } 설명) 먼저 적용하고자하는 범위에 상위에 있는 클래스를 가지고 와서 hover을 적용하고 그다음에는 상세 적용할 부분을 지정하면 됩니다. 회고) 이 방법을 몰랐을경우 hover을 동시에 적용하고자..

설명 이유 주로 풀스택으로 업무를 볼때에는 프론트에서 데이터를 바로 response해서 사용할 수 있게 백엔드에서 데이터를 셋팅해서 보내는데 이번에 타팀에서 만든 데이터를 가지고 중복된 값이 존재했을 때 이중포문으로 진행하면 되지만 관리하는 입장에서는 어떻게 접근해야할 지 생각하다가 filter을 이용후 group으로 접근했을 때 코드가 좀 더 간결해진다는 것을 알게되었습니다. 먼저 데이터가 key는 menu, sub-menu로 구성되어있고 menu가 중복되었을 때 중복을 제거하고 sub-menu가 속하게 만드는 것으로 접근을 해보겠습니다. const [asset, setAssetData] = useState([ { menu: "one", "sub-menu": "test1" }, { menu: "one"..

1. 먼저 redux 패키지를 설치합니다. npm install redux react-redux 참고 파일구조 2. store 폴더를 생성하고 index.js에 redux 스토어를 생성하고 애플리케이션에 redux를 통합합니다. // src/store/index.js import { createStore } from "redux"; import { combineReducers } from "redux"; import paginationReducer from "./reducers/paginationReducer"; // 리듀서를 복수로 관리하려면 combineReducers 함수를 사용하여 하나의 루트 리듀서로 결합합니다. const rootReducer = combineReducers({ paginati..

1. npm install datatables.net-dt/css/jquery.dataTables.css datatables.net 를 합니다. 2. 업로드한 코드를 복사해서 이용합니다. 전체 코드 import React, { useEffect, useRef, useState } from "react"; import $ from "jquery"; import "datatables.net-dt/css/jquery.dataTables.css"; import "datatables.net"; import axios from "axios"; const MyDataTable = () => { const tableRef = useRef(null); const dataTableRef = useRef(null); con..