mingg IT

react-big-calendar 학습 이유- 최근 해당 라이브러리를 이용하여 커스텀 하는 과정에서 시간이 꽤 소요 되었고, 이번 기회에 내부가 구성되어있는지 공부해보고자 한다.  npm 주소- https://www.npmjs.com/package/react-big-calendar  storyBook - git clone 이후, yarn storybook    디렉토리 구조  scripts/build.mjschalk.blue : 터미널에 출력되는 문자열을 파란색으로 변경해주는 라이브러리sass로 컴파일 하고, 저장함src 디렉토리가 핵심 Calendar.js (예시) view: 표현될 캘린더 형식(ex 월, 주, 일) events: 캘린더에 보여질 이벤트 (title, start, end) onSe..

프론트엔드 개발의 가장 어려운 부분은 css 인 것 같다. 내가 전혀 의도하지 않은 동작이 일어나고 있어서 수정해보려고 한다. 현상 - position: fixed를 이용하여 스크롤과 함께 같이 내려오는 기능을 구현함(우측 TEST 부분) - position이 변경되는 경계에서 화면 전체 UI가 밀리면서 width가 변경되는 현상이 발생함 기존 코드 수정한 코드 - fixed가 아닌 상태의 position을 absolute로 수정해 주었다. - fixed일 경우엔 상위(부모)의 width를 전혀 가지고 오지 못하기 때문에 width를 지정해 주었음. 수정 결과 - `예약 가이드` 경계와 함께 우측 정보가 함께 내려옴 - 의도한 대로 동작함 요약 - `position: fixed` 사용시 width를 지정..

https://mingg123.tistory.com/286 [Calendar] react-big-calendar custom(커스텀) 하기 목적 아래와 같은 calendar 형식으로 커스텀이 필요한 상황 이였다. 클릭 시 일자, 가격, 배경 색 변경 헤더영역, 일자 영역 border 제거 필요 달력 내 일자 영역을 둥근 border 필요 react-big-calendar 사용 mingg123.tistory.com 이전 포스팅에서는 css를 이용하여 캘린더 내 스타일을 간단하게 커스텀 하였다. 오늘은 캘린더 내 event 커스텀 관련 포스팅을 작성하려고 한다. 목적 - 캘린더 클릭 시 가격 정보 전달 - 이번달에 포함되지 않은 날 스타일 수정 이벤트 추가 - react-big-calendar는 날짜를 선택..

목적 아래와 같은 calendar 형식으로 커스텀이 필요한 상황 이였다. 클릭 시 일자, 가격, 배경 색 변경 헤더영역, 일자 영역 border 제거 필요 달력 내 일자 영역을 둥근 border 필요 react-big-calendar 사용한 이유 이벤트 추가 및 사용하기에 간단함 커스텀 하기에 좋음 다양한 형태의 캘린더 제공(우리 프로젝트에선 오버스펙이긴함) npm 링크: https://www.npmjs.com/package/react-big-calendar 사용 기술 스택 Nextjs v13 Tailwind css react v18 react-big-calendar v1.10.1 커스텀 전의 캘린더 모습 (참고: 토, 일 색 변형 등은 내가 수정해주었음) import "moment-timezone/bu..

보호되어 있는 글입니다.

현상 expanded 되는 테이블 형식으로 바꾼 이후부터 렌더링이 눈에 띄게 느려졌다. 필터를 이용하면 테이블을 그려주는 형식이 변하는 동적 테이블 형식이였다. 또한 필터를 선택하면 백엔드로 API를 호출하는 것이아닌, 프론트에서 reduce를 이용해 소계를 다시 계산 하는 등 브라우저에 무리가 될 수도 있는 동작이 포함되어 있었다. 원인 데이터가 많아서 오래걸리는걸까봐 MUI의 virtualized table을 적용해보았지만 여전히 느렸다. (https://mui.com/material-ui/react-table/#virtualized-table) virtualized table을 적용후에도 여전히 느림을 확인한 이후, 이건 데이터를 보여주고 해당 데이터를 계산하는데 오래 걸려서의 문제가 아니라 테이블..

9장 계층형 설계 2 계층형 설계 패턴 패턴1: 직접 구현 패턴2: 추상화 벽 호출 그래프에 어떤 계층은 중요한 세부 구현을 감추고 인터페이스를 제공함 인터페이스를 사용하여 코드를 만들면 높은 차원으로 생각할 수 있음 패턴3: 작은 인터페이스 시스템이 커질수록 비즈니스 개념을 나타내는 중요한 인터페이스는 작고 강력하게 구성하는 것이 좋음 패턴4: 편리한 계층 계층형 설계 패턴과 실천 방법은 개발자의 요구를 만족시키면서 비즈니스 문제를 잘 풀수 있어야 한다. 소프트웨어를 더 빠르고 고품질로 제공하는데 도움이 되는 계층에 시간을 투자해야함 그냥 좋아서 계층을 계속 추가하면 안됨. 코드가 속한 추상화 계층은 작업할 때 편리해야함 패턴2: 추상화 벽 책임을 명확하게 나눔 세부 구현을 감춘 함수로 이루어진 계층 ..

8장 계층형 설계 1 좋은 설계를 위한 감각을 키울 수 있도록 도와주는 장이다. 목적에 따라 분리한 계층형 설계에 대해서 설명하고, 어떤 식으로 계층을 분리해야하는지 알려준다. 정말 이러한 패턴으로 설계를 했을 때 좋은 설계가 맞는지 의문도 들었다. 괜히 여러 계층이 생기면서 오버엔지니어링이 되는건 아닌가? 싶었다. 현업시 간혹 어떤 파일에 해당 함수를 넣을지 고민한적이 많았는데 동일한 계층에 넣으면 되겠다 싶었다. 계층형 설계 소프트웨어를 계층으로 구성하는 기술 비즈니스 규칙, 장바구니를 위한 동작들, 카피-온-라이트, 배열 관련 기능 목적에 따라 계층으로 나눔 계층형 설계 패턴 직접 구현 계층형 설계 구조를 만드는데 도움이 됨. 함수 시그니처가 나타내고 있는 문제를 함수 본문에서 적절한 구체화 수준에..