mingg IT

보호되어 있는 글입니다.

보호되어 있는 글입니다.

https://cssgridgarden.com/ Grid GardenA game for learning CSS grid layoutcssgridgarden.com - 지인의 추천으로 한번 해보게 되었다.- 1시간 순삭 - 개인적으로 grid mdn 읽는 것 보다 직접 사용하는게 훨씬 습득하기엔 좋은 것 같다.- 난이도는 어려운 편은 아니였음. - 26번 부터 슬슬 막히기 시작했음.  1번grid-column-start:3 2번grid-column-start: 5 3번grid-column-end: 4 4번grid-column-end: 2 5번grid-column-end: -2 6번grid-column-start: -3 7번grid-column-end: span 2 8번grid-column-end: span..

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

보호되어 있는 글입니다.