개발숭이

우리 팀에서는 프론트엔드 개발의 효율성과 성능을 개선하기 위해 지속적으로 노력해 왔습니다. 저는 이 과정에서 프론트엔드 팀의 리더로서, 기존의 Create React App(CRA)을 사용한 개발 방식에서 벗어나 더 나은 대안을 모색하게 되었습니다. 우리가 직면한 주된 문제 중 하나는 빌드 시간과 서버 과부하였습니다. 기존 상황의 문제점: 긴 빌드 시간: 우리의 프로젝트 빌드 시간은 평균 12분 정도였습니다. 이는 개발 속도를 늦추고, 팀의 생산성에 심각한 영향을 미쳤습니다. 서버 과부하: 빌드 과정에서 발생하는 서버 과부하로 인해, 백엔드(스프링부트)와 프론트엔드 개발 인스턴스를 내려야 하는 상황이 발생했습니다. 이러한 조치에도 불구하고 빌드 시간은 여전히 7분 정도로 길었습니다. 이러한 문제를 해결하..

상태 관리는 React 애플리케이션에서 중요한 부분입니다. 하지만 때로는 useState를 과도하게 사용하여 코드의 복잡성을 불필요하게 증가시키는 경우가 있습니다. 예를 들어, 다음과 같은 코드를 생각해 볼 수 있습니다: import React, { useState } from 'react'; const OverusedStateComponent = () => { // 각각의 상태를 별도의 useState로 관리 const [isVisible, setIsVisible] = useState(true); const [isDisabled, setIsDisabled] = useState(false); const [isLoading, setIsLoading] = useState(false); const [isErr..

React에서 useCallback은 함수를 메모리에 저장하여 성능을 최적화하는데 유용하다. 부모 컴포넌트가 여러 항목을 관리하고, 각 항목을 업데이트하는 기능을 자식 컴포넌트에게 전달하는 상황이다. useCallback을 사용하면 부모 컴포넌트에서 자식 컴포넌트로 전달되는 함수가 불필요하게 재생성되는 것을 방지할 수 있다. import React, { useState, useCallback } from 'react'; function Item({ item, onUpdate }) { return ( {item.content} onUpdate(item.id, `업데이트된 내용: ${item.content}`)}>업데이트 ); } function ItemList() { const [items, setItem..