Dev Diary 💻

Intro안녕하세요. react 사용 중 다음의 에러가 발생하였습니다. Warning: Failed prop type: Invalid prop checked of type string supplied to ..., expected boolean.  Why?const MemoizedCheckbox: React.FC = React.memo(({ checked, onChange, value }) => { return })... } label={data} labelPlacement='end' /> 오류의 원인은 MemoizedCheckbox 컴포넌트의 checked prop에 문자열 타입이 전달되었기 때문입니다. checked prop은 boolean 타입을 기대하고 있으며, 문자열이 전..

Intro안녕하세요. react-datepicker 를 사용하던 도중 아래와 같은 오류가 발생하였습니다. SyntaxError: Unexpected token 'export' How to solve the problem date-fns 를 사용해서 아래와 같이 ko (한국어)를 import 하여 사용하고자 했습니다. 하지만 이 부분에서 에러가 발생하더라고요~ import { ko } from 'date-fns/esm/locale' 그래서 이 부분을 다음과 같이 바꿔줬더니 더 이상 에러가 발생하지 않았습니다. 혹시 저와 같은 에러가 발생하는 분들이 있으시다면 이 방법을 활용해보세요 :)import { ko } from 'date-fns/locale'https://github.com/date-fns/date..

Intro안녕하세요. 이번 시간에는 react-datepicker 라이브러리에서 언어를 바꾸는 방법에 대해 알아보도록 하겠습니다. 참고로 react-datepicker 는 react에서 많이 사용하는 달력 라이브러리입니다.  How to Change lang 가장 먼저 date-fns를 설치해줍니다. npm을 사용하신다면 npm을 이용해주시면 됩니다. yarn add date-fns  이후 사용하고자 하는 언어를 import 해줍니다. import { ko } from "date-fns/esm/locale"; } />  local={ko}를 적용한 결과 아래와 같이 캘린더 언어가 한국어로 변경된 모습을 확인할 수 있습니다.

Intro 안녕하세요. 이번 시간에는 리눅스 tail 명령어 사용법에 대해 알아보도록 하겠습니다 :)  How to use다음은 테스트용 json 파일입니다. {    "quiz": {        "sport": {            "q1": {                "question": "Which one is correct team name in NBA?",                "options": [                    "New York Bulls",                    "Los Angeles Kings",                    "Golden State Warriros",                    "Huston Rocket"     ..

Intro 안녕하세요. zsh의 .zshrc 변경 후 바로 적용하는 방법에 대해 알아보도록 하겠습니다. How to apply보통 아래의 명령어 vi/vim 을 통해 파일을 수정합니다. 수정후 wq 명령어를 통해 저장해줍니다. 하지만 이때 변경사항이 바로 저장되지 않습니다. ➜ ~ vi .zshrc  source 키워드를 통해 해당 파일을 한번 더 입력해줘야 변경사항이 바로 저장되어 적용됩니다 :)➜ ~ source ~/.zshrc

Intro안녕하세요. React에서 window.scroll 이벤트가 제대로 작동하지 않은 에러가 발생하였습니다. 아무리 window.scrollY 값을 구해도 0으로 나오더라고요.   코드는 다음과 같습니다. // stateconst [scrollTop, setScrollTop] = useState(0), headerRef = useRef(null), headerHeight = headerRef?.current?.clientHeight ?? 0, // useEffectuseEffect(() => { const handleScroll = () => { setScrollTop(window.scrollY); }; handleScroll(); window.ad..

Intro안녕하세요. select element 에서 dropdown icon 바꾸는 방법에 대해 알아보도록 하겠습니다 :)  How to solve problem Option 1 Option 2 Option 3/* Hide the default dropdown arrow */.custom-select { appearance: none; /* For Firefox */ -webkit-appearance: none; /* For Chrome, Safari, Opera */ -moz-appearance: none; /* For Firefox */ background-image: url('custom-dropdown-icon.png'); /* Custom arrow icon */ backgrou..

Intro안녕하세요. 이번 시간에는 React useForm 라이브러리에 대해 간단히 정리해보려고 합니다. React mui 템플릿을 살펴보던 도중 useForm 라이브러리를 사용하는 부분을 처음 발견했거든요! :)  UseForm?useForm은 React에서 Form 관리를 간편하게 할 수 있도록 도와주는 라이브러리 중 하나입니다. React Hooks를 기반으로 동작합니다. useForm을 사용하면 상태 관리와 유효성 검사 등의 복잡한 폼 관련 작업을 간소화할 수 있어 개발자들이 폼을 더 빠르고 쉽게 작성할 수 있습니다. 이는 개발 생산성을 높이고 코드의 유지보수성을 향상시킵니다. UseForm's functionForm 상태 관리 : useForm 훅을 사용하여 폼의 상태를 관리할 수 있습니다. ..

Intro안녕하세요. React에서 MUI의 TextField를 사용하던 도중 아래와 같은 에러가 발생하였습니다.   Input elements should have autocomplete attributes (suggested: "current-password")   How to solve problem해당 에러가 발생한 이유는 autocomplete 속성을 명시하지 않아서입니다.  autoComplete 속성이란  폼 필드에 브라우저의 자동 완성 기능을 사용할지 여부를 지정합니다. 브라우저는 종종 사용자가 이전에 입력한 데이터를 기억하고, 유사한 입력 필드가 나타날 때 이를 자동으로 완성합니다. 예를 들어, 사용자가 이전에 입력한 이메일 주소나 사용자 이름을 기억하여 다음에 해당 필드에 다시 입력할..

Intro안녕하세요. 이번 시간에는 MUI Dialog Component 에서 화살표 키 (PgUp, PgDn) Internal scroll 을 추가하는 방법에 대해 알아보겠습니다. Mui Dialog Component Open full-screen dialog Sound save  MUI Full Dialog 예시는 다음과 같습니다. 위 코드 활용 시에 기본적으로 화살표 방향키 스크롤이 작동하지 않습니다. PgUp, Pg..