작심삼일 개발이야기

5장. 형식 맞추기 5장은 코드를 조금 더 깔끔하게? 보이게 하는 법을 적어놓은 것 같다. 형식을 맞추는 코드 코드 형식 -> 의사소통의 일환 -> 의사소통은 개발자의 일차적 의무 유지보수의 용이성과 확장성을 위해 가독성이 좋은 코드를 작성해야 한다. 적절한 행 길이를 유지하라 긴 코드를 보는 것보다 짧은 코드를 보는 것이 이해하기 쉽다. 개념은 빈 행으로 분리하라 빈 행을 사용함으로써 개념적으로 분리되어있는 것을 표현할 수 있다. 세로 밀집도 서로 밀접한 코드는 세로로 가까이 놓아야 한다. 수직 거리 변수는 사용하는 위치에서 가장 가까지 선언한다. 종속 함수 한 함수가 다른 함수를 호출한다면 두 함수는 세로로 가까이 배치한다. 가능하다면 호출하는 함수를 호출되는 함수보다 먼저 배치한다 (?) 이 구절은..

4장. 주석 4장의 포인트 주석이 과연 좋을까? 솔직히 소제목만 읽어도 4장을 다 읽은 거나 다름이 없다. 주석은 나쁜 코드를 보완하지 못한다 주석 대신 코드를 사용해서 의도를 충분히 전달 가능하다. 주석을 달아야겠다는 것은 코드를 정리하라는 신호이다. 코드로 의도를 표현하라! 주석을 사용할 것이면 주석 대신 함수로 표현해라 예를 들어 긴 계산식을 적어놓고 주석을 달지 말고 함수로 만들어서 함수명으로 알아보기 쉽게 해라 좋은 주석 법적인 주석 정보를 제공하는 주석 의도를 설명하는 주석 의미를 명료하게 밝히는 주석 결과를 경고하는 주석 TODO 주석 중요성을 강조하는 주석 가장 와닿는 주석은 TODO 주석이다. TODO 주석을 위한 extenstion도 설치했었다. 하지만 TODO주석도 주석이므로 주기적으..

3장. 함수 3장의 포인트 함수를 잘 작성하는 법 작게 만들어라! 함수는 무조건 작게 만들어라 중첩 구조는 피해라 ( 중첩 구조가 생길 만큼 함수가 커져서는 안 된다 ) 함수는 짧게 만들수록 좋다 한 가지만 해라! 함수는 한 가지의 일만 해야 하며 그 한 가지를 잘해야 한다 함수 내에서 의미 있는 이름으로 추출이 된다면 여러 작업을 하는 것이다 서술적인 이름을 사용하라! 함수의 이름은 길고 서술적인 이름을 사용해라 함수가 하는 일을 잘 표현하는 이름을 사용해라 함수가 작을수록 서술적인 이름 짓기가 쉽다 이름을 정하느라 많은 시간을 들여도 좋으니 많이 고민해라 함수 인수 제일 좋은 인수의 개수는 0개이다 (상상에나 존재할 듯...) 1개~2개는 적당하나 3개 이상은 최대한 피해라 3개 이상으로 인수를 사용..

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 값을 사용하게 되면 해당 객체에 포함이 된다. )