[TIL]20250408

오늘 목표

• 수업 전 7시 기상 후 운동(O)
• 수업 내용 모르는 거 및 공부내용 정리(O)
• 에어비엔비 반응형 퍼블리싱 해보기(O)

공부내용

vite로 react프로젝트 생성하기

npm create vite@latest my-react-app -- --template react
이렇게 생성하게 되면 my-react-app 부분에 생성할 폴더 이름을 지정해주면
바로 react 프로젝트가 생성되고 


npm create vite
제시된 순서대로 셋팅 하는데 projectname을 정하는 부분에 
.를 작성해주면 폴더를 따로 생성하지 않고 넘어가게 된다
그 후 원하는 프로젝트의 구성을 정해서 프로젝트를 생성하면 된다.

프로젝트 완성한 다음에 npm install을 해주면 된다.

Vite를 사용하는 이유

1. 빠른 개발 서버 - Vite는 번들링 없이 네이티브 ES 모듈을 활용하여 매우 빠른 개발 서버를 제공합니다. 기존의 webpack 기반 도구(create-react-app)보다 훨씬 빠르게 시작됩니다.
2. 빠른 핫 모듈 교체(HMR) - 코드를 변경할 때 페이지가 거의 즉시 업데이트되어 개발 경험이 크게 향상됩니다.
3. 최적화된 빌드 - 프로덕션 빌드 시 Rollup을 사용하여 최적화된 결과물을 생성합니다.
4. 간소화된 설정 - 기본 설정이 잘 되어 있어 추가 구성 없이도 바로 사용할 수 있습니다.
5. TypeScript 및 JSX 기본 지원 - 별도의 설정 없이 TypeScript와 JSX를 즉시 사용할 수 있습니다.
6. 다양한 프레임워크 템플릿 - React 외에도 Vue, Preact, Lit 등 다양한 프레임워크 템플릿을 지원합니다.
7. 가벼운 의존성 - create-react-app에 비해 의존성이 적어 설치 크기가 작습니다.
8. 최신 웹 표준 활용 - ES 모듈을 기반으로 하여 최신 웹 표준을 적극 활용합니다.

Vite는 특히 대규모 애플리케이션에서 개발 서버 시작 시간과 HMR 성능이 크게 향상되어, 개발자 경험을 크게 개선합니다.

ESLint

역할

코드 품질과 일관성을 유지하기 위한 중요한 설정 파일.

eslint.config.js는 ESLint의 새로운 플랫 구성 파일로, 
 코드 분석 규칙을 정의하고 관리합니다.
 
eslint.config.js는 React 19에서 더욱 중요해진 플랫 설정 방식으로,
 기존의 .eslintrc 파일을 대체하며 더 명확하고 유연한 설정이 가능
1. 코드 오류를 자동으로 감지 
2. 코드 스타일을 일관되게 유지
3. 잠재적 문제를 사전에 발견
4. 개발자 간 코드 작성 규칙 통일

Prettier

역할

코드 포맷팅을 위한 설정
ESLint가 코드 품질과 오류를 검사한다면,
Prettier는 코드의 스타일과 포맷을 일관되게 유지하는 데 중점

• 코드 포맷팅 자동화: 들여쓰기, 줄 바꿈, 따옴표 스타일 등을 자동으로 정리
• 일관된 코드 스타일 유지: 모든 개발자가 동일한 포맷 규칙을 따르도록 보장
• 코드 리뷰 효율화: 스타일 관련 논쟁을 줄이고 코드 품질에 집중할 수 있게 함

npm install --save-dev eslint-plugin-prettier prettier eslint-config-prettier

3. eslint-plugin-prettier`와 관련된 다른 필요한 패키지들을 설치통합 플러그인이 충돌 없이 사용 가능하게 해줌

리액트에서 jsx,js

파일 확장자 구분의 주요 이유

1. 명확한 의도 전달
   • .jsx 파일은 React 컴포넌트와 UI 요소를 포함함을 즉시 알 수 있습니다
   • .js 파일은 일반 JavaScript 로직, 유틸리티 함수, 서비스 등을 담당합니다
2. 도구 및 편집기 최적화
   • 편집기(VS Code 등)가 파일 유형에 맞는 문법 강조와 자동 완성 기능을 제공합니다
3. 빌드 시스템 최적화
   • JSX 파일만 React 변환 과정을 거치도록 설정할 수 있어 빌드 성능이 향상됩니다
4. 관심사 분리와 목적 분명
   • 대규모 프로젝트에서 파일의 목적을 쉽게 파악할 수 있습니다
   • 각 파일이 단일 책임을 갖도록 유도합니다

useState 불변성과 업데이터 함수

리액트에서 객체나 배열을 다룰 때는 기존 객체를 직접 수정하지 않고, 새로운 객체를 만들어서 상태를 업데이트해야함.

객체 상태 변경 + 불변성 유지

const [user, setUser] = useState({ name: '홍길동', age: 30 });
// 나이만 1살 증가시키고 싶을 때
setUser({ ...user, age: user.age + 1 });

setUser로 상태를 바꾸려면 새로운 객체를 만들어야한다.
...user로 기존 속성을 복사한 후 age만 바꾼 새 객체를 만듬
이렇게 해야 React가 상태가 바뀐 걸 감지하고 컴포넌트를 리렌더링 해준다..

업데이터 함수(현재 상태의 의존O)

setUser((prevUser) => ({ ...prevUser, age: prevUser.age + 1 }));
setUser((prevUser) => ({ ...prevUser, age: prevUser.age + 1 }));

왜 업데이터 함수가 필요할까?

setState는 비동기적으로 작동해서, 여러 번 연속 호출하면 예기치 않은 결과가 생길 수 있음. 위 구문에서 업데이터 함수를 사용하지 않는다면 한번만 증가되는데 업데이트 함수를 사용한다면 두번 증가된다.

왜 업데이터 함수를 사용해야 할까??

useState는 비동기적으로 작동하기 때문에, 같은 렌더링 사이클 내에서 setState를 여러 번 호출하면 이전 상태 값이 꼬일 수 있어서 훨씬 안전하고 좋은 경우가 많다.

at() 양수 또는 음수 인덱스로 접근

const array = [5, 12, 8, 130, 44];
console.log(array.at(2)); // 8
console.log(array.at(-1)); // 44 (마지막 요소)

강사님께 질문

컴포넌트 작성 시 함수 선언식보다 함수 표현식을 선호하는 주된 이유가 호이스팅 방지인지

답변

1. 코드 일관성 - 다른 변수/상수와 같은 방식으로 선언되어 일관된 코드 스타일 유지
2. 화살표 함수의 장점 - 더 간결한 문법과 상위 스코프의 'this' 유지
3. 모던 JavaScript 패턴 - 최신 React와 함수형 프로그래밍 패턴에 더 적합
4. 모듈 시스템 친화적 - import/export와 잘 어울림
5. 호이스팅 방지 - 명확한 코드 흐름 유지에 도움

// 함수 선언식 - 호이스팅됨
function MyComponent() { /*...*/ }

// 함수 표현식 - 호이스팅되지 않음
const MyComponent = () => { /*...*/ };

호이스팅 방지는 중요한 이유 중 하나지만, 그것만이 전부는 아닙니다. 함수 표현식은 전반적으로 현대 React 개발 방식에 더 잘 맞는 여러 장점이 있습니다.

map에서 key에 index를 쓰면 안 되는 이유

React에서 리스트를 렌더링할 때 key는 요소의 고유성을 식별하기 위해 사용되는데 key에 배열의 index를 사용하는 건 권장되지 않는다

index 사용시 문제점

1. 비효율적인 리렌더링 - React는 키를 통해 어떤 요소가 변경되었는지 파악하는데, 인덱스가 바뀌면 변경되지 않은 컴포넌트까지 불필요하게 리렌더링됨.
2. 상태 관리 이슈 - 인덱스가 변경되면 컴포넌트 상태가 섞이거나 혼란을 일으킬 수 있습니다.
3. 성능 저하 - 불필요한 DOM 조작이 발생해 성능이 저하됩니다.

어떤값을 사용해야할까?

1.항목을 고유하게 식별할 수 있는 값
2.항목의 id가 있다면 id를 쓰는게 좋음

React실습 및 css 퍼블리싱

:root에 CSS 변수를 정의

여태껏 사용할 색깔과 gap 같은 걸 root에 정해놓고 써본적이 없는데 이번에 강사님이 이런식으로 하길래 앞으론 이런식으로 사용할 것 같다. 프로젝트 전체에서 같은 색상이나 간격, 폰트 등을 한 곳에서 통일시킬 수 있다.

:root {
  --blue-dark: #1e6f9f;
  --blue: #4ea8de;
  --purple-dart: #5e60ce;
  --purple: #8284fa;
  --gray-700: #0d0d0d;
  --gray-600: #1a1a1a;
  --gray-500: #262626;
  --gray-400: #333333;
  --gray-300: #808080;
  --gray-200: #d9d9d9;
  --gray-100: #f2f2f2;
  --dange: #e25858;
  --gap1: 8px;
  --gap2: 16px;
  --gap3: 32px;
  line-height: 1.4;
  color: var(--gray-100);
}

Tailwind에서 커스텀 색상/간격 정의하는 방법

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'blue-dark': '#1e6f9f',
        blue: '#4ea8de',
        'purple-dark': '#5e60ce',
        purple: '#8284fa',
        gray: {
          700: '#0d0d0d',
          600: '#1a1a1a',
          500: '#262626',
          400: '#333333',
          300: '#808080',
          200: '#d9d9d9',
          100: '#f2f2f2',
        },
        danger: '#e25858',
      },
      spacing: {
        gap1: '8px',
        gap2: '16px',
        gap3: '32px',
      },
    },
  },
}