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..

올해도 내 나이만큼(28) 책을 읽는 것을 목표로 삼았는데, 어떤 책을 읽었는지 정리를 해 두려고 한다.    1.  예민함이라는 무기  내 자신이 가끔 예민하다고 생각이 들어서 읽고 있다. 인상적이였던 부분은 예민하다는게 남들에게 화내고 짜증내는 것이 아니라, 남들에게 맞추고 자신을 숨기는 것도 예민함이라고 이야기 하고 있다. 그리고 자신의 한계나 경계를 인지하고 바운더리를 조절해라고 이야기 한다. 또한 남들보다 상황을 빨리 읽고 감각이 좋은 것(예민함)을 활용해보라고 한다.     2.  가상 면접 사례로 배우는 대규모 시스템 설계 기초 2  대규모 시스템 설계기초 1을 굉장히 재밌게 읽었기 때문에 2편을 읽고 있다.굉장히 재밌게 읽고 있다. 이 책은 정리를 하면서 읽으면 좋은데 출퇴근 기간에 보고는..

프론트엔드 개발의 가장 어려운 부분은 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..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

문제 및 요구 사항 통계성 데이터를 보여주는 대시보드 기능이 추가되고, 데이터가 많아지면서 여러 문제가 생겼음 여러 테이블을 Join 해오기 때문에 속도가 매우 느림 (api 6초 정도 소요) 통계쪽 데이터를 확인하기위해 계속 요청하면 서버에 전체적으로 영향이 감 실시간 데이터와 배치성 데이터(1개월 전 데이터)를 함께 볼 수 있어야함 시도 방안 Aws Redshift 를 이용해보자. Redshift 란 ? MPP(Massive Parallel Processing) Database 임 OLTP 용으로 사용함 PK의 Uniqueness를 보장 하지 않음 즉 결국 DB 인데, 우리가 일반적으로 사용하는 MySql, PostgresSql 과 같은 OLTP 성 DB가 아니라는 뜻 Redshift 적용 구조 ..