태인의 Blog/
Forest
Forest/
2024-10-18
Forest
2024-10-18

2024-10-18

  • 학교에서 연구실 안전교육을 의무로 이수하란다. 음.. 당연히 안전은 몇 번이고 강조해도 지나치지 않지만 1학기 때도 들었는데 또 듣기에는 귀찮지 않은가. 이번 학기에는 실험 과목도 없는데… 그래서 브라우저 DevTools를 열고 네트워크 탭에 가서 강의 시청 진도율을 어떻게 반영하고 있는지 살펴봤다. 그러다 강의를 전혀 보지 않고 60분 분량의 교육을 모두 이수한 것으로 바꿔버렸다. 이를 통해 알 수 있는 교훈, “Don't trust the client”
$curl --request POST \
--url https://.../Edu/AviProcessCheck \
--header 'Content-Type: text/plain; charset=utf-8' \
--data 'scheduleMemberProgressNo=......&currentTime=3600&isEnd=true'
  • “결국, 프로그래밍의 본질은 변하지 않을 거예요. 문제를 해결하고, 아이디어를 현실로 만드는 것. 그래서 프로그래밍을 정말 사랑하는 사람들은 앞으로도 계속해서 뛰어난 프로그래머가 될 수 있을 거예요.” - Cursor Team | Lex Fridman Podcast
  • KLAS+
    KLAS+    에 일정 관리를 위한 캘린더 기능을 추가했다. 캘린더 뷰를 구현하기 위해 react-big-calendar 라이브러리를 사용했는데, 터치 환경에서 발생하는 이슈를 해결한 과정을 기록한다. 이 라이브러리에서는 onSelectSlot 이벤트를 통해 달력에서 각 날짜 영역을 선택했을 때의 동작을 지정할 수 있다. 마우스를 사용한 PC 환경에서는 롱 프레스나 드래그 뿐만 아니라 single 클릭 시에도 정상적으로 이벤트가 수신된다. 그러나 터치 환경에서는 single 클릭의 경우 이벤트를 발생시키지 않는 이슈가 있었다. 이는 이미 라이브러리 Repository의 Issue로 여러 개가 등록되어 있지만 명확한 해결 방법은 찾기 어려웠다. 여러 issue 글과 구글링을 해본 끝에 다음과 같은 해결방법을 찾았다. react-big-calendar는 components 속성을 이용해 내부 컴포넌트를 재정의할 수 있다. 여기에는 날짜 영역인 dateCellWrapper도 해당된다. 따라서 onTouchEnd 이벤트를 새롭게 정의해 TouchCellWrapper 를 만들고, 기존 dateCellWrapper를 대신하여 사용하였다.
const TouchCellWrapper = ({
        children,
        value,
        onSelectSlot
    }) =>
    cloneElement(Children.only(children), {
        onTouchEnd: (event) => {
            const bounds = event.target.getBoundingClientRect();
            onSelectSlot({
                slots: [value],
                start: value,
                end: new Date(new Date(value).getTime() + 24 * 60 * 60 * 1000),
                action: "click",
            });
        },
});

...
<Calendar
	components={{
	 dateCellWrapper: (props) => (
		 <TouchCellWrapper {...props} onSelectSlot={handleSelectSlot} />
   )
	}}
onSelectSlot = {handleSelectSlot}
/>
 

작성한 문서

 

댓글

guest