[GDGoC Ewha] Part Exchange - FE 6조

1. React와 Next.js

React와 Next.js는 웹 개발에서 매우 인기 있는 두 가지 기술로, 주로 프론트엔드 개발에 사용됩니다. 이 두 기술은 서로 밀접하게 연관되어 있으며, 각 기술의 주요 개념과 차이점에 대해 설명드리겠습니다.

1. React란?

React는 페이스북에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용됩니다. React는 주로 "컴포넌트 기반" 아키텍처를 따르며, UI를 작은 독립적인 컴포넌트로 나누어 관리할 수 있게 해줍니다.

주요 특징:

• 컴포넌트 기반 아키텍처: UI를 재사용 가능한 컴포넌트로 나누어 개발할 수 있습니다.
  1. 컴포넌트 종류
     • 함수형 컴포넌트 : 상태와 생명주기 메서드가 필요하지 않은 경우 간단한 UI를 렌더링할 때 사용
     • 클래스형 컴포넌트
       • React.Component를 상속받은 클래스 형태로 정의되며, 상태와 생명주기 메서드를 사용할 수 있음
       • 상태나 복잡한 로직을 다룰 때 주로 사용되지만, 현재는 대부분 함수형 컴포넌트로 대체되고 있음.
       • 함수형 컴포넌트에서 Hooks를 사용하면 상태와 생명주기 메서드도 처리할 수 있음
  2. 특징
     • 속성 : 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터
     • 상태 : 컴포넌트의 내부 데이터를 관리하는 방법
     • 렌더링 : UI를 화면에 표시
• Virtual DOM: 실제 DOM에 변경을 직접 반영하기 전에 가상 DOM을 사용하여 성능을 최적화합니다.
• 단방향 데이터 흐름: 데이터를 부모 컴포넌트에서 자식 컴포넌트로 전달하는 형태입니다. 이는 코드 유지보수 및 디버깅을 용이하게 합니다.
• JSX: JavaScript 안에서 HTML을 쓸 수 있게 해주는 문법으로, React에서 UI를 작성할 때 사용됩니다.

장점:

• 빠르고 효율적: Virtual DOM을 통해 UI 업데이트 성능이 뛰어납니다.
• 강력한 커뮤니티 지원: 매우 활발한 커뮤니티와 다양한 라이브러리들이 있습니다.
• 재사용 가능성: 컴포넌트 기반 아키텍처로 코드의 재사용이 쉬워집니다.

단점:

• SEO 처리 어려움: React는 기본적으로 클라이언트 사이드 렌더링(CSR)을 사용하기 때문에, 초기 페이지 로딩 시 SEO(검색엔진 최적화)가 어려울 수 있습니다.
• 보일러플레이트 코드: 복잡한 앱을 만들 때 코드 양이 많아질 수 있습니다.

2. Next.js란?

Next.js는 React 기반의 웹 애플리케이션 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 동적 라우팅 등을 쉽게 구현할 수 있도록 도와줍니다. Next.js는 React의 기능을 확장하여 성능 최적화 및 SEO 문제를 해결하는 데 도움을 줍니다.

주요 특징:

• 서버 사이드 렌더링(SSR): Next.js는 페이지를 서버에서 미리 렌더링한 후 클라이언트에 전달하는 방식으로 SEO와 초기 페이지 로딩 속도를 개선합니다.
• 정적 사이트 생성(SSG): 빌드 타임에 페이지를 미리 렌더링하여 배포 시 빠르게 제공할 수 있습니다. 특히 블로그나 문서 사이트에 유용합니다.
• 파일 기반 라우팅: 파일 시스템을 기반으로 자동으로 라우팅을 설정합니다. pages 디렉토리에 파일을 만들면 자동으로 라우트가 생성됩니다.
• API Routes: Next.js는 pages/api 디렉토리를 사용하여 API 엔드포인트를 쉽게 생성할 수 있습니다.
• 이미지 최적화: Next.js는 이미지 최적화 기능을 제공하여, 자동으로 적절한 크기로 이미지를 제공하고 로딩 성능을 개선합니다.

장점:

• SEO 향상: 서버 사이드 렌더링(SSR)을 통해 검색 엔진 최적화가 가능합니다.
• 페이지 로딩 속도 개선: 정적 사이트 생성(SSG)과 서버 사이드 렌더링을 통해 빠른 로딩을 할 수 있습니다.
• 개발 편의성: 파일 기반 라우팅, 자동 코드 분할, 다양한 내장 기능들이 개발 생산성을 높여줍니다.
• 서버리스 API: API를 쉽게 만들 수 있어서 백엔드 개발을 포함한 풀스택 개발이 가능합니다.

단점:

• 구성 요소 학습: Next.js는 React보다 더 많은 개념(SSR, SSG, 동적 라우팅 등)을 다루므로, 초보자에게는 다소 복잡할 수 있습니다.
• 빌드 시간: 정적 사이트 생성(SSG) 방식은 많은 페이지를 포함하는 경우 빌드 시간이 길어질 수 있습니다.

결론

• React는 UI 구성에 초점을 맞춘 라이브러리로, 필요한 기능들을 직접 구현하거나 추가할 수 있습니다.
• Next.js는 React를 기반으로 하며, 서버 사이드 렌더링, 정적 사이트 생성, 라우팅 등 많은 기능들을 기본적으로 제공하는 프레임워크로, 보다 효율적이고 최적화된 웹 애플리케이션 개발을 지원합니다.

React는 기본적인 사용자 인터페이스를 만들 때 유용하고, Next.js는 SEO, 성능 최적화, 서버 사이드 렌더링 등을 고려해야 할 때 매우 유용한 선택이 됩니다.

2. 다양한 CSS의 Framework

1. Tailwind

• Tailwind란?
  Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 사전 정의된 CSS 클래스들을 사용해 효율적으로 스타일을 적용할 수 있게 해줍니다. 클래스 조합만으로 HTML 요소에 구체적인 디자인을 적용할 수 있습니다.
• 사용 이유
  미리 정의된 클래스를 바로 사용해 CSS 작성 없이도 원하는 디자인을 빠르게 구현할 수 있으며 프로젝트 전반에서 같은 클래스 이름을 사용해 디자인을 통일할 수 있습니다.
• 장점
  CSS 작성 없이 HTML에서 바로 스타일 적용이 가능하기 때문에 빠른 속도로 개발할 수 있습니다. 또한 컴포넌트화하거나 반복적인 스타일을 줄여 코드 중복을 감소할 수 있습니다.
• 단점
  클래스 이름이 많아져 가독성이 떨어질 수 있고 다양한 클랙스와 문법을 익히는 데 시간이 필요합니다.

2. Styled Components

• Styled Components란?
  Styled Components는 CSS-in-JS 라이브러리로, React 컴포넌트 내부에 CSS를 작성해 스타일을 적용합니다. CSS를 JavaScript 파일로 가져올 수 있으며, 동적으로 스타일을 변경할 수 있습니다.
• 사용 이유
  컴포넌트 기반으로 스타일이 국한되어 코드 관리가 용이합니다. JavaScript 변수나 props를 사용해 동적으로 스타일 변경 가능합니다.
• 장점
  컴포넌트별 스타일이 격리되어 클래스 이름 충돌이 방지됩니다. CSS와 JS를 통합하여 스타일과 로직을 한 파일에서 관리할 수 있습니다.
• 단점
  대규모 프로젝트에서는 성능 저하가 발생할 수 있습니다. CSS 처리가 런타임에 이루어지기때문에 느려질 가능성이 있습니다.

3. emotion

• emotion이란?
  Emotion은 CSS-in-JS 라이브러리로, Styled Components와 유사하지만 더 가볍고 유연한 방식으로 스타일을 적용할 수 있습니다. 태그드 템플릿 리터럴과 객체 스타일링을 모두 지원합니다.
• 사용 이유
  다양한 스타일링 방식을 지원하는 높은 유연성을 갖고있습니다. 따라서 기존 CSS와의 통합이 용이합니다.
• 장점
  객체 스타일링, CSS 문자열 사용 등 다양한 사용 방식을 적용할 수 있습니다.
  다른 CSS-in-Js 라이브러리에 비해 더 경량화 되어 있습니다.
• 단점
  다양한 기능 때문에 프로젝트 관리가 어려울 수 있습니다.