본문 바로가기

분류 전체보기

 (49)
[MongoDB] 몽고DB에서 Join을 해보자 - $lookup으로 Join하기, MongoDB Join 예제 NOSql인 MongoDB는 Join을 지원하지 않는다. 하지만, MongoDB 3.2 버전부터는 Join과 비슷한 역할을 하는 '$lookup'을 지원하고 있다. MongoDB의 Aggregation에서 사용할 수 있는 '$lookup'으로 컬렉션끼리 Join하는 방법을 알아보자. Products 컬렉션 db.products.insert([ {"_id" : objectId('111111111111'), "title" : "책제목1", "category" : '시'}, {"_id" : objectId('222222222222'), "title" : "책제목2", "category" : '소설'}, {"_id" : objectId('333333333333'), "title" : "책제목3", "catego..
[JS] async/await 사용 시 Promise { <pending> } 이 뜨는 이유 ? Promise의 상태, Promise 메서드, Promise.all / Promise.race / Promise.allSettled 재고를 확인하고 싶은 상품들의 ID값을 배열로 받아 map 함수를 돌며 DB를 확인해, 재고가 부족한 상품이 있을 경우 해당 상품을 return 해주는 기능을 구현하고 있었다. 문제 상황 async/await 함수를 이용해 map함수가 전부 실행된 후에 outOfStockList를 response 해주는 로직이다. const checkCountOfStock = async (req, res) => { try { const outOfStockList = await req.body.map(async (product) => { const outOfStock = await Product.findOne({ _id: product.productId, countInStock: { $lt: product.countOfO..
[React] useRef로 transition이 동적으로 적용되지 않는 문제 해결 추천 책 리스트를 보여주는 무한 캐러셀을 만들던 중 transition 관련 문제가 발생했다. 설명을 위해 필요한 대략적인 컴포넌트 구조는 아래와 같다. const BookCarousel = () => { return ( ... ) }; export default BookCarousel; BookCarousel에서 무한 캐러셀을 구현하기 위해 마지막 페이지에서 index값을 변경시켜주는데, 이 때는 transiton 효과를 없애야 유저에게 무한으로 캐러셀이 넘어가는 느낌을 준다. (자세한 무한 캐러셀 구현 방식은 나중에 포스팅할 예정이다) BookImageList가 이동하면서 그 하위에 있는 Cover 컴포넌트의 scale사이즈도 변경되는데 여기에도 transition을 적용시켜놓았기 때문에 BookIm..
[React] Can't perform a React state update on an unmounted component. 에러 해결 Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 위 에러는 컴포넌트가 언마운트 되어 사용할 수 없는데도 해당 컴포넌트의 state를 바꾸려고 했을 때 나타나는 에러다. 에러 메시지를 잘 읽어보면, 아무 실행도 되진 않겠지만, 어플리케이션의 메모리 누수가 발생할 수 있으니 useEffect의 cleanup 함수에 구독과 비동기 작업을 모두 취소하는 방식으로 고칠 수 ..
[css] rotate3d를 하면 z-index가 적용되지 않을 때, roatate3d와 z-index 충돌 에러 해결 현재 진행 중인 프로젝트에 rotate3d를 이용해 책을 입체적으로 회전시키는 기능을 추가했다. 개발하는 동안 크롬 개발자 도구에서 확인했을 때는 별다른 문제가 없었는데, 배포한 후 모바일 화면으로 회전 기능을 실행해보니 아래와 같은 문제가 발견되었다. 책이 rotate3d로 회전하면서 Header 영역을 뚫고 나오는 문제였다. 혹시나 하고 책이 회전하는 동안 사이드 메뉴도 눌러봤더니, 역시나 책이 SideDrawer 영역을 뚫고 나왔다. 해결방법 1 ( X ) 처음엔 z-index를 이용해 해결해보기로 하고, Header의 Navbar 컴포넌트와 SideDrawer 컴포넌트에 엄청나게 큰 z-index 값을, 회전하는 책 컴포넌트에는 z-index 값을 1로 적용시켜보았다. 그래도 책 컴포넌트가 Hea..
[React] react-router history.push 해도 url만 바뀌고, 새로고침은 안 되는 문제 해결하기 현재 개발중인 프로젝트에서 history.push 로 url을 이동했는데도 페이지가 refresh 되지 않는 오류를 겪었다. 현재 경로 '/product/과학/' 에서 왼쪽 메뉴의 다른 카테고리 버튼을 눌러 '/product/${이동할 카테고리}' 경로로 이동하는 방식이다. import { useHistory } from "react-router-dom"; const menuClickHandler = (category) => { history.push(`/product/${category}`); }; history.push로 이동하는 위 함수를 카테고리 메뉴 아이템의 onClickHandler로 지정해두었다. import React, { useEffect } from "react"; import { us..
[Heroku] 헤로쿠로 Node.js 웹사이트 배포하기, 설치부터 배포까지 헤로쿠 사용법 1. heroku에 가서 계정 생성 https://www.heroku.com Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud. www.heroku.com 2. heroku CLI 설치 https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up Getting Started on Heroku with Node.js | Heroku Dev Center This tutorial will have you..
[GitHub] 아직 코드리뷰가 익숙하지 않은 분들을 위한... 코드리뷰는 어떻게 해야할까? (+ GitHub에서 PR로 코드리뷰 하는 법 ) 최근 약 한 달 전부터 넥스트스텝의 '블랙커피' 스터디에 참여하며 매주 스터디원들과 함께 상호 코드리뷰를 하고 있다. 스터디를 시작하기 전까지는 코드리뷰를 받아보기만 했고, 직접 리뷰를 해본 경험은 없었어서 처음엔 내가 코드리뷰를 한다는 것 자체가 낯설기도 하고, 막막하기까지 했었다. 하지만 매주 코드리뷰를 반복적으로 진행하다 보니 어느덧 지금은 처음보다 코드리뷰가 훨씬 익숙해지게 되었다. 아직은 많이 부족하지만, 코드리뷰를 많이 해보지 않은 분, 코드리뷰가 처음인 분들에게 나의 경험이 조금이나마 도움이 되길 바라며 코드리뷰에 대해 간단히 포스팅해본다. 코드리뷰? 코드리뷰는 간단히 말해 상대방의 코드를 검토해보고 피드백을 남겨주는 것이다. 여러 서비스 기업에서 이미 코드리뷰의 장점을 알아 코드리뷰 문화가..
[Git] 다른 사람의 pr을 로컬에서 확인하는 법, pull request 가져오기 코드리뷰를 하다보면 다른 사람의 pull request를 로컬로 가져와 실행해볼 때가 있다. 다른 사람의 pr을 로컬에서 확인하려면 아래처럼 실행하면 된다. $ git clone ${ 저장소 주소 } $ cd ${ 저장소 이름 } $ git config --add remote.origin.fetch "+refs/pull/*/head:refs/remotes/origin/pr/*" $ git fetch origin $ git checkout -t origin/pr/${ 가져오고 싶은 pr 번호 } 예시 ) js-calculator라는 저장소의 pr 7번을 가져오기 $ git clone https://github.com/hyewon3938/js-calculator.git $ cd js-calculator $ ..
[Git] 커밋을 해도 잔디가 안 심어질 때, fork한 repository의 커밋으로도 잔디를 심어보자, 저장소의 커밋 기록까지 전부 복사해오기 ! 열심히 개발한 날엔 왠지 잔디를 한 번씩 확인해보게 된다. 잔디 심기에 푹 빠져있는 건 아니지만 그래도 채워져 있는 잔디를 보면 기분이 좋아지니까 말이다. 하지만 최근 스터디를 하면서 꽤나 열심히 커밋을 해왔는데, 잔디가 채워지지 않았길래 알아보니. 나의 repository의 커밋은 반영되지만, fork 한 repository에서의 커밋은 잔디에 적용되지 않는다고 한다. 왠지 억울하니 지금까지의 수고를 보상받기 위해 fork 한 repository의 커밋으로도 잔디를 심을 수 있는 방법을 알아보자 fork 한 repository를 새로운 repository에 복사해오는 방법 ※ fork했던 'js-calculator'라는 저장소의 커밋까지 전부 'javascript-calculator'라는 개인 저장소로..
728x90
반응형

티스토리툴바