dolog

provider의 역할provider라는 단어 그대로 상태를 제공해주는 역할을 한다context의 역할context는 컴포넌트 트리에서 특정 컴포넌트가 “어떤 상황”에서 필요한 정보를 제공받는 역할을 해줌 즉, 조명 컨트롤러에서 Provider는 Lamp와 LampController에게 각각 필요한 상태와 함수를 제공해주고 있음 createContext는 provider, consumer를 반환한다 (Legay)consumer는 무엇일까?useContext를 쓰기 전 context를 제공받기 위한 방식이였음 컴포넌트 합성 -> 예를 들어 상태 하나만 props로 넘기지 말고, 컴포넌트 자체를 props로 넘겨버리기 참고1. https://ko.legacy.reactjs.org/docs/context.ht..

1. 연결되어 있는 원격 저장소가 있는지 확인git remote 2. 아무것도 뜨는 정보가 없다면 원격 레포지토리 추가해주기git remote add origin  3. 제대로 연결됐는지 git remote로 확인해주기 참고로 연결할 레포지토리 주소는 해당 레포지토리에서 가져올 수 있습니다

먼저 애플의 M 시리즈가 탑재된 노트북을 사용하고 계신다면 x86로 작성된 라이브러리를 컴파일 하기위해서 터미널 정보 가져오기를 누른 후 Rosetta를 사용하여 열기에 체크를 하시고 사용하시길 바랍니다. 회사 프로젝트에서 npm install을 시도했을 때 에러가 났습니다.프로젝트에서 사용하는 node 버전이 10.19.0이고, 에러는 node의 버전이 낮은 것과 python 관련 에러였습니다.AttributeError: module 'collections' has no attribute 'MutableSet' 해당 에러를 해결하기 위해선 python 3.x 버전이 설치가 되어 있어야 했고, 해당 버전으로 python에 링크되어야 했습니다.그리고 설치 후 반드시 버전을 확인하시고, 제대로 링크되어 있지..

Next.js를 고른 이유 해당 프로젝트에서 nextjs를 사용했던 이유는 딱 두 가지입니다.첫 째로 npm trends, youtube 등 다양한 커뮤니티에서 인기있는 react기반의 프레임워크이기 때문입니다.둘 째로 react보다 더 편리하지만 강력한 기능들이 탑재되어 있기 때문입니다.(App Routing, React Server Component...) 이 프로젝트에 이렇게 사용해보자1. App Routing과 Private Folder- 기존 React에서 따로 react-router-dom을 설치하고 세팅하는 번거러움을 피하고 app 폴더 안에서 편리하고 명시적으로 라우팅을 하자- Private Folder를 적극적으로 사용하여 도메인 단위로 폴더를 구조화하여 파일을 찾기 위한 불필요한 스크롤..

1. data컴포넌트 상태 관리 함수data 안에 컴포넌트의 초기 상태를 정의하고 데이터가 변경되면 반응형 시스템이 자동으로 감지하고 업데이트한다.React에서 useState를 사용하는 것과 비슷하지만, react에서는 setState를 사용해서 명시적으로 업데이트 해주어야 함.  2. createddata, computed, method, watch가 설정된 후 호출되는 함수컴포넌트 인스턴스가 생성된 후 호출되지만, DOM이 완전히 마운트되기 전에 호출된다.(= DOM에 접근 불가)즉, created는 초기 데이터 설정, 데이터 패치, 비동기 작업에 유용하다.  3. watchdata 또는 computed를 통해 선언된 속성을 감시함주로 비동기 작업을 수행하거나 훨씬 더 복잡한 계산 로직을 처리할 때..

서두기존 Next.js로 만들던 프로젝트를 Nuxt로 마이그레이션 하는 도중 상태관리 관련 이슈를 만났습니다.큰 이슈는 아니지만 공식문서에서 찾아보지 않고, GPT와 블로그를 따라했던 저를 반성하며... 어떤 실수를 했고, 어떻게 고쳤는지 적어보겠습니다. 본문먼저 제가 실수했던 부분은 store 폴더를 살펴볼 생각을 안하고 구글에 'Vue 상태관리', 'Nuxt 상태관리'를 검색하고, 라이브러리를 설치하는 블로그만 찾아봤습니다. 그러고 Vuex가 많이 사용된다는 글을 보고 무작정 설치부터 했습니다.당연히 설치되겠지 했지만 npm install을 하면 에러가 났습니다.(여기서 멈췄어야 했는데...)Nuxt2여서 다운그레이드 해야하나? 라는 생각과 함께 GPT에게 물어봤습니다. 나: npm install 하..

문제 상황cron.schedule 외부에서 한 connection 연결로 인해 매번 새로운 연결을 하다 보니 병목 현상이 발생했다.이로 인해 요청 시 pending 상태가 길어지고, 심하면 timeout까지 가는 이슈가 생겼다. 문제 해결cron.schedule 내부로 connection 이동해서 연결 재사용으로 병목 현상 해결const cronScheduler = async () => { cron.schedule('*/5 * * * *', async () => { // cron.schedule 내부에서 연결 const connection = await promisePool.getConnection(); const updateMarketDetailQuery = 'UPDATE Coin SET..

서두현재 만들고 있는 암호화폐 거래 사이트에서 코인 회사 정보를 더미 데이터로 DB에 넣어서 사용했는데 조금 더 실제 사이트처럼 만들고 싶어서 CoinMarketCap API를 이용하여 실제 코인 회사 정보를 받아오게 했습니다. 어떻게 개선했는지 소개하겠습니다. 😃 본문기존 코인 데이터의 테이블 10개의 더미 데이터를 DB에 저장하여 간단하게 데이터만 응답해주는 방식으로 구현을 했었습니다.그러나 구현하고 싶었던 무한스크롤과 변동이 잦은 데이터를 어떻게 업데이트하고 저장할지 등 도전해보고 싶었던 부분들이 존재했습니다. 결론적으로 CoinMarketCap API를 활용해서 데이터를 DB에 저장하고, Node Cron으로 5분마다 갱신된 데이터를 받아올 수 있었으며, 페이징(paging)까지 구현하여 무한스..