aotoyae

💡 간단한 input 입력 제한과 input 안에 입력값 길이 표시! input 의 onInput 에 함수를 부르고 이벤트와 제한할 글자수를 보내준다! { handleMaxLength(e, 30); }}/> handler 에선 value 값이 maxLength 값이 넘는다면 substr 로 잘라준다! export const handleMaxLength = (e: FormEvent, maxLength: number) => { const inputElement = e.target as HTMLInputElement; const { value } = inputElement; if (value.length > maxLength) { inputElement.value = value.substr(0, maxLeng..

💡 리액트에서 파일 첨부하기 우선 미리보기를 위한 로직 🫠 const handleClickImg = (id: string | undefined) => { // img & input 을 감싸고 있는 div 클릭 시 const fileInput = document.getElementById(`fileInput${id}`); // fileInput${id} id를 가진 DOM 요소를 fileInput?.click(); // 클릭한다. }; const handleChangeImg = (id: string | undefined, files: FileList | null) => { const file = files?.[0]; if (file) { const imgUrl = URL.createObjectURL(fil..

💡 라디오 속성에 대해 알아보자. 문항들 map 을 돌리는 상황에서 라디오가 문항마다 체크되어야 하는데 한 문제에만 체크되는 오류가 있었다. 살펴보니.. test 하면서 막 만들어 둔 속성들이 문제였다. 그래서 알아본 속성들 용도 🥹 id : label 의 for 와 연결된다. name : 같은 주제의 input 들을 묶어준다. 과일 - 사과, 포도, 딸기 value : 선택된 라디오 값을 저장할 때 이용 label 로 input 을 감싸주는 걸로 변경해서 id & for 를 지웠고, name 에 map 으로 돌리면서 가져오는 qustion 의 id 를 넣어줬다! 🔗 https://www.daleseo.com/react-radio-buttons/ React에서 라디오 버튼 사용하기 Engineering ..

💡 mutate, mutateAsync 차이점에 대해 알아보자. mutate mutate 를 기다리고 실행 될 동작이 없다! const onSubmitHandler = (e: FormEvent) => { e.preventDefault(); newTodoMudation.mutate( { title, contents }, { onSuccess: () => { setTitle(''); setContents(''); queryClient.invalidateQueries({ queryKey: ['todos'], }); }, onError: () => { alert('POST Todo Error'); }, } ); }; mutateAsyng async/await 문을 썼고, mutateAsync를 기다리고 실행 될..

💡 fullcalendar 캘린더를 꾸며보자! 거의 비슷하긴 한데 ^^.. 노력했다. fullcalendar css 변경은 클래스명으로 접근해서 css 파일에 원하는 대로 적거나 fullcalendar 에서 정해둔 root 변수값을 바꿔야 한다. Calendar.tsx import "../style/calendar.css"; Calendar.css .fc-day-sun a { /* 일요일 컬러 */ color: var(--mainColor1); } .fc-day-sat a { /* 토요일 컬러 */ color: var(--subColor1); } .fc .fc-toolbar.fc-header-toolbar { padding: 10px 20px; font-size: 12px; font-weight: 500..

💡 fullcalendar 사용 방법 yarn add npm install @fullcalendar/react @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction 우선 처음엔 이렇게 받고 더 필요한 건 나중에 설치! @fullcalendar/react : React 컴포넌트 제공 @fullcalendar/core : calendar class 제공 @fullcalendar/interaction : dateClick 등 액션 감지하는데 필요 @fullcalendar/daygrid : 월별 및 daygrid 뷰 제공 calendar/page.tsx 'use client'; import FullCalendar from '@fullcalenda..

💡 체크박스 에러 발견.. toggleTodohandler(todo.id, todo.isDone)} /> 체크박스에 이벤트를 onClick 으로 주었더니 에러가 떴다. onChange 를 쓰거나 readOnly 를 붙여주라고..! toggleTodohandler(todo.id, todo.isDone)} /> 바꿔주니 에러 없이 잘 동작한다. 🫠

💡 jsx 에서 테이블을 만들어보자! title contents {todos.map((todo: Todo) => { return ( {todo.title} {todo.contents} ); })} 화면엔 잘 나오는데 에러가 떠서 🥲 찾아보니 HTML 에서의 table 은 tbody, thead 를 생략해도 tr/td, th 를 쓸 수 있지만 JSX 에선 반드시 tbody & thead 를 써줘야된다고 한다! DOM tree 가 잘 렌더되도록 더 안전하게 구분을 해 두는 것 같다. title contents {todos.map((todo: Todo) => { return ( {todo.title} {todo.contents} ); })} 🤤 🔗 https://velog.io/@dongdong98/React..