React 프로젝트를 개발하다 보면, 상단 탭 인터페이스를 통해 다양한 정보를 전환하고자 하는 요구사항을 자주 마주칩니다. MUI(Material UI)를 활용하면 기본적인 Tabs 컴포넌트를 빠르게 구현할 수 있지만, 복잡한 비즈니스 로직과 사용자 경험을 녹여낸 맞춤형 Tabs 시스템은 꽤나 섬세한 구조를 필요로 합니다. 이번 글에서는 제가 직접 구현한 AppTabs 컴포넌트를 구성 요소별로 분석하며, 주요 기능들을 하나씩 소개해 보겠습니다. 이를 통해 여러분이 확장 가능한 탭 시스템을 구축할 때 어떤 방식으로 접근하면 좋을지 함께 고민해 볼 수 있기를 바랍니다. 문제 상황기존 방식이었던 MUI에서 제공하는 Tabs 컴포넌트를 사용하는 방법의 경우, 디자인 디테일(탭 꼬리 디자인)이 추가됨에 따라 전체..

최근에 정말 중요한 이슈를 하나 마주쳤다. 내가 구현한 컴포넌트 하나가 무한 렌더링에 빠져 성능을 매우 저해하고 있었다. 처음엔 왜 이 컴포넌트가 계속 렌더링되지...? 하고 의아했는데, 파고들수록 리액트의 내부 동작 원리에 대해 알게되어 정리하고자 한다.문제의 시작ProSeqViewer라는 시각화 라이브러리를 쓰고 있었는데, 이 라이브러리는 내부적으로 DOM을 직접 조작한다. React스럽지 않지만 Protein sequence를 렌더링하는 라이브러리로는 이것만한 것이 없어 어쩔 수 없이 사용해야만 했다. 이 컴포넌트는 sequences라는 배열 데이터를 받아서 시각화해주는데, 문제는 이 배열이 자꾸 컴포넌트를 리렌더링시키고 있다는 점이었다.const ProSeqViewer = ({ consensus,..

Layered Architecture Layered Architecture(계층화 아키텍처)는 소프트웨어 개발에서 가장 일반적으로 널리 사용되는 아키텍처이다. 구성되는 계층의 숫자에 따라 N 계층 아키텍처 (N-tier Architecture) 라고도 한다. 각 계층은 어플리케이션 내에서의 특정 역할과 관심사(화면 표시, 비즈니스 로직 수행, DB 작업 등)별로 구분된다. 이는 Layered Architecture 의 강력한 기능인 관심사의 분리 (Separation of Concern) 를 의미한다. 특정 계층의 구성요소는 해당 계층에 관련된 기능만 수행한다. 이런 특징은 높은 유지보수성과 쉬운 테스트라는 장점이 존재한다. Flux Architecture 대규모 애플리케이션에서 데이터 흐름을 일관성 있..

리액트 테스팅 라이브러리는 리액트 컴포넌트를 사용자 입장에 가깝게 테스트할 수 있는 도구이다. 예를 들어 Hello World라는 코드가 있다면, div 태그를 사용하는지보다 Hello World 메시지가 브라우저에 노출이 되는지 파악하는 것을 더 중요하다고 본다. 또한 컴포넌트를 사용하는 테스트 코드를 작성하면서 해당 컴포넌트의 인터페이스를 개발 전에 미리 점검하여 문제를 발견 및 수정할 수 있다는 장점이 있다. 그러므로 최대한 개발 전 혹은 바로 직후에 테스트 코드를 작성하는 것이 권고된다. 초심자를 위한 React Testing Library 여기서도 마찬가지로 BDD 스타일로 코드를 작성하는 것이 유리하다. 다만 보다 구체화를 해보자면, given-when-then 패턴을 찾을 수 있다. 예를 들..

TDD(Test Driven Development) 란? 테스트 코드를 먼저 작성하는, 즉 구현보다 인터페이스와 스펙을 먼저 정의함으로써 개발을 진행하는 방식이다. TDD Cycle Red → 실패하는 테스트 코드를 작성. 인터페이스와 스펙에 집중한다. Green → 재빨리 테스트를 통과시킨다. 올바른 방법이 아니어도 괜찮다. Refactor → 리팩터링을 통해 코드를 올바르게 만든다. TDD에서 가장 중요한 부분이지만, 간과될 때가 많다. 중요한 것은 실패하는 테스트 코드를 작성할 때까지 실제 코드를 작성하지 않는 것과, 실패하는 테스트를 통과할 정도의 최소 실제 코드를 작성해야하는 것이다. 이를 통해 실제 코드에 대해 기대되는 바를 보다 명확하게 정의 함으로써 불필요한 설계를 피할 수 있고, 정확한 ..

React의 Component 리액트의 강력한 특징은 무엇일까? 리액트 공식 문서의 가장 메인에 나온 특징은 다음과 같다. 가장 먼저는 선언적이라는 것이다. 데이터가 변경될 시 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다는 것이다. 두번째로는 컴포넌트 기반이라는 것이다. 스스로 상태를 관리하는 간단한 형태의 캡슐화된 컴포넌트를 만들고, 이러한 컴포넌트들을 조합하여 복잡한 UI를 만드는 것이다. 즉 한꺼번에 복잡한 UI를 만드는 것이 아닌, 단순한 형태의 컴포넌트들로 쪼개 관리하는 것이다. 그렇다면 이렇게 컴포넌트들을 쪼개는데 어떠한 기준이 있을까? 다음과 같은 몇 가지 기준을 참고하면 좋을 듯하다. SRP (Single Responsibility Principle) : 단일 책임 원칙이란 모든 클래스..

JSON JSON(JavaScript Object Notation)은 키-값 쌍으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용한다(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우). 백엔드에서 보통 REST API 또는 GraphQL을 활용하여 JSON 형태의 데이터를 돌려주는 API를 제공한다. REST API 와 GraphQL REST API는 HTTP 메서드를 사용하여 작업을 수행하는 API를 구축하기 위한 아키텍처 스타일인 반면, GraphQL은 클라이언트 사이드에서 필요한 데이터만 요청할 수 있는 API를 위한 쿼리 언어이다. REST API란 무엇인가? REST는..

DOM이란? 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해, 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재한 것이 DOM이다. 모든 요소들을 각각의 객체로 만들고 이들 객체를 부자 관계로 표현할 수 있는 트리 구조로 DOM이 구성되어 있으므로 DOM tree라고도 부른다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. 프로퍼티와 메소드를 갖는 자바스크립트 객체를 통해 DOM에 접근하여 동적 변경을 할 수 있다. 이를 DOM API(Application Programming Interface)라고 부른다. 달리 말하면 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하..