공통점:

• SPA, Web-App
• 화면 전환이 빠르다

차이점:

• 트렌드 [2024-06-19]: React > Next.js > Vue.js > Angular > Svelt
• React: 가장 많은 사용자, 커뮤니티, 라이브러리, 플러그인이 존재

공통점: SPA (Single Page Application) 및 Web-App 개발에 사용 화면 전환이 빠름 차이점 및 장단점 비교:

1. React
   • 장점
     • 가장 많은 사용자와 커뮤니티: 많은 라이브러리와 플러그인 지원
     • Virtual DOM: 효율적인 업데이트 및 렌더링
     • JSX: HTML과 JavaScript의 조합으로 높은 표현력
     • React Hooks: 함수형 컴포넌트에서 상태 관리 및 사이드 이펙트 처리 간편
   • 단점:
     • 학습 곡선: JSX와 Hook의 개념을 익히는데 시간이 걸릴 수 있음
     • 필수 라이브러리: 상태 관리(Redux 등), 라우팅(React Router 등)을 위해 추가 라이브러리 필요
2. Vue.js
   • 장점:
     • 쉽고 직관적인 문법: 초보자에게 적합한 학습 곡선
     • 템플릿 문법: HTML 기반으로 친숙함
     • Reactive 데이터 바인딩: 데이터와 UI의 자동 동기화
     • Vue CLI: 프로젝트 초기 설정 및 개발 편의성 제공
   • 단점:
     • 규모 확장 어려움: 대형 프로젝트에서는 복잡성 증가 가능
     • 커뮤니티 규모: React에 비해 작음
     • 유연성: 자유도가 높아 일관성 유지가 어려울 수 있음
3. Angular
   • 장점
     • 완전한 프레임워크: 모든 것을 갖춘 종합적인 솔루션
     • TypeScript 사용: 정적 타입 언어로 코드 안정성 향상
     • 양방향 데이터 바인딩: 모델과 뷰의 자동 동기화
     • 강력한 CLI: 코드 생성, 테스트 등 다양한 기능 제공
   • 단점:
     • 학습 곡선: 복잡한 개념과 구조로 인해 배우기 어려움
     • 무거운 프레임워크: 초기 로드 시간이 길어질 수 있음
     • 변경 관리 어려움: 버전 업데이트 시 코드 호환성 문제 발생 가능
4. Svelte
   • 장점
     • 컴파일러 기반: 런타임이 필요 없어 더 작은 번들 사이즈와 빠른 실행 속도
     • 간결한 문법: 코드 작성이 간편하고 직관적
     • Reactiveness 내장: 상태 변화에 따른 자동 UI 업데이트
   • 단점:
     • 작은 커뮤니티: 지원 리소스와 라이브러리 부족
     • 생태계 미성숙: 아직 안정화되지 않은 부분이 있을 수 있음
     • 러닝 커브: 새로운 개념과 방식에 대한 학습 필요
5. Next.js (React 기반)
   • 장점:
     • 서버사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG): SEO 및 초기 로딩 속도 향상
     • 파일 기반 라우팅: 쉬운 라우팅 설정
     • API 라우트: 서버리스 함수로 API 구성 가능
     • 최적화 기능: 자동 코드 분할, 이미지 최적화 등 내장
   • 단점: _ React에 종속적: React를 먼저 이해해야 함 _ 추가 학습 필요: Next.js의 고유 기능을 익혀야 함 * 프로젝트 설정 복잡성: 복잡한 설정이나 구성 필요할 수 있음

공통점:

• 모듈 번들링: 자바스크립트, CSS, 이미지 등 다양한 파일을 번들링
• 라이브 리로드: 코드 수정 시 자동으로 브라우저 새로고침
• 환경 설정: 설정 파일을 통해 빌드, 번들링, 로더, 플러그인 설정 가능

차이점:

• 결론
  • Webpack: 대규모 프로젝트나 복잡한 요구사항이 있는 프로젝트에서 유리, 유연성과 확장성이 뛰어나지만, 설정이 복잡할 수 있음
  • Vite: 빠른 개발 속도와 간단한 설정이 필요한 소규모에서 중규모 프로젝트에 적합, 최신 브라우저 기능을 활용하며, 빠른 HMR을 제공

결론

• CSS-in-JS: 동적 스타일링과 컴포넌트 기반 스타일링이 필요할 때 적합
• Tailwind CSS: 유틸리티 클래스를 통한 빠른 스타일링과 일관된 디자인 시스템을 유지하고자 할 때 유리
• SCSS(Sass): 기존 CSS에 익숙하고 확장된 기능을 활용하여 스타일을 모듈화하고 유지보수하고자 할 때 적합

• components/ui 디렉토리에는 재사용 가능한 작은 단위의 컴포넌트(Atomic 컴포넌트)를 배치합니다. 이들은 Button, Input, Checkbox 등 작은 단위의 컴포넌트들로 구성되어 있습니다.
• components/composite 디렉토리에는 여러 Atomic 컴포넌트를 조합하여 만든 Composite 컴포넌트를 배치합니다. Header, Footer, SignupForm 등이 이에 해당합니다.

• contexts, hooks, modals, pages, services 디렉토리는 특정 기능이나 목적에 따라 구성된 폴더 구조입니다. 이는 각각의 기능이나 서비스가 독립적으로 관리되고 확장될 수 있도록 합니다.
• pages 디렉토리에는 각 페이지의 컴포넌트를 배치하여, 페이지 단위로 기능을 관리합니다.

• contexts: 전역 상태 관리
• hooks: 커스텀 훅
• layouts: 페이지 레이아웃
• modals: 모달 컴포넌트
• services: API 호출 및 비즈니스 로직
• styles: 전역 스타일
• utils: 유틸리티 함수

• components/ui 및 components/composite 디렉토리는 주로 프레젠테이션 로직을 포함합니다.
• contexts, hooks 디렉토리의 파일들은 주로 데이터 로직과 상태 관리를 담당하여 프레젠테이션 컴포넌트와 비즈니스 로직을 분리합니다.

• services 디렉토리는 API 호출과 같은 비즈니스 로직을 모듈화하여 관리합니다.
• 각 페이지와 기능은 pages 디렉토리 내의 개별 파일로 모듈화되어 있습니다.

이 구조는 각 패턴의 장점을 활용하여 유지보수성과 확장성을 높입니다. Atomic Design 패턴은 컴포넌트 재사용성을 극대화하고, Feature-Based Structure는 특정 기능의 독립성을 보장하며, Separation of Concerns는 각 역할을 명확히 구분합니다. Presentation and Container Pattern은 UI와 비즈니스 로직을 분리하여 코드의 가독성을 높이고, Module Pattern은 비즈니스 로직을 모듈화하여 코드의 관리와 테스트를 용이하게 합니다.

• 네이밍 컨벤션: camelCase
• 타입 정의: TypeScript 사용
• 폴더 구조: 컴포넌트, 페이지, 훅, 유틸리티 등 기능별로 폴더 구분
• 폴더명: 소문자, 띄어쓰기 대신 하이픈(-) 사용
• 파일명: PascalCase, 파일명은 컴포넌트명과 동일하게 작성
• 상수: 상수명은 대문자, 띄어쓰기 대신 언더바(_) 사용

• 커밋 메시지 형식: [<타입>]: <제목>

  • feat: 새로운 기능 추가

  • fix: 버그 수정

  • docs: 문서 수정

  • style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우

  • refactor: 코드 리팩토링

  • test: 테스트 코드, 리팩토링 테스트 코드 추가

  • chore: 빌드 업무 수정, 패키지 매니저 수정

  • perf: 성능 개선

  • WIP(Work In Progress): 작업 중

    ```text
    [feat]: 로그인 페이지 추가
    [fix]: 로그인 버튼 클릭 시 에러 수정
    [docs]: README.md 수정
    [style]: 코드 포맷팅
    [refactor]: 로그인 페이지 컴포넌트 리팩토링
    [test]: 로그인 페이지 테스트 코드 추가
    [chore]: package.json 업데이트
    [perf] 로그인 로직 성능 개선
    [WIP] 로그인 로직 작업 중 @REVIEW
    ```
    

• eslint: 'eslint:recommended', // ESLint의 추천 설정을 사용

• no-constant-condition: 조건문에서 항상 true 또는 false인 상수를 사용하지 않음
• no-debugger: debugger 문 사용 금지
• no-dupe-args: 함수 정의에서 중복된 인수 금지
• no-dupe-keys: 객체 리터럴에서 중복된 키 금지
• no-duplicate-case: switch 문에서 중복된 case 라벨 금지
• no-empty: 빈 블록 문 금지
• no-extra-semi: 불필요한 세미콜론 금지
• no-func-assign: 함수 선언을 다시 할당하지 않음
• no-irregular-whitespace: 비정상적인 공백 문자 금지
• no-unreachable: 도달할 수 없는 코드 금지
• use-isnan: NaN과 비교할 때 isNaN() 사용

• eqeqeq: == 및 != 대신 === 및 !== 사용
• no-multi-spaces: 여러 공백 문자 사용 금지
• no-self-assign: 변수에 자신을 할당하지 않음
• no-self-compare: 자신과의 비교 금지
• no-useless-concat: 불필요한 문자열 연결 금지
• no-useless-escape: 불필요한 이스케이프 문자 금지

• no-delete-var: 변수 삭제 금지
• no-undef: 정의되지 않은 변수 사용 금지
• no-unused-vars: 사용하지 않는 변수 금지

• no-mixed-spaces-and-tabs: 공백과 탭 혼용 금지
• semi: 문장 끝에 세미콜론 사용

• no-class-assign: 클래스 선언을 다시 할당하지 않음
• no-const-assign: const 선언 변수를 다시 할당하지 않음
• no-dupe-class-members: 클래스 멤버의 중복 금지
• no-new-symbol: Symbol을 생성자로 사용하지 않음
• require-yield: 생성자 함수 내에 yield 사용

{
  "printWidth": 80, // 코드 줄의 최대 길이를 설정합니다.
  "tabWidth": 2, // 들여쓰기에 사용할 공백 수를 설정합니다.
  "useTabs": false, // 탭 대신 공백을 사용합니다.
  "semi": true, // 문장의 끝에 세미콜론을 추가합니다.
  "singleQuote": false, // 작은따옴표 대신 큰따옴표를 사용합니다.
  "trailingComma": "es5", // 여러 줄로 나열된 항목의 마지막에 쉼표를 ES5에서 유효한 위치에만 추가합니다.
  "bracketSpacing": true, // 객체 리터럴에서 중괄호에 공백을 추가합니다.
  "jsxBracketSameLine": false, // JSX 요소의 마지막 `>`를 다음 줄의 시작 부분에 배치합니다.
  "arrowParens": "avoid", // 화살표 함수의 매개변수에 괄호를 추가하지 않습니다.
  "endOfLine": "auto" // EOL(End Of Line)을 설정합니다.
}