작심삼일 개발이야기

Form submission canceled because the form is not connected form안에서 submit용으로 버튼을 사용하지 않으니 위와 같은 경고가 발생했다. button의 기본 타입은 submit이어서 button용도로 사용하려면 type을 button으로 명시해줘야 한다. (button에 type="button"을 사용하는 이유) button에 type="button"을 사용하는 이유 다른 사람의 코드를 읽다 보니 을 본 적이 있다. 한 번도 button에 type을 사용해본 적이 없던 나로서는 뭘까 싶었다. 솔직히 아무 문제없이 잘 사용하고 있어서 별로 관심이 없었던 것도 있다. button choisuhyeok.tistory.com 해결방법 1 버튼 해당 버튼에게 t..

react-draggable 라이브러리를 사용하다 warning 발견 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode. Instead, add a ref directly to the element you want to reference. react-draggable에서는 아래와 같이 말하고 있다. If running in React Strict mode, ReactDOM.findDOMNode() is deprecated. Unfortunately, in order for to work properly, we need raw ..

개발을 하다 보면 한글은 같은 단어인데 영어로는 여러 단어를 쓸 때가 있다. 물론 상황에 맞는 단어를 사용하는 것이 제일 좋지만 그렇지 않으면 한 단어를 선택해서 사용하는 것이 좋다. 가장 헷갈리는 상황이 수정할 때 사용하는 단어인데 modify, edit, update 3가지를 혼동해서 사용하고 있었다. 먼저 사전적(네이버사전) 의미를 살펴보자 1. modify (더 알맞도록) 수정[변경]하다. 바꾸다 (정도가 덜하도록) 수정[조정]하다 (형용사, 부사 등이 다른 어구를) 수식하다, (어구의 의미를) 한정하다 2. edit (글 등을 발간할 수 있게) 수정[가필]하다 (책을) 편집하다 (화면의 자료를) 편집하다 3.update (현대화된 부품 등으로) 갱신하다 가장 최근의 정보를 알려주다[덧붙이다] m..

클린 코드라는 책으로 독서 스터디를 진행하게 되었다. 사실 먼저 읽었는데 또다시 읽어보면 뭔가 다르지 않을까 해서 클린 코드에 찬성했다. 1장은 정신이 없어서 기록을 따로 못했지만 2장부터는 조금이라도 기록해두려고 한다. 4명이서 진행하며 아래에 깃허브링크 공유할게요 하하 (Contributors 순서대로...) Repo (https://github.com/undefined-study) 예인님 (https://github.com/ahnanne) 지수님 (https://github.com/2jisu) 병호님 (https://github.com/youthfulhps) 본인 (https://github.com/choisuhyeok1255) 정리를 제대로 하지 못해서 오늘은 구분 없이 공통적으로 작성합니다. 다..

라이브러리 없이 Form을 만들고 돌아보니 코드 양이 어마어마하다... React Hook Form을 사용해서 조금 더 쉽게 Form을 만들어보고 싶어서 도전! 아직 공부하며 사용 중이라 완벽하게 마스터하지는 못했지만 아는 것만 정리해보려 한다. 설치 npm install react-hook-form 사용법 const { register, handleSubmit, watch, formState: { errors } } = useForm(); register 유효성 검사에 사용할 요소를 register를 이용해서 연결한다. register에 사용할 수 있는 유효성 검사 목록은 아래와 같다. required (필수 값) min (최소 값) max (최대 값) minLength (값의 최소 길이) maxLen..

const router = useRouter(); console.log(router); 단 2줄로 에러가 발생했다. console.log가 안된다 ㅋㅋㅋ const router = useRouter(); console.log("", router); console.log 첫 번째 인자로 빈 문자열을 넣어서 해결 가능하다. 해결해주겠지...

Next.js를 사용하면서 현재 url 경로가 필요할 때 react와 동일하게 react-router-dom에 있는 useLocation을 사용해서 찾으려고 했다. 결과는 실패 ㅋㅋㅋ Next.js에서 현재 url을 알고 싶을 땐 useRouter를 사용해야한다. import { useRouter } from 'next/router' function Example() { const router = useRouter(); console.log(router); } pathname: 현재 경로 query: 동적 경로 ( :id 값을 사용하게 되면 해당 객체에 포함이 된다. )

px은 CSS에서 가장 기본적인 단위이다. px를 사용하여 크기를 설정하면 그 크기는 절댓값이 되어버린다. 하지만 웹 페이지 사이즈의 변동이 많아 크기가 고정되어 버리면 접근성에 안 좋아질 수 있다. 보통 웹 브라우저의 기본 폰트 사이즈는 16px로 설정되어 있으며 일부 웹 브라우저는 기본 폰트 사이즈를 확대하는 기능을 제공한다. 기본 폰트 사이즈를 확대 하더라도 px로 설정되어 있는 폰트 사이즈는 변함이 없다. (ctrl + 휠 키를 사용한 화면 확대는 화면 전체를 확대하는 것이라 가능하다.) rem을 사용하게 된다면 좋은 점 웹 브라우저 마다 다른 기본 폰트 사이즈에 대응할 수 있다. 저시력자 접근성에 대응할 수 있다. rem을 사용하게 된다면 html의 폰트 사이즈를 기준으로 폰트 사이즈를 계산하게..

배열을 sort 하려는데 에러 발생... 해결방법 [...배열].sort() 스프레드 문법을 이용해서 새로운 배열로 만들어준 다음에 sort를 했다... 꼭 스프레드 문법이 아니라 map같이 새로운 배열로 만들어 주는 것도 하나의 방법일 듯 아직 원인 파악을 하지 못했다. 아시는 분 알려주세요. read only property라서 그런가...

overflow: overlay라는 속성에 대해 새롭게 알게 되어서 다른 속성들까지 간단하게 정리해보았다. 기본 css 설정 이미지를 기준으로 설명하려고 한다. overflow속성을 따로 지정한 것은 없다. overflow: scroll 항상 스크롤바를 생성하기 때문에 내용의 변화에 따라 스크롤바를 생성하거나 사라지게 하지 않는다. 콘텐츠 내용이 지정한 크기보다 넘치지 않은 경우에도 위의 사진과 같이 무조건 스크롤이 생성되는 것을 확인할 수 있다. overflow: auto 컨텐츠가 요소 안에 들어간다면 visible과 같아 보이나 데스크톱 브라우저의 경우 콘텐츠가 넘칠 때 스크롤바를 생성한다. 같은 overflow: auto를 적용했는데 height의 값에 따라서 스크롤이 자동으로 생성되는 것을 확인할..