코딩병원

Frontend/React

[React] 성능을 측정하는 지표 (LCP, FID, CLS, FCP, TTFB 등)

웹사이트의 성능은 사용자 경험뿐만 아니라 구글 검색 순위(SEO)에도 결정적인 영향을 미칩니다. 이번 글에서는 구글에서 제공하는 공신력 있는 성능 측정 도구와 주요 지표를 알기 쉽게 소개해보겠습니다.PageSpeed Insights웹사이트 주소만 입력하면 즉시 성능을 분석해 주는 가장 대중적인 도구입니다. 모바일과 데스크탑 환경을 각각 분석하며, '실제 사용자 데이터'와 '가상 테스트 데이터'를 모두 제공합니다. 이 외에도 구글에서 만든 지표로 핵심 웹 지표(Core Web Vital)가 있습니다. 이것은 웹사이트에서 뛰어난 사용자 경험을 제공하는 데 필수적인 지표를 일컫는 용어입니다. 구글에서 핵심 웹 지표로 꼽는 지표는 다음과 같습니다.LCP: Largest Contentful PaintFID: F..

2024. 5. 11.

Frontend/Jest

[Jest] MSW로 비동기 이벤트 테스트하기

MSW(Mock Service Worker)는 Node.js나 브라우저에서 모두 사용할 수 있는 모킹 라이브러리로, 브라우저에서는 서비스 워커를 활용해 실제 네트워크 요청을 가로채는 방식으로 모킹을 구현합니다. 즉, fetch로 예를 들자면, 브라우저에서는 fetch 요청을 하는 것과 동일하게 네트워크 요청을 수행하고, 이 요청을 중간에 MSW가 감지하고 미리 준비한 모킹 데이터를 제공하는 방식입니다. 이러한 방식은 fetch의 모든 기능을 그대로 사용하면서도 응답에 대해서만 모킹할 수 있으므로 fetch를 모킹하는 것이 훨씬 수월해집니다. MSW를 활용해 fetch 응답을 모킹한 테스트 코드를 다음과 같이 작성해 봤습니다.import { fireEvent, render, screen } from '@t..

2024. 5. 6.

Frontend/Next.js

[Next.js] <a /> 태그와 <Link />의 차이

Next.js는 서버 사이드 렌더링을 수행하지만 동시에 싱글 페이지 애플리케이션과 같이 클라이언트 라우팅 또한 수행합니다. 이러한 방식의 라우팅이 다소 생소하게 느껴질 수 있으며, Next.js를 처음 접했을 때 가장 혼란을 느끼는 부분입니다. 서버 사이드 렌더링과 클라이언트 라우팅이 혼재돼 있는 것이 복잡하게 느껴질 수도 있습니다. 아래 코드를 살펴보겠습니다.import type { NextPage } from 'next';import Link from 'next/link';const Home: NextPage = () => { return ( A 태그로 이동 {/* 차이를 극적으로 보여주기 위해 리소..

2024. 5. 4.

Frontend/Debug Log

ParentComponent.jsx:3 Warning: ChildComponent: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. 해결 방법

ParentComponent.jsx:3 Warning: ChildComponent: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. 위의 에러는 ref와 관련된 에러입니다. 굉장히 간단합니다. 하나하나 알아볼까요? 시작하기에 앞서 forwardRef를 이해하면 해결 방법과 개발 지식도 향상될 수 있습니다.forwardRef란?ref는 useRef에서 반환한 객체로, 리액트 컴포넌트의 props인 ref에 넣어 HTMLE..

2024. 5. 1.

Frontend/React

[React] 커스텀훅 vs 고차 컴포넌트

일반적인 자바스크립트에서 재사용 로직을 작성하는 방식 외에도 리액트에서는 재사용할 수 있는 로직을 관리할 수 있는 두 가지 방법이 있습니다. 바로 커스텀훅(custom hook)과 고차 컴포넌트(higher order component)입니다. 커스텀 훅과 고차 컴포넌트가 무엇이며 어떻게, 언제 쓰이는지 알아보도록 하겠습니다.  커스텀 훅(custom hook)서로 다른 컴포넌트 내부에서 같은 로직을 공유하고자 할 때 주로 사용되는 것입니다. 고차 컴포넌트의 경우 리액트가 아닌 곳에서도 사용이 가능하지만, 커스텀 훅은 오로지 리액트에서만 사용할 수 있는 방식입니다.  이러한 커스텀 훅의 규칙 중 하나는 이름이 반드시 use로 시작하는 함수를 만들어야 합니다. 만약 규칙을 따르지 않는다면 다음과 같이 에러..

2024. 4. 27.

Frontend/React

[React] useLayoutEffet와 useEffect

공식문서에 따르면 useLayoutEffect를 다음과 같이 정의하고 있습니다.'이 함수의 시그니처는 useEffect와 동일하나, 모든 DOM의 변경 후에 동기적으로 발생한다.' 먼저 '함수의 시그니처가 useEffect와 동일'하다는 것은 두 훅의 형태나 사용 예제가 동일하다는 것을 의미합니다.export default function App() { const [count, setCount] = useState(0); useEffect(() => { console.log('useEffect', count); }, [count]); useLayoutEffect(() => { console.log('useLayoutEffect', count); }, [count]); function..

2024. 4. 20.

Frontend/Jest

[Jest] 이벤트 핸들러 테스트하기 (fireEvent vs userEvent)

이번 글에서는 HTML 요소를 정적 컴포넌트, 동적 컴포넌트에서는 어떻게 확인할 수 있는지 간단한 예제를 통해 글을 작성해보겠습니다. 먼저, 테스트 코드를 잘 다루고 어떻게 동작하는지 알기 위해서는, React Testing Library가 뭔지 알아야 합니다. React Testing Library란? DOM Testing Library를 기반으로 만들어진 테스팅 라이브러리로, 리액트를 기반으로 한 테스트를 수행하기 위해 만들어졌습니다. React Testing Library를 이해하려면 먼저 React Testing Library가 기반으로 하는 DOM Testing Library에 대해 먼저 알아둬야 합니다. DOM Testing Library는 jsdom을 기반으로 하고 있습니다. jsdom이란 ..

2024. 4. 13.

Frontend/Next.js

[Next.js] 페이지 구조

먼저 creatae-next-app으로 Next.js 프로젝트를 만들어봅시다. 저는 타입스크립트를 항상 기반으로해서 타입스크립트도 추가하였습니다. npx create-next-app@latest --ts 위의 명령어를 실행하니 아래와 같은 디렉토리 구조를 띄며 프로젝트가 생성되었습니다. 안의 내용들을 자세히 살펴보면 좋겠지만, 기본적인 것만 살펴보고 Next.js에서 제공하는 예약어로 관리되는 페이지를 추가로 확인해보겠습니다. package.json 이 파일에는 프로젝트 구동에 필요한 모든 명령어 및 의존성이 포함돼 있으므로 프로젝트의 대략적인 모습을 확인하는 데 매우 유용합니다. 여기에서 눈에 띄는 몇 가지 주요 의존성만 살펴보겠습니다. { "name": "coding hostpital", "versi..

2024. 4. 10.

Frontend/React

[React] useReducer는 언제 사용할까?

useReducer란? useReducer는 useState의 심화 버전이라고 볼 수 있습니다. useState와 비슷한 형태를 띠지만 좀 더 복잡한 상태값을 미리 정의해 놓은 시나리오에 따라 관리가 가능합니다. useReducer에서 사용되는 용어를 먼저 살펴보겠습니다. 반환값은 useState와 동일하게 길이가 2인 배열입니다. state: 현재 useReducer가 가지고 있는 값을 의미합니다. useState와 마찬가지로 배열을 반환하는데, 동일하게 첫 번째 요소가 이 값입니다. dispatcher: state를 업데이트하는 함수. useReducer가 반환하는 배열의 두 번째 요소입니다. setState는 단순히 값을 넘겨주지만 여기서는 action을 넘겨준다는 점이 다릅니다. 이 action은..

2024. 4. 6.

Frontend/React

[React] useEffect의 콜백 인수로 비동기 함수를 넣으면 안되는 이유

왜 useEffect의 콜백 인수로 비동기 함수를 바로 넣을 수 없을까요? 아래 코드는 첫 번째 인수에 비동기 함수를 넣으니 발생한 경고문입니다. useEffect 내부에서 state를 결과에 따라 업데이트하는 로직이 있다고 가정해 봅시다. 만약에 useEffect의 인수로 비동기 함수가 사용 가능하다면 비동기 함수의 응답 속도에 따라 결과가 이상하게 나타날 수 있습니다. 극단적인 예제로 이전 state 기반의 응답이 10초가 걸렸고, 이후 바뀐 state 기반의 응답이 1초 뒤에 왔다면 이전 state 기반으로 결과가 나와버리는 불상사가 생길 수 있습니다. 이러한 문제를 useEffect의 경쟁 상태(race condition)라고 합니다 그렇다면 비동기 함수는 어떻게 실행할 수 있을까요? 한 가지 유..

2024. 3. 31.

Frontend/React

[React] useEffect 의존성 빈 배열 경고 - react-hooks/exhaustive-deps 왜?

이번 글에서는 왜 eslint-disable-line, react-hooks/exhaustive-deps 경고를 알려주는지 알아보도록 하겠습니다. 리액트 코드를 작성하거나, 읽다보면 제법 심심치 않게 eslint-disable-line, react-hooks/exhaustive-deps 주석을 사용해 아래의 경고를 무시한는 것을 볼 수 있습니다. (저 또한.. 그랬습니다..) 이 ESLint룰은 useEffect 인수 내부에서 사용하는 값 중 의존성 배열에 포함돼 있지 않은 값이 있을 때 경고를 발생시킵니다. 정말로 필요할 때에는 사용할 수도 있지만 대부분의 경우에는 의도치 못한 버그를 만들 가능성이 큰 코드입니다. 이 코드를 사용하는 대부분의 예제가 빈 배열 []을 의존성으로 할 때, 즉 컴포넌트를 마..

2024. 3. 24.

Frontend/Javascript

[Javascript] 코드 품질을 높이는 방법

코드 품질을 높이는 것은 개발 과정에서 매우 중요하고 기본적인 원칙들이 존재합니다. 무조건 따라야 하는 것은 아니지만, 품질이 좋은 코드는 유지보수가 쉽고 버그가 적게 발생하며 향후 기능 추가나 변경이 용이합니다. 따라서 이번 글에서는 코드 품질을 높이는 방법과 이유에 대해서 포스팅하겠습니다. [고품질 코드 작성은 일정을 지연시키는가?] 단기적으로 보면 고품질 코드를 작성하는 데 시간이 더 걸릴 수 있습니다. 하지만 한 번 사용하고 버릴 시스템이 아닌 좀 더 중요한 소프트웨어를 개발하고 있다면, 일반적으로 고품질 코드를 작성하는 것이 중장기적으로는 개발 시간을 단축해 줍니다. 코드 품질을 고려하지 않고 먼저 떠오르는 대로 코딩하면 처음에는 시간을 절약할 수 있습니다. 그러나 이런 코드는 머지않아 취약하고..

2024. 2. 25.

Frontend/React

[React] Recoil + React Query를 도입한 이유

저는 사이드 프로젝트에서 Redux를 사용해왔지만, 최근 Recoil과 React Query로의 마이그레이션을 선택했습니다. Redux는 React에서 많이 사용되는 상태 관리 라이브러리지만, 새로운 접근 방식과 도구들이 등장하면서, Recoil과 React Query가 클라이언트와 서버 상태 관리에 더 나은 가능성을 제공하고 있다는 인상을 받았습니다. 이번 글에서는 이러한 마이그레이션을 결정한 이유와 새로운 라이브러리들이 어떻게 프로젝트에 긍정적인 영향을 미쳤는지 간략하게 다뤄보겠습니다. [Redux 상태관리의 문제]Redux는 오랜 기간 동안 React 애플리케이션에서 전역 상태 관리의 표준으로 자리 잡았습니다. 그러나 클라이언트와 서버 간의 데이터 흐름을 처리하는 데 필요한 복잡성과 보일러플레이트 ..

2024. 2. 12.

Frontend/Javascript

[Javascript] Prototype과 Class의 개념과 차이

이번 글에서는 프로토타입과 클래스에 대해 다루어 보려고 합니다. 프로토타입은 ES6 이전부터 나왔고, 클래스는 ES6에서 도입되었습니다. 프로토타입과 클래스가 무엇이며 어떠한 차이를 갖고 있는지 간단한 코드들을 보면서 확인하겠습니다. [Prototype] 자바스크립트 프로토타입(Prototype)은 자바스크립트 객체 지향 프로그래밍에서 객체 상속과 프로퍼티 공유를 구현하는 데 사용되는 중요한 개념입니다. 모든 객체는 프로토타입을 가지며, 이를 통해 다른 객체의 프로퍼티와 메서드를 상속하고 공유할 수 있습니다. 프로토타입은 객체 간의 연쇄적인 상속을 가능하게 합니다. 객체가 다른 객체의 프로퍼티나 메서드를 참조할 때, 프로토타입 체인을 통해 상위 객체(부모 객체)로부터 프로퍼티나 메서드를 찾습니다. 이러한..

2024. 1. 27.

Frontend/Javascript

[Javascript] Cookies, Session And Web Storage의 차이점

쿠키(Cookies), 세션(Session), 그리고 웹 스토리지(Web Storage)는 모두 웹 개발에서 데이터를 저장하고 관리하는 데 사용되는 기술이지만, 각각의 특징과 작동 방식이 다릅니다. 간단한 예제를 보면서 이들의 차이를 설명하겠습니다. 쿠키 세션 웹 스토리지 저장 위치 클라이언트 서버 클라이언트 데이터 저장 방식 키-값 쌍 형태의 작은 텍스트 파일 서버 측에 사용자 세션 데이터를 저장하고, 클라이언트는 세션 ID를 사용하여 서버의 데이터에 접근 키-값 쌍으로 데이터를 저장하며, 로컬 스토리지와 세션 스토리지 두 가지 유형 존재 데이터 전송 모든 HTTP 요청과 함께 서버로 자동으로 전송 세션 ID가 클라이언트로 전송되지만, 세션 데이터는 서버에 저장되므로 클라이언트와 서버간의 통신을 통해 ..

2024. 1. 20.

Frontend/React

[React] styled-Components란?

styled-components란? React 애플리케이션에서 사용되는 CSS-in-JS 라이브러리 중 하나입니다. 이 라이브러리는 JavaScript 파일 안에서 컴포넌트 스타일을 정의할 수 있게 해 주며, 동적인 스타일링 및 컴포넌트 기반의 스타일링을 쉽게 구현할 수 있도록 도와줍니다. 장점 1. 간단한 사용 방법 템플릿 리터럴 (template literals) 문법을 활용하여 스타일을 정의할 수 있습니다. import styled from 'styled-components'; const Button = styled.button` background-color: #3498db; color: #ffffff; padding: 10px 20px; font-size: 16px; border-radius: ..

2024. 1. 13.

Frontend/React

[React] REST API와 GraphQL 차이 및 예제

React 애플리케이션과 서버 간의 데이터 통신을 처리하는 방법은 주로 두 가지입니다. 서버와의 효율적인 데이터 통신을 위해 RESTful API 또는 GraphQL을 사용할 수 있습니다. 이러한 API는 데이터 엔드포인트와 데이터 스키마를 제공하며, 클라이언트는 이러한 API를 사용하여 데이터를 요청하고 업데이트합니다. 이 두 가지의 기본적인 개념과 차이를 알아보도록 하겠습니다. REST API (Representational State Transfer) - 구조적인 접근 방식 REST는 자원(리소스)을 URL 경로로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 자원을 조작합니다. 각 엔드포인트(URI)는 특정 자원 또는 컨트롤러를 나타내며, 각각의 HTTP 메서..

2024. 1. 1.

Frontend/React

[React] axios를 사용하는 이유 (vs fetch)

Javascript에는 HTTP Request를 위한 방법으로 대표적으로 axios와 fetch가 있습니다. 이번 글에서는 각각의 장단점과 간단한 사용방법을 보면서 비교하고 차이를 알아보겠습니다. Fetch 간단하면서도 강력한 기능을 제공하며, 주로 모던 브라우저에서 사용되는 경향이 있습니다. [장점] ES6부터 도입된 Javascript 내장 라이브러리 브라우저 환경에서 사용 가능하며, import 하면 node.js에서도 사용 가능 Promise 기반 사용법이 간단하고 직관적이며, 간단한 요청에서는 불필요한 설정이 없이 사용 [단점] HTTP 에러(404, 500 등)를 자동으로 걸러내지 않음 응답 데이터가 바로 넘어오지 않아 JSON으로 파싱해야됨 IE11 및 구형 브라우저 지원은 추가 설정이나 폴..

2023. 12. 30.