dolog

서두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 패킷 포워딩을 ..

목차AWS 계정 생성과 IAM 사용자 생성EC2 인스턴스 생성AWS 계정 생성하기단순히 AWS 계정을 만드는 것에서 그치는 것이 아닌 IAM을 이용하여 보안까지 신경써봅시다.IAM을 사용한 이유는 아래 블로그를 참고했습니다.https://velog.io/@amphi/AWS-IAM-%EC%96%B8%EC%A0%9C-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C AWS IAM, 언제 어떻게 사용할까?시리즈의 첫번째는 AWS IAM 서비스이다. 아마 AWS에 처음 가입 후 가장 먼저 만져야할 서비스가 아닐까싶다. AWS에서도 권장하는 기본 원칙은, root 계정 사용을 자제하고 IAM user를 생성하여 최소한의velog.io AWS의 IA..

AWS EC2가 무엇인가?Elastic Compute Cloud의 약자로 아마존 웹 서비스(AWS)의 클라우드 컴퓨팅 플랫폼에서 가상의 컴퓨터를 빌려주는 거라고 생각하시면 됩니다. C가 두 개라 EC2 입니다. 😁 여기서 클라우드 컴퓨팅(cloud computing)이란 IT 자원을 인터넷을 통해 소비자에게 바로 제공하는 온디멘드(on-demand) 방식으로 진행되며 사용한 만큼만 비용을 지불하면 되는 서비스를 말합니다.클라우드 컴퓨팅은 리소스를 빠르게 구동하고, 배포하는 등 민첩성이 뛰어나고, 성능 및 용량을 원하는대로 조절할 수 있는 탄력성을 가지고 있으며 사용한 만큼만 지불할 수 있는 특징과 몇 분만에 전 세계에 배포할 수 있는 등 큰 이점들이 존재합니다. EC2를 언제 사용하는가?EC2를 사용하..

Firebase란 무엇인가?모바일 앱 또는 웹 앱, 게임에 대한 개발 플랫폼입니다. 쉽게 말해서 앱을 만들기 위한 도구인 셈이죠.웹 앱 개발을 예를 들면, 보통 클라이언트와 서버, 데이터베이스(3-tier architecture)로 앱을 개발하는데 특히 서버에서 개발하는 인증이나 데이터베이스, API 등을 파이어베이스를 이용해서 손쉽게 만들 수 있습니다.(사실 이미 만들어져 있는데 가져다 쓰는거죠!)전통적으로는 클라이언트에서 서버에 요청을 보내 서버에서 그에 맞는 데이터를 데이터베이스에서 찾아 보내주는 방식이지만, Firebase를 사용하면 클라이언트에서 요구한 데이터를 백엔드의 작업을 건너뛰고 바로 클라이언트로 받아올 수 있는 것이죠.그래서 보통 Firebase를 서버리스(serverless)라고 부릅..

서두로그인과 회원가입을 구현할 때 React Hook Form을 사용해서 구현했다.그 중 watch 메서드를 사용해서 입력값을 받았는데 그 이유는 유효성 검사를 통과하지 못한 input에 실시간으로 에러 메시지를 띄워주기 위해서였다.특히 비밀번호를 확인하는 부분에서 이미 적은 비밀번호와 비교하기 위해 watch의 역할이 필요했는데 결과적으로 잘 구현했지만 watch는 리렌더링을 일으키기 때문에 성능 문제가 생길 수 있다는 점을 놓쳤었다.물론 현재 서비스에서 해당 부분에 눈에 띄게 안좋은 성능 이슈가 보이지는 않지만 리렌더를 자주 발생시키는 것은 안좋다고 생각하므로 고쳐보도록 하겠다. watch vs useWatchReact Hook Form의 watch 공식문서를 보면 아래와 같이 나와있다...