박주니 개발 정리

설명 이유 보통 그룹으로 지정할 것도 없이 동시에 적용을 할려면 클래스 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..

1. npm install chart.js를 합니다. 2. 제공하는 코드를 사용합니다. chartjs의 구성에 맞춰서 넣은 것이기 때문에 기본폼이라고 생각하고 복사해서 붙여놓으시면 됩니다. import React, { useEffect, useRef } from "react"; import { Chart, registerables } from "chart.js"; const BarChart = () => { const chartRef = useRef(null); let chartInstance = null; useEffect(() => { const ctx = chartRef.current.getContext("2d"); const createChart = () => { Chart.register(.....

1. npm install chart.js 를 합니다. 2. 제공하는 코드를 사용합니다. chartjs의 구성에 맞춰서 넣은 것이기 때문에 기본폼이라고 생각하고 복사해서 붙여놓으시면 됩니다. import React, { useEffect, useRef } from "react"; import { Chart, LineController, CategoryScale, LinearScale, PointElement, LineElement, } from "chart.js"; const LineChart = () => { const chartRef = useRef(null); let chartInstance = null; useEffect(() => { const ctx = chartRef.current.getCo..

설명 이유 처음에 laravel로 진행할 때 nginx로 프론트와 백엔드 경로를 맞추다보니 프론트에서 proxy 설정을 하지 않아도 cors 에러가 발생하지 않았습니다. 그런데 spring를 서버로 해서 이미 설정된 host에 맞출려고할 때 생각처럼 되지 않았는데 그때 사용하는 것이 proxy라는 것을 알았습니다. proxy 는 일반적으로 서버와 클라이언트 사이에서 요청을 중개하고 수정하는 역할을 개념만 알았지 어떻게 이용되는 지는 잘 알지 못했지만 이번 계기로 정확하게 알게 되었습니다. 사용 방법 1. package.json에 proxy를 설정합니다. "proxy": "http://localhost:3001/" 설명 여기서 host 경로는 백엔드에서 값을 보내고 있는 host를 넣으시면 됩니다. 2. ..

설명 이유 코드를 최적화하지 않으면 불필요한 코드가 많아지고 코드가 길어져서 나중에 유지보수할 때도 해당 문제되는 코드를 찾는데 시간이 많이 소모되는 것을 보게 되었습니다. 확실히 이렇게 코드를 작성하니 코드가 몇백줄 넘어가는 것을 100줄 이내로 줄일 수 있었습니다. 참고 현재 설명은 laravel을 어느정도 이해하고 사용하고 있다는 기준에서 설명을 진행했습니다. 잘못된 방법 if($request->select == "title"){ $test = TEST::where([['user_id',1],[title, $request->value]])->get(); } else if($request->select == "description"){ $test = TEST::where([['user_id',1],[..