dolog

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를 통해 선언된 속성을 감시함주로 비동기 작업을 수행하거나 훨씬 더 복잡한 계산 로직을 처리할 때..

문제 상황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)까지 구현하여 무한스..

서두React Query가 정확히 어떤 라이브러리인지, 어떤 상황에서 사용해야 하는지 등 잘 모르고 잘못 사용했던 경험으로 인해 '굳이 사용해야 할까?' 라는 의문을 가지고 있었습니다.하지만 현재 개인 프로젝트를 하면서 왜 React Query를 사용해야 하는지, 또 기존에 어떻게 잘못 사용했는지와 비효율적으로 비동기 상태를 관리했는지에 대해 개선한 경험을 적어보려합니다. 본문먼저 React Query가 관여하는 부분은 queryFn의 실행 결과로 fulfilled 혹은 rejected 상태인 promise 객체가 반환된 이후입니다.즉 비동기 요청을 관리해주는 라이브러리가 아닌 비동기 상태를 관리해주는 라이브러리인거죠. 저는 주로 프로필 데이터 등 넓은 영역에서 사용하는 상태를 전역 상태로 두어 사용했었..

목차mysql과 async ・ awaitmysql vs mysql2row를 배열 구조 분해 할당하는데 안되었던 이유와 해결 방법(feat. interface)createConnection()에서 createPool()로 바꾼 이유비동기와 동기비동기의 삼총사 : callback, Promise, async ・ await mysql과 async ・ await 기존 코드를 먼저 보여드리자면, 회원가입 로직에서 이미 존재하는 유저가 있는지 확인하는 query에 존재하는 유저가 없을 때 계정을 추가해 주는 query를 콜백함수로 넘겨주었습니다. import { Request, Response } from 'express';import { connection } from '../..';export const cre..

목표MySQL은 무엇이고 왜 사용하는가macOS Big Sur(할아버지 맥북)에 MySQL 설치하기MySQL에 테이블 만들기MySQL은 무엇이고 왜 사용하는가MySQL이란?전 세계에서 가장 인기 있는 오픈소스 관계형 데이터베이스 관리 시스템(RDBMS) 중 하나입니다.관계형 데이터베이스란?MySQL을 만든 Oracle에서 정의한 관계형 데이터베이스는 서로 관련된 데이터 지점에 대한 접근을 저장하고 제공하는 데이터베이스 유형을 말합니다.예를 들어 고객 정보 테이블과 고객 주문 테이블이 있다고 가정했을 때 두 테이블의 공통된 속성이 ID라면 이 속성을 사용하여 관계를 맺을 수 있는 것이고 이를 관계형 데이터베이스라고 봅니다.MySQL을 사용하는 이유는?첫째로 20년 이상 꾸준한 지원을 받아온 오픈소스로 무료..

목표EC2와 SSH로 접속하기좀 더 쉽게 접근하기 위한 설정EC2와 SSH로 접속하기연결하기 전 SSH에 대해 알아봅시다. SSH은 Secure SHell의 약자로 네트워크 보안 도구 중 하나로 안전한 접속과 통신을 제공하는 프로토콜입니다. 특히 원격 접속을 안전하게 할 수 있어 많이 사용합니다.이름에 Secure가 들어가는 만큼 다른 프로토콜보다 강력한 인증과 신뢰성을 보장하기 때문에 Github에서도 2021년부터 SSH 키를 사용한 인증 방식을 채택하였습니다. SSH의 주요 기능은보안 접속을 위한 telnet, ftp, rsh 등 프로토콜을 제공합니다.IP 위/변조 기법 중 하나인 스푸핑(spoofing)을 방지하기 위한 기능을 제공합니다.X11 패킷 포워딩 및 일반적인 TCP/IP 패킷 포워딩을 ..