Dev Diary 💻

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

Intro 안녕하세요. 이번 시간에는 git submodule / subtree 에 대해 알아보겠습니다. submodule # Goal 하나 이상의 외부 저장소 (git 저장소)를 현재 프로젝트에 포함시키기 위해 사용합니다. # How to work 부모 저장소(repository)는 서브모듈이라 불리는 별도의 저장소를 가리키는 링크만을 유지하고 있습니다. 이 저장소는 자체적으로 독립적인 Git 저장소로서 관리되며, 부모 저장소에는 해당 서브모듈의 상태(커밋 해시)만을 기록합니다. # Usage 서브모듈 추가: git submodule add 부모 저장소에서 서브모듈 업데이트: git submodule update --init --recursive subtree # Goal 외부 저장소의 일부 또는 전체..

Intro 안녕하세요. beanstalk 빈스톡을 사용하여 배포 환경을 구성하던 도중 아래의 에러가 발생했습니다. healthd.conf not foud [ERROR] An error occurred during execution of command [app-deploy] - [start proxy with new configuration]. Stop running the command. Error: copy proxy conf from staging failed with error validate nginx configuration failed with error Command /bin/sh -c /usr/sbin/nginx -t -c /var/proxy/staging/nginx/nginx.conf f..