Lighthouse of FE biginner

컴포넌트는 리액트를 사용해 프론트엔드 개발을 한다면 반드시 마주치게 됩니다. 컴포넌트란 무엇일까요?컴포넌트는 리액트에 국한된 개념이 아닙니다.컴퓨터 공학을 공부하다보면 종종 컴포넌트라는 단어를 마주치게 되는데요. 여기서 컴포넌트란 독립된 모듈을 뜻합니다. 독립된 모듈들인 컴포넌트들이 그룹을 이루고, 그룹들이 모여서 소프트웨어가 되는 것 입니다.리액트에서의 컴포넌트도 마찬가지의 개념입니다. UI를 구성하기 위한 독립된 모듈을 뜻하는데요, 컴포넌트들이 모여서 하나의 페이지를 이루고, 컴포넌트들이 모여서 웹 프론트엔드 애플리케이션이 됩니다. 리액트에서의 컴포넌트리액트에서의 컴포넌트는 크게 두 가지로 구분할 수 있습니다. 특정 기능을 담고 있는 featured component와 어디서든 담백하게 사용할 수 있..

useEffect 훅은 리액트에서 부수 효과를 일으키는 훅으로 여러개의 컴포넌트 생명주기를 다룰수 있는 훅 입니다. 그만큼 많이 사용하고 자주 사용하는 훅이지만 잘못 사용하면 무한 루프가 발생하던지 예상치 못한 버그가 발생할 수 있습니다. 가끔 개발된 컴포넌트를 보다보면 하나의 useEffect 훅에 여러 역할을 하는 함수를 넣는 경우가 있습니다. 이는 정말 좋지 못한 케이스이며 부수 효과로 인해 불필요한 로직이 실행됩니다. function App() { const [isSuccess, setIsSuccess] = useState(false); const [isError, setIsError] = useState(false); useEffect(() => { const fetch = async..

컴포넌트 내부에 다른 컴포넌트를 선언하는 것은 일반적으로 코드의 결합도를 증가시키는 결과를 가져옵니다. 이는 몇 가지 부작용을 초래할 수 있습니다. 결합도 증가구조적, 스코프적 종속성: 내부 컴포넌트는 외부 컴포넌트에 종속되어 구조적으로 강하게 결합됩니다. 이는 코드의 유지보수 및 확장성을 저해할 수 있습니다.확장성 저하: 나중에 내부 컴포넌트가 분리되거나 재사용해야 할 경우, 이를 위한 변경이 어려울 수 있습니다. 즉, 기능의 추가 또는 수정이 더 어려워집니다.성능 저하리랜더링 문제: 상위 컴포넌트가 리랜더링될 때, 내부에 있는 하위 컴포넌트도 함께 재생성됩니다. 이는 성능 저하로 이어질 수 있습니다. 특히, 내부 컴포넌트가 많고 복잡한 경우에는 이 문제가 더 심각해질 수 있습니다.예시function ..

React에서는 Props를 통해 컴포넌트 간 데이터를 전달하는데, 특히 Object를 Props로 전달할 때 주의해야 할 사항들이 있습니다. 이를 효율적으로 관리하기 위해 몇 가지 팁을 살펴보겠습니다.JavaScript에서의 ObjectJavaScript에서의 값은 원시 값 혹은 객체 입니다. 흔하게 사용하는 List도 다른 언어에서는 특정 타입의 값의 집합이지만 JavaScript에서는 Object 입니다.// Objectconst Object = { a: 'a'};// Objectconst Array = [1, 2, 3];Object.is와 불필요한 리랜더링React에서는 리랜더링 시 컴포넌트 비교를 위해 Object.is 메서드를 사용합니다. 이 메서드는 같은 모양의 객체라도 메모리 주소값이 다..

CSS-in-JS를 사용할 때, 스타일 코드를 인라인으로 지정하는 것은 일반적으로 지양되는 패턴 중 하나입니다. 대신에, 컴포넌트 외부에 스타일 코드를 선언하는 것이 권장됩니다. 여기서는 이러한 방법이 왜 더 좋은지, 그리고 어떤 장점을 가지는지 살펴보겠습니다. 외부 스타일 코드 선언하기Emotion을 사용해 스타일을 할 때 emotion/css emotion/react 라이브러리를 활용해 스타일링을 할 수 있습니다. 이때 css API는 Tagged Function을 사용하는 것 보다는 JS 객체 형식의 스타일 코드를 사용하는 것이 권장됩니다. 이때 스타일 코드는 JSX에 인라인 스타일로 작성하는 것 보다는 컴포넌트 외부의 변수로 빼내어 사용하는 것이 성능에 좋습니다. 외부로 분리할 경우 장점1. 랜더..

History회사에서 현재 진행중인 프로젝트 프론트엔드의 환경은 CRA 템플릿을 활용한 SPA 프로젝트입니다.CRA의 유지보수가 중단되고 Vite라는 더 좋은 개발툴이 있기에 해당 툴로 개발 환경과 번들러를 Rollup으로 마이그레이션 할 계획을 잡았습니다. 프로젝트가 시작되고 유지보수까지 굉장히 오랜 시간이 흘렀기에 한번에 딸깍 모든 것을 교체할 수 없었습니다. 본격적으로 마이그레이션 하기 전 어떤 문제가 있을지 테스트를 해봤고 도출한 여러 문제 중 react-data-export 라는 라이브러리에서 문제가 발생한다는 것을 알게 됐습니다. 그래서 이번 이슈를 통해 해당 라이브러리를 사용하는 엑셀 다운로드를 exceljs를 활용해 엑셀을 다운로드 받는 것으로 리팩토링을 결정했고 리팩토링 한 과정을 소개하..

React Server ComponentRSC가 서버에서 실행이 되지만 RSC 와 SSR 은 동일한 개념이 아닙니다. RSC 는 클라이언트에서 실행되는 컴포넌트(RCC)와는 다르게, 빌드 시점에 생성이 되거나 서버와 함께 사용한다면 서버에서 랜더링이 수행되는 컴포넌트 입니다. RSC의 개요RSC는 서버에서 랜더링이 수행된다. 즉 클라이언트에서 랜더링이 수행되지 않기 때문에 클라이언트 전용 API를 사용할 수 없다. 또한 서버에서 랜더링이 되기 때문에 클라이언트에서 랜더링이 발생하지 않는다. (리랜더링이 없다.) 기본적으로 모든 컴포넌트는 서버 컴포넌트이다. 만약 클라이언트 컴포넌트를 사용하고 싶다면 "use client"를 컴포넌트 파일 최상단에 기입해야한다. 서버 컴포넌트를 가지고 있는 페이지는 요청을..

IntersectionObserver랜딩페이지 작업 중 특정 색션에 접근 시 애니메이션이 발생하도록 구현해야 했습니다.`Scroll` 이벤트를 활용해 구현을 할 수 있지만,사용해본 경험이 있는 `IntersectionObserver` 을 활용해 구현했습니다.과정먼저 ref 객체를 만들어 관찰해야할 요소에 바인딩 해줍니다.  안심업체 소중한 우리 집, 안심하고 맡겨보세요.  IntersectionObserver 객체를 생성하고, observer 콜백 함수와 옵션 객체를 인자로 넘겨줍니다.콜백 함수의 매개변수로 entries 를 받을 수 있습니다.entries 는 IntersectionObserverEn..