뇌 채우기 공간

오늘은 달력을 만들어볼 것이다. 달력 만드는 것이 너무 어려워서 챗 gpt한테 코드 좀 작성해달라했는데.. 정말 뭔가 잘 작성해주었지만.. 프리미엄이 아니라서 끝까지 볼 수 없었다. 그래서 그냥 내가 했다. 1) 요일 만들기 빨간 줄 쳐진 요일 부분을 만들어보겠다. 이 달력 만드는 것 중에 가장 쉬운 부분은 여기다. 그래서 이거부터 하겠음. const DayoftheWeek = () => { const date = ["일", "월", "화", "수", "목", "금", "토"]; return ( {date.map((p) => { return ( {p} ); })} ); }; export default DayoftheWeek; 요일 배열을 만들어주고 map돌려서 보여주면 된다. 아주 쉽죠잉? 2) 현재 월..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

인터렉티브 웹을 공부하다가 브런치 스타일을 한번 따라해보기로 했다. 결과는 아래 동영상이다. 여기서 내가 고려한 포인트는 아래와 같다. 1. 사진 배경을 덮으면서 콘텐츠가 올라가게 하기 2. 헤더 부분이 사진 영역에 있을 때는 투명했다가 스크롤을 하면 그대로 안보이고, 글 영역으로 가면 반투명 해지고 progress bar가 나타남 3. 헤더 부분 아이콘이 사진 영역에서는 검정이고 글 영역에서는 하얀색. 4. 페이지 높이에 따른 progress bar 만들기 (전체코드는 맨 아래에) html은 이렇게 짰다. 크게 메뉴, 이미지, 콘텐츠 부분으로 div를 두었다. 꽃이 끓는 풀이 사랑의 놀이 청춘 바이며, 힘있다. 피가 뼈 커다란 남는 갑 생생하며, 이 사람은 그들은 그리하였는가? 모래뿐일 피고, 같은 따..

새로운 프로젝트 세팅을 하면서 어떤 상태관리 라이브러리를 쓸까 생각을 해보았다. 그 전에는 쌩 리덕스를 쓰고 있어서 보일러플레이트 코드가 매우 많이 필요했다. 그래서 비교적 쉽고 보일러플레이트가 적은 recoil을 쓰려고 했는데 zustand가 인기가 더 많아지고 있고 업데이트와 버전 업데이트도 recoil보다 더 활발하여 zustand를 사용해보기로 했다. 결론적으로는 매우 쉬움 따봉 100개 드립니다. 보일러플레이트가 거의 없고, redux devtools를 사용할 수 있다. 1. 설치 yarn add zustand 2. store생성 // store.js import create from 'zustand' // create로 zustand를 불러옵니다. const useStore = create(s..

그동안 프로젝트에서 5버전만 쓰다가 새로운 프로젝트를 세팅하면서 6.3.0 버전을 적용해보려고 한다. 이 프로젝트에서 필수로 가져가야할 것은 중첩라우팅, 리다이렉트, 에러페이지 이므로 이것을 중점으로 포스팅 하겠다. 1. 설치 yarn add react-router-dom 2. index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( , document.getElementById('root') ); 3. App.js (기본 규칙) 위에서..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

내가 이번에 ag grid를 쓰면서 구현하는데 참고했던 자료들 모음zip~ 1. external filter 그리드 바깥의 버튼이나 검색바로 그리드의 컬럼에 필터를 집어넣는 방법 참고 : http://54.222.217.254/javascript-grid-filtering/ https://www.ag-grid.com/react-data-grid/filter-external/ https://www.ag-grid.com/react-data-grid/filter-api/#example-get--set-all-filter-models 2. redux 연결 그리드와 리덕스 연결하는 방법 참고 : https://ag-grid.com/react-data-grid/redux-integration-pt1/ https:/..

오늘은 이렇게 ag grid에서 수정 버튼을 누르면 select box가 활성화되어 값을 변경할 수 있도록 구현해보겠습니다 1. cell Renderer 지정해주기 애초에 데이터를 받아올 때 휴직, 재직이라는 값을 받아와서 select box의 value로 넣어주어야합니다. 꼭 그래야한다는 건 아니고 그러고 싶다는 뜻 import { MenuItem, Select } from '@mui/material'; import clsx from 'clsx'; import React, { useState } from 'react'; import UserStyles from '../User.style'; const CellSelectRenderer = params => { const user_classes = Use..