원두마켓

프로젝트에서 husky가 적용이 안되는 경우 해결법

0. 오류 메세지 husky precommit hook is not executed 1. 문제 : 프로젝트에서 husky가 적용이 안되고 커밋이 되고 있었다. 분명 yarn prepare 똑같이 실행시켰음에도, 다른 팀원들은 적용이 되었고 나는 안되는 상황이다. 왜 그런걸까? 문제 해결을 위해, 평소에 한국어로 사용하던 VS를 영어로 변경했다. 왜냐하면 한국어는 에러의 해결책이 잘 안나오기 때문이다. 앞으로도 영어로 쭉 사용할 예정이다. 에러 해결책을 빠르게 찾고 싶다면 영어 사용을 권장한다. 어떻게 설정하는지 모르겠으면, 맥북 기준 command + shift + p 를 누르면 된다. 다음과 같이 검색해서 ko => en으로 바꾸면 된다. 2. 적용이 안된 이유 : 디스크의 권한이 허가되지 않아 hus..

원두마켓

mongoose 에러 핸들링

Built-in Validator export const UserSchema = new Schema( { userId: { type: String, unique: true, required: true, match: /[a-z0-9_]{4,16}/, }, ... } ); mongoose Schema를 작성할 때, 각각의 field에 대해 validator를 지정할 수 있으며, 각각의 validator를 통과하지 못하면 에러를 발생시킨다. 이 때 Path `userId` is required가 오류 메시지이며, 이 오류 메시지를 Array Syntax로 간단하게 커스텀할 수 있다. export const UserSchema = new Schema( { userId: { type: String, unique:..

원두마켓

중간 커밋 병합하기

반복되는 commit이 두번 들어가게 되어서 해결해줘야하는 문제가 생겼다. 저기 첫번째커밋2를 병합하고 싶다 commit 병합 방법으로 rebase 를 이용하면 되는걸 발견 git rebase -i HEAD~4 git rebase -i 해당커밋ID^ 도 가능하다 예) git rebase -i ae86ec6^ 숫자 4은 최신 commit 부터 4개까지 출력해서 수정하겠다는 의미이다 여기서 병합하고 싶은 commit에 pick 을 s로 바꿔준다 위 작업까지 완료를 하면 병합될 commit 중 어떤 commit 명을 사용할껀지 정하라는 문구가 나온다 사용안할 commit 명에 #을 붙여주면 commit 이 완료되는걸 볼 수 있다 첫번째커밋에 첫번째커밋2에 있던 변경내용이 합쳐진 것도 확인할 수 있다

원두마켓

인터페이스 에러 - 사용할 곳에만 들어가도록 조심하자

공통 컴포넌트의 인터페이스를 함부로 수정하면 에러가 날 수 있다. 실수한 부분 : interface IButtonProps에 { disabled: boolean } 추가 IButtonProps에 추가한 disable props를 적었다. but IButtonProps를 가지도록 확장된 ITabbuttonProps와 IMenuButtonProps 에서는 disable이 적용되지 않는다. disable? 을 사용했지만, boolean | undefined 로 undefined를 가질 수 없다는 에러가 떴다. 사용하지 않는 곳에서 불필요한 에러가 뜨지 않도록 props 선언을 최대한 적게 하는 것이 중요하단 것을 깨달았다. 해결 방법 : interface ICustomButtonProps extends IBu..

원두마켓

Next.js에서 mongoose 연동해서 API 만들기

Next.js에서 API 만들기 Next.js에서 pages/api 디렉토리에서 파일/디렉토리 이름으로 API endpoint를 나타낼 수 있다. pages/api/user.ts export default function handler(req, res) { if (req.method === 'GET') { // GET 요청 처리 } else if (req.method === 'POST') { // POST 요청 처리 } } /user로 들어온 요청이 pages/api/user.ts에서 처리된다. next-connect 라이브러리를 사용하면 마치 Express.js에서처럼 미들웨어의 형태로 코드를 작성할 수 있다. import { NextApiRequest, NextApiResponse } from 'ne..

원두마켓

<input type="number" />에서 leading zero 제거하기

문제 에 키보드로 숫자를 입력하면 입력값 앞에 0이 남아있는 문제가 발생했다. 문제 코드 const [totalCount, setTotalCount] = useState(1); const changeCount = (e: ChangeEvent) => { const count = +e.currentTarget.value; if (count > 100) { return; } setTotalCount(count); }; return ( )원인 분석 & 시행착오 input의 속성 value의 자료형은 문자열이므로 "033"이 그대로 totalCount에 할당되는 게 원인일 거라 생각했다. 하지만 setTotalCount에 "033"를 넘겨줄 때 +연산자를 이용해 숫자 33으로 형변환해서 넣어주므로 앞자리에 0이 ..

팀 소개

팀 소개

팀명 : Wanna React 멤버 : 임준홍 , 김정민, 이춘구, 황나희