Dev Diary 💻

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 */ background-pos..

Intro 안녕하세요. 이번 시간에는 React useForm 라이브러리에 대해 간단히 정리해보려고 합니다. React mui 템플릿을 살펴보던 도중 useForm 라이브러리를 사용하는 부분을 처음 발견했거든요! :) UseForm? useForm은 React에서 Form 관리를 간편하게 할 수 있도록 도와주는 라이브러리 중 하나입니다. React Hooks를 기반으로 동작합니다. useForm을 사용하면 상태 관리와 유효성 검사 등의 복잡한 폼 관련 작업을 간소화할 수 있어 개발자들이 폼을 더 빠르고 쉽게 작성할 수 있습니다. 이는 개발 생산성을 높이고 코드의 유지보수성을 향상시킵니다. UseForm's function Form 상태 관리 : 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, PgDn 버튼도 마찬가지고요. How to solve problem Modal title DialoContent 태그에 tabIndex={0} 속성을 추가하면 화살키 표를 통해 up & down 스크롤을 실행시킬 수 있습니다. PgUp, PgDn 버튼도 잘 작동하고요. Conclusion ..

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

Intro 안녕하세요. 빈스톡 배포 환경 구성 중 다음과 같은 에러가 발생하였습니다. The EC2 instances failed to communicate with AWS Elastic Beanstalk, either because of configuration problems with the VPC or a failed EC2 instance. Check your VPC configuration and try launching the environment again. Why? 구글링을 해보니 인스턴스 설정 중 퍼블릭 IP 주소 할당에 체크하지 않으면 다음 에러가 발생할 수 있다고 합니다. How to solve the problem 위 화면과 같이 퍼블릭 IP 주소 > 활성화됨에 체크를 하면 해당 에..

Problem Description 머쓱이네 피자가게는 피자를 여섯 조각으로 잘라 줍니다. 피자를 나눠먹을 사람의 수 n이 매개변수로 주어질 때, n명이 주문한 피자를 남기지 않고 모두 같은 수의 피자 조각을 먹어야 한다면 최소 몇 판을 시켜야 하는지를 return 하도록 solution 함수를 완성해보세요. Restrictions. 1 ≤ n ≤ 100 Input/Output Example 입출력 예 #1 6명이 모두 같은 양을 먹기 위해 한 판을 시켜야 피자가 6조각으로 모두 한 조각씩 먹을 수 있습니다. 입출력 예 #2 10명이 모두 같은 양을 먹기 위해 최소 5판을 시켜야 피자가 30조각으로 모두 세 조각씩 먹을 수 있습니다. 입출력 예 #3 4명이 모두 같은 양을 먹기 위해 최소 2판을 시키면 ..