책 정보를 수정하는 API를 작성하던 중 문제를 마주했다. 책 정보를 update하기 위해서 해당하는 책 정보와 그 책과 관계를 맺는 Quotes 정보를 함께 업데이트할 필요가 있었다. 단일 책 정보만을 업데이트 하는 건 간단하지만 매핑 되어 있는 인용문을 함께 업데이트 하려다 보니 난관에 부딪혔다. 천천히 문제를 해결해보자. 1. 문제 이해 const updatedBook = await prisma.book.update({ where: { id: id, }, data: { genreId: genreId, title: title, description: description, publisher: publisher, author: authors, thumbnailUrl: thumbnailUrl, quote..
풀스택 프로젝트 개발을 위해 Prisma ORM과 Database로 MongoDB를 채택하여 사용했다. Book 모델에서 랜덤한 데이터를 받아오기 위해 조사를 하였다. 21년 2월 prisma 깃헙 질문으로 올라온 글을 살펴보았다. (링크) 해당 글에선 다양한 답변이 있었기에 몇 개 살펴보자. const productsCount = await prisma.product.count(); const skip = Math.floor(Math.random() * productsCount); return await prisma.product.findMany({ take: 5, skip: skip, orderBy: { sellingCount: 'desc', }, }); skip을 이용해서 데이터들을 랜덤으로 스킵하..
프로젝트 중 무한 스크롤을 구현하게 되었다. useRef를 사용하여 컨테이너 요소의 scrollTop, scrollHeight, clientHeight 값을 받아서 구현했다. 브라우저 호환성 문제, 요소의 높이를 부적절하게 구하는 등에 의해서 무한 스크롤이 멈추거나 작동하지 않는 경우가 있었고 단시간에 수백번 호출이 되며 동기적으로 실행되었다. 또한, 각 엘리먼트 마다 이벤트가 등록되어 있는 경우, 사용자가 스크롤할 때마다 이벤트가 끊임없이 호출되기 때문에 몇배로 성능 문제가 발생한다는 것을 알 수 있었다. 일단 기존에 작성한 코드를 한번 살펴보자. useEffect(() => { setItems([...places]); }, [places]); const handleScroll = () => { if ..
이력 홈페이지를 개발하던 중 친구에게 코멘트를 달아주기를 부탁하였고, 그 내용 중 여러 개의 명언이 슬라이드 되었으면 좋겠다는 조언(?)을 주었다!! 너무 고마웠고 이거 내가 직접 구현할 수 있겠는데? 라고 생각했다. 라이브러리를 사용하면 빠르게 구현할 수 있겠지만, 직접 구현해 보기로 한다. 1. 기능 나열 1. 매초마다 자동으로 슬라이드 된다. 2. 마지막에 도달하면 처음으로 돌아온다. Banner에서 감명 깊었던 명언들을 자동 슬라이드 시킬 예정이라 네비게이션, 이전, 다음 버튼은 따로 구현하지 않는다. 추후에 요일에 따라 다른 명언들이 슬라이드 되도록 기능을 추가하면 재밌을 것 같다. 2. 리스트 Mock 데이터 [ { id: 1, quote: "사람들이 꿈을 이루지 못하는 한 가지 이유는 그들이..
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component 에러를 살펴보면 정의되지 않은 값(undefined)에서 정의된 값으로 변경되는 요소이기에 해당 에러가 발생할 수 있으며, 그런 일이 발생해서는 안된다는 이야기를 하고 있는 듯 하다. input의 value가 뭐라도 있어..
코드 자체의 문제..라기 보다 영상 파일 자체에 문제가 있었다. 태그에 controls속성을 부과하여 영상의 문제인 것을 파악했다. 오디오만 나오고 영상이 출력되지 않았다. 비디오 파일을 읽기위해 file-loader를 이용하였으며 wepack설정과 js에서 video태그를 추가한 부분만 다시 한번 살펴보자. module: { rules: [ { test: /\.s?css$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }, { test: /\.mp4$/, use: [ { loader: 'file-loader', options: { name: "[name].[ext]", outputPath: "video" } } ] } ] } file-loader를 사..
eslint와 prettier사용 중 이러한 에러가 발생하였다. 구글링을 통하여 알아보니 .eslintrc.json에 "useTabs": false를 추가해 해결하였다. "rules": { "prettier/prettier": "error", "useTabs": false }
document.addEventListener("keydown", (event) => { // 모든 한글 조합에 대한 정규식 /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/ console.log(event); console.log(event.key, /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(event.key)); this.#keyboardEl .querySelector(`[data-code=${event.code}]`) ?.classList.add("active"); }); consolo.log로 event를 찍어서 a와 ㅁ을 찍어보았다. a는 아래와 같이 key과 keyCode값이 문제없이 출력되었다. 하지만 ㅁ을 입력했을 때는 key값으로 "Process"가 오고 모든 한글의 keyCode가 229로 출력되었다. 왜 이런 ..
