1️⃣ 이 책을 선택한 이유는?최근에 진행된 특강에서 Node.js를 메인으로 서버 개발을 하는 개발자를 만났고, 그 경험은 나에게 큰 영향을 주었다. 프론트엔드 개발자로서 백엔드 기술에 대한 이해는 선택이 아닌 필수가 되어가고 있다고 생각한다. 그리고 Node.js는 그 중심에서 매우 중요한 역할을 차지한다고 생각한다(프론트엔드 개발자라서 그렇게 생각하는 것일지도!). 그리고 다가오는 백엔드 개발자의 소통이 필요한 프로젝트에서 효율적인 소통을 위해, Node.js에 대한 기술을 이해하는게 중요하다 생각했고, 이 책을 결정했다.2️⃣ 책을 읽으며 느낀 점들접근성이 좋은 설명이지만, 추가적인 학습이 필요하다고 생각된다."업무에 활용하는 Node.js"는 초보자도 부담 없이 접근할 수 있도록 쓰여졌다. 쉬운..
1. refetch와 invalidate의 차이React Query에서 데이터 쿼리를 관리하는 두 가지 주요 방법은 refetch와 invalidate입니다. 이 둘은 쿼리 데이터를 갱신하는 방식에서 중요한 차이를 보입니다.refetch는 강제로 데이터를 다시 가져오는 동작을 수행합니다. 즉, 호출되면 조건과 상관없이 데이터를 서버로부터 새로 불러옵니다.반면, invalidate는 쿼리 데이터를 "stale"으로 표시하고, 이 쿼리를 관찰하는 컴포넌트가 마운트될 때 데이터를 다시 가져오도록 합니다. 이렇게 하면 불필요한 네트워크 요청을 줄일 수 있습니다.2. refetch의 특징refetch는 사용자가 명시적으로 쿼리를 다시 실행하고자 할 때 유용합니다. 예를 들어, 사용자가 데이터를 최신 상태로 갱신하..
“fetch” 모킹은 그만!이 글은 아래 원글 ‘Stop mocking fetch - Kent C. Dodds’ 의 내용을 번역한 글입니다.원글⬇️ Stop mocking fetchStay up to date Stay up to date All rights reserved © Kent C. Dodds 2024kentcdodds.com ❗️tl;dr - 옮긴이Fetch 모킹의 문제점중복되는 백엔드 구현: fetch를 모킹하면 테스트 곳곳에서 백엔드의 기능을 재구현해야 한다. 이는 중복 작업을 초래하고 테스트의 복잡성을 증가시킨다.테스트와 서버 코드의 분리: 클라이언트와 서버 사이의 상호작용을 모킹함으로써 실제 서버의 동작과 테스트가 분리되어, 테스트가 실제 환경을 제대로 반영하지 못할 수 있다.구현 세부사..
1️⃣ 페어 프로그래밍현재 나는 부트캠프를 다니고 있는데, 여기서는 페어 프로그래밍을 진행한다. 두 명이서 같이 프로그래밍을 진행하다 보면, 어느정도 협업이 어떤 것인지 배울 수 있는 과정이라 생각하고, 소통을 원할히 할 수 있는 좋은 방법이라고 생각했다.하지만 시간이 차츰 지나고, 페어 프로그래밍에 익숙해지며, ‘페어 프로그래밍’스럽지 않은 페어 프로그래밍을 하고 있다는 것을 이 책을 통해서 깨달았다.코드에 정통한 누군가와 함께 일을 할 수 있다면 그 점을 활용하라.질문하기를 주저하지 말라. 할 수 있다면 페어 프로그래밍을 하고, 자신의 작업을 검토해줄 것을 요청하라.경험 많은 프로그래머에게 README 문서 리뷰를 요청하라. 이를 통해 자신의 지식이 얼마나 정확한지 확인할 수 있고, 새로 오는 사람들..
🚀 사용자 정의 훅과 고차 컴포넌트 중 무엇을 써야 할까?1️⃣ 사용자 정의 훅서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것이 바로 사용자 정의 훅이다.사용자 정의 훅은 반드시 use로 시작하는 함수를 만들어야 한다. react-hooks/rules-of-hook의 도움을 받기 위해서.다음은 fetch를 수행하는 사용자 정의 훅이다.import { uesEffect, useState } from "react";function useFetch(url: string, { method, body }: { method: string; body?: XMLHttpRequestBodyInit }) { const [result, setResult] = useState(); const..
🚀 리액트의 모든 훅 파헤치기1️⃣ useStateuseEffect와 함께 상태 관리를 할 수 있게 해주는 훅.기본 사용법import { useState } from "react";const [state, setState] = useState(initValue);아무런 값도 넘겨주지 않으면 초깃값은 undefined 이다.리액트의 렌더링은 함수 컴포넌트에서 반환한 결과물인 return의 값을 비교해 실행되기 때문에 다음과 같은 상황에서는 렌더링이 되지 않는다.function Component() { const [_, triggerRender] = useState(); let state = "hello"; function handleButtonClick() { state = "hi"; t..