목록전체 글 (274)

mingg IT

[CSS] position:fixed 사용시 width가 변하는 현상

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

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

목적 아래와 같은 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..
FrontEnd 2024. 3. 31. 12:03
[Next.js] Image 컴포넌트 html2canvas 시 이미지가 깨지는 현상

보호되어 있는 글입니다.
FrontEnd 2024. 2. 4. 01:56
2023년 회고와 2024년 목표

보호되어 있는 글입니다.
기타 2024. 1. 28. 14:02
[AWS Redshift] Redshift를 활용한 OLAP 구축 예시

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

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

현상 http://localhost:8080/swagger-ui/index.html# 에 접속하면 NumberFormatException 에러를 뱉었다. (평소엔 괜찮았음) 원인 평소엔 이상이 없었는데 최근부터 발생해서 최근 커밋 내용을 뒤져보았다. 추가한 부분은 Swagger-ui에 @ApiOperation, @ApiImplicitParam을 추가했었다. 원인은 @ApiImplicitParam 에서 숫자타입을 사용시 'example'를 작성해주지 않아서 이다. @GetMapping("/detail") @ApiOperation(value = "상품 상세 정보", notes = "상품 상세 정보를 반환 합니다") @ApiImplicitParam(name = "id", value = "조회할 상품 ID", ..
BackEnd 2023. 10. 22. 22:26
이전 Prev 1 2 3 4 5 ··· 35 Next 다음