Next.js는 React를 기반으로 구축되고 서버에서 렌더링되는 React 애플리케이션용으로 설계된 인기 있는 오픈 소스 JavaScript 프레임워크이다. 간단하고 직관적인 개발자 경험을 제공하여 빠르고 확장 가능한 웹 애플리케이션을 쉽게 만들 수 있다. 이 글에서는 Next.js가 서버에서 렌더링되는 React 애플리케이션의 미래인 5가지 이유를 정리해보았다. 자동 코드 분할 (Automatic Code Splitting) Next.js는 요청 시 로드할 수 있는 작은 청크로 코드를 자동으로 분할하므로 로드 시간이 단축되고 사용자 경험이 향상된다. 서버 사이드 렌더링 (Server-Rendering) Next.js를 사용하면 서버에서 React 컴포넌트를 렌더링할 수 있으므로 웹 애플리케이션의 성능..

의존성 역전 원칙(DIP) 의존성이란 특정한 모듈이 동작하기 위해서 다른 모듈을 필요로 하는 것을 의미한다. 의존성 역전 원칙은 유연성이 극대화된 시스템을 만들기 위한 원칙이다. 이 말은 곧 소스 코드 의존성이 추상에 의존하며 구체에는 의존하지 않는 것을 의미한다. 여기서 추상과 구체라는 말이 나오는데, 추상이란 구체적인 구현 방법이 포함되어 있지 않은 형태를 의미한다. 추상이란 말이 어려울 수 있지만, 결국 그 내부가 어떻게 구현되어있는지 신경 쓰지 않고 해줘야 하는 일과 결과만 신경 쓸 수 있게 된다는 말이다. 구체는 반대로 실질적으로 해당 동작을 하기 위해서 수행해야 하는 구체적인 일련의 동작과 흐름을 의미한다. 이런 구체적인 동작들은 빈번하게 변경될 여지가 많다. 따라서 이러한 구체에 애플리케이션..

횡단 관심사란 여러 서비스에 걸쳐서 동작해야 하는 코드를 의미한다. 관심사란 코드가 하고자 하는 목적, 동작을 의미하고 횡단 관심사란 애플리케이션 내 여러 핵심 비즈니스 로직들에 걸쳐서 실행되어야 하는 동작들을 의미한다. 횡단 관심사의 대표적인 예시로는 인증, 인가 처리나 로깅, 트랜잭션 처리, 에러 처리 정도가 있다. 횡단 관심사를 잘 처리하는 것은 애플리케이션의 유지보수에서 중요하다. 왜냐하면 횡단 관심사는 여러 비즈니스 로직들에 걸쳐서 실행되어야 하기 때문이다. 핵심 비즈니스 로직과 횡단 관심사가 혼재되어 버리면 추후 비즈니스 로직, 횡단 관심사 모두를 수정하기 힘들어지는 상황이 발생한다. 예를 들어 내가 인증 로직이 핵심 비즈니스 로직 안에 혼재된다면 일단 해당 코드의 관심사가 여러 개가 된다는 ..

React 16.8 버전에서 Hook이 발표되고 난 후 React에서 컴포넌트를 선언하는 방법의 대세는 클래스 컴포넌트에서 함수 컴포넌트로 옮겨왔다. 많은 사람들이 익숙하고 이미 기존에 많은 코드들이 작성된 방법인 클래스 컴포넌트에서 함수 컴포넌트로 옮겨온 이유 중에는 함수 컴포넌트의 문법이 더 단순하고 교착상태로 인한 버그가 발생하지 않는다는 장점도 있지만, Custom Hook의 편리함과 유용성도 큰 비중을 차지하고 있다. 리액트는 UI를 구축하기 위한 라이브러리로 리액트가 가진 핵심적인 관심사는 UI와 UI를 변경시키는 로직이다. 이 중 UI는 실제 코드상에서는 JSX라는 형태로 표현되고, UI 변경 로직은 유저의 입력에 반응하거나 API를 호출하고 스크린의 변화에 반응하는 등 여러 동작들을 통해서..

좋은 코드를 쓰는 것보다 나쁜 코드를 쓰지 않는 것이 중요하다. 왜냐하면 코드는 결국 소프트웨어를 이루는 근간이기 때문이다. 소프트웨어가 나쁜 코드로 구성되어 있으면 결국 해당 소프트웨어는 망가진다. 망가진다는 말은 더 이상 기능을 확장하거나 수정할 수 없게 된다는 의미다. 간혹 개발자들은 당장의 기능 구현이 급해서 좋은 코드를 포기하고자 하는 상황이 생긴다. 그리고 그 결정은 대부분 안 좋은 결과로 이어지게 된다. 실제로 프로그램의 복잡도가 올라갈수록 코드 한 줄을 입력하거나 수정하는데 드는 시간은 점점 늘어난다. 시간을 아끼기 위해서 좋은 코드를 포기했는데 결국 더 많은 시간을 들이게 되는 경우는 드문 일이 아니다. 그리고 대부분의 경우 기능 구현이 급해서 시간을 아끼기 위해서 좋은 코드를 포기하기보..

Context API란? React에서 제공하는 내장 API로서 컴포넌트들에게 동일한 Context(맥락)을 전달하는 데 사용할 수 있다. 일반적으로 리액트에서 데이터를 전달하는 기본 원칙은 단방향성으로 부모 컴포넌트에서 자식 컴포넌트 방향으로만 데이터를 전달할 수 있다. 단방향성은 애플리케이션의 안전성을 높이고 흐름을 단순화하는데 유용하지만 때때로 너무 많은 단계를 거쳐서 자식 컴포넌트에 데이터를 전달해야 한다는 문제점을 야기하기도 한다. 예를 들어 5단계 아래에 위치한 자식 컴포넌트에게 데이터를 넘겨야 한다면, 중간에 4개의 컴포넌트는 해당 데이터를 사용하지 않을지라도 props를 계속해서 넘겨줘야 하는 문제가 발생하고, 형제 관계나 특정 범위 안에 있는 컴포넌트들에게 데이터를 넘기기 위해서는 더 복..