minjoo_huh.log

📘 이벤트 버블링과 `stopPropagation()` — 구조적 이해와 실전 예시

Wed, 11 Jun 2025 15:03:03 GMT

웹 개발에서 자주 마주치는 개념 중 하나가 이벤트 버블링(Event Bubbling)입니다. 클릭 이벤트 하나로 여러 요소가 함께 반응하는 상황, 혹시 경험해보셨나요?

이번 글에서는 이벤트 버블링의 개념을 구조적으로 정리하고, 회사 보고 체계에 빗대어 직관적인 예시와 함께 stopPropagation() 사용법까지 정리해보겠습니다.

✅ 이벤트 버블링이란?

하위 요소에서 발생한 이벤트가 부모, 조부모 등 상위 요소로 전파되는 현상

DOM은 계층적 구조로 되어 있기 때문에, 이벤트도 트리 구조를 따라 위로 전달됩니다. 이것이 바로 이벤트 버블링입니다.

🔍 예시 코드

 console.log("div 클릭")}>

버튼을 클릭하면 콘솔 출력:

button 클릭
div 클릭

버튼을 눌렀을 뿐인데 div의 이벤트까지 발생했죠? → 이벤트가 버튼에서 시작해 상위 요소로 전달된 것입니다.

🏢 회사 보고 체계로 비교해보자

회사엔 다음과 같은 계층이 있다고 해볼게요:

이때 어떤 보고는 자연스럽게 위로 올라가야 하고, 어떤 일은 굳이 보고하지 않아도 되는 경우도 있죠.

✅ 예시 1: 자연스럽게 보고되는 일 (버블링 허용)

📌 예: 고객 문의, 서버 오류, 재무 관련 요청

신입 사원이 고객의 불만 전화를 받음
팀장에게 보고 → 본부장에게 전달됨
이건 전파되는 게 당연한 흐름입니다

 console.log("팀장도 반응함")}>

결과:

신입이 먼저 반응함  
팀장도 반응함

✅ 이벤트가 위로 전파됨 → 버블링 발생

☕ 예시 2: 굳이 보고 안 해도 되는 일 (버블링 차단)

📌 예: 커피가 떨어졌다 / 화분에 물 주기 / 사무실 청소

신입이 혼자 처리해도 되고
오히려 팀장에게 보고하면 “그건 네가 알아서 해”라는 반응을 들을 수 있음 😅

 console.log("팀장도 반응함")}>
   e.stopPropagation()}>

결과:

신입이 처리함

✅ stopPropagation()으로 상위로 이벤트 전파 차단 → 버블링 방지

🧩 핵심 비교 요약

상황	설명	흐름	처리 방식
보고가 자연스러운 일	고객 불만, 시스템 장애 등	하위 → 상위로 전달	버블링 허용 (기본)
자율처리 가능한 일	커피 부족, 청소 등	하위에서 처리 종료	`stopPropagation()`으로 차단

🧠 정리

이벤트 버블링은 DOM 구조에서 발생하는 자연스러운 전파 현상입니다.
하지만 모든 이벤트가 전파되어야 하는 건 아니며, UX에 따라 제어할 필요가 있습니다.
그런 경우 사용하는 것이 바로 stopPropagation()

💬 마무리

모달, 드롭다운, 알림 UI처럼 클릭이 특정 범위에서만 유효해야 하는 상황이 많아질수록 이벤트의 흐름을 명확히 이해하고 제어하는 게 중요합니다.

stopPropagation()은 단순한 클릭 차단 코드가 아니라, UI의 흐름을 설계하는 중요한 도구입니다. 의도한 흐름을 만들어내기 위해선, 이벤트가 어디까지 흘러야 하는지 스스로 결정할 수 있어야 합니다.

이제 이벤트가 갑자기 이상하게 작동한다면, “이건 위로 버블링된 건가?”부터 의심해보세요!

트리 쉐이킹(Tree-Shaking)과 사이드 이펙트(Side Effect) 쉽게 정리하기 😊

Sun, 01 Jun 2025 04:15:09 GMT

1. 트리 쉐이킹이란? 🌳✨

트리 쉐이킹은 사용하지 않는 코드를 제거해서 최종 파일을 가볍게 만드는 기술이에요.
“나무(tree)를 흔들면 낙엽(leaves)이 떨어지는” 모습처럼, 코드에서도 “안 쓰는 부분만 털어내는” 과정을 생각하면 돼요.
ES2015 모듈(import/export) 방식을 기반으로 동작하며, 대표적인 번들러들이 이 기능을 지원해요.

2. 사이드 이펙트(Side Effect)란? 🎭

사이드 이펙트는 모듈을 불러오기만 해도 외부 상태나 화면에 변화를 일으키는 코드입니다.
- 예를 들어, 파일을 import 하는 순간 데이터베이스에 접근하거나 전역 변수를 바꾸는 경우가 해당돼요.
순수한 로직(pure function)처럼 “입력값만 가지고 결과값을 내는” 코드와 달리, 사이드 이펙트가 있으면 번들러가 “이 모듈이 필요할지도 몰라”라고 판단해서 제거하지 못할 수 있어요.
- 관련 설명
- MDN – 사이드 이펙트 개념

3. 트리 쉐이킹 장점 😊👍

1. 번들 크기 줄이기

안 쓰는 코드를 제거해 주니까 최종 파일이 훨씬 작아져요.
예시: 라이브러리 중 일부 함수만 쓰면, 나머지는 배포 파일에 포함되지 않아요.

2. 로딩 속도 개선

파일 용량이 작아지면 웹페이지 로딩이 빨라져요.
사용자들이 “사이트가 빨리 열린다”라고 느끼면 만족도가 높아집니다.

3. 코드 관리의 명확성

어떤 코드가 실제로 사용되는지 분명해지니까, 불필요한 코드가 쌓이지 않아요.
협업 중에도 “이 부분은 왜 남아 있지?” 하고 쉽게 확인할 수 있습니다.

4. 트리 쉐이킹 단점 😅👎

1. ES 모듈 방식만 지원

반드시 import/export를 사용해야 해요.
예전 require/module.exports 방식으로 작성된 코드에서는 제대로 동작하지 않을 수 있어요.

2. 사이드 이펙트가 있는 코드 제외 안 될 수 있음

코드 안에 외부를 바꾸는 동작이 있으면, 번들러가 “언제 쓰일지 몰라”라고 생각해 제거를 하지 않아요.
이때는 모듈을 순수 로직(pure)으로 분리하거나, package.json에서 사이드 이펙트 설정을 적절히 해줘야 합니다.

3. 설정 복잡도 증가

package.json에 "sideEffects": false 등을 적어 주어야 해요.
이 설정을 안 하면 번들러가 “모든 파일은 사이드 이펙트가 있을 수 있다”라고 간주해 일부 코드를 남길 수 있어요.

5. 사이드 이펙트 장점 & 단점 😊👎

장점
- 1. 필요한 동작(사이드 이펙트)을 보장
  - 예를 들어, 페이지가 로드될 때 특정 설정을 초기화해야 한다면 사이드 이펙트가 꼭 필요합니다.
  - 화면에 “환영합니다”를 자동으로 표시하거나 전역 상태를 세팅하는 코드가 여기에 해당해요.
단점
- 1. 트리 쉐이킹 방해
  - 사이드 이펙트가 있는 모듈은 번들러가 “혹시 사용될지도 몰라”라고 남겨 놓아서 최적화에서 빠질 수 있어요.
- 2. 예측이 어려움
  - 코드가 로딩되는 순간 외부 상태를 바꾸면, 언제 어떤 순서로 동작할지 정확히 알기 어렵습니다.
  - 디버깅이나 유지보수가 복잡해질 수 있어요.

6. 왜 꼭 사용해야 할까? 🎯

1. 빠르고 가벼운 웹페이지

트리 쉐이킹 덕분에 배포 파일 크기가 작아지고, 페이지 로딩 속도가 빨라집니다.
사용자들이 기다림 없이 사이트를 사용할 수 있어요.

2. 서버 트래픽 비용 절감

작은 파일을 전송하면 서버에서 소비하는 네트워크 비용도 줄어듭니다.
결국 비용과 시간을 모두 아낄 수 있어요.

3. 불필요한 코드 관리

프로젝트가 커지면 안 쓰는 코드가 쌓이게 되는데, 트리 쉐이킹은 자동으로 정리해 줍니다.
협업할 때 “이 코드 어디 쓰이는 거야?”라는 고민이 줄어듭니다.

7. 실제 사용 방법 🌐

7-1. Webpack

프로덕션 모드(mode: "production")로 빌드하면 자동으로 트리 쉐이킹을 시도합니다.
package.json에 아래의 코드를 추가하면, “이 프로젝트 안에는 사이드 이펙트가 없다”라고 Webpack에 알려줘서, 쓰이지 않는 파일을 더 적극적으로 제거할 수 있어요.
```
  {
    "sideEffects": false
  }
```
공식 문서:
- 트리 쉐이킹
- 사이드 이펙트 설정

7-2. Rollup

ES 모듈 기반으로 처음부터 트리 쉐이킹을 염두에 두고 설계되었습니다.
rollup.config.js에서 treeshake 옵션을 조정하여 세부 설정이 가능합니다.
공식 문서

7-3. Vite

내부적으로 Rollup을 사용하므로, Vite로 빌드할 때도 트리 쉐이킹이 자동 적용됩니다.
vite.config.js에서 build.rollupOptions 옵션을 통해 사이드 이펙트 제외 대상 등을 설정할 수 있어요.
공식 문서

8. 정리 ✨

트리 쉐이킹
- 나무 흔들듯 “쓰지 않는 코드만 털어내는” 최적화 기술
- 장점: 파일 크기 감소, 로딩 속도 개선, 코드 관리 명확화
- 단점: ES 모듈 필요, 사이드 이펙트 포함 모듈은 제외하지 못할 수 있음
사이드 이펙트
- 모듈 실행 시 화면이나 데이터에 영향을 주는 행동
- 장점: 꼭 필요한 동작(예: 초기화, 로그 남기기)에 필수
- 단점: 트리 쉐이킹 방해, 예측/디버깅 어려움
왜 써야 할까?
1. 빠르고 가벼운 웹페이지
2. 서버 트래픽 비용 절감
3. 불필요한 코드 자동 정리
참고 설정
- package.json에 "sideEffects": false 또는 특정 파일만 제외 지시
- Webpack, Rollup, Vite 등 주요 번들러에서 자동 지원

9. 출처 (References) 📚

1. Webpack 공식 문서

2. Rollup 공식 문서

Tree Shaking

3. Vite 공식 문서

Code Splitting & Dynamic Imports

4. MDN – 사이드 이펙트 설명

https://developer.mozilla.org/en-US/docs/Glossary/Side_effect

5. 블로그 아티클

“Practical Tree Shaking” (검색어 예시)
“Tree Shaking with Side Effects” (검색어 예시)

바렐(Barrel)을 공부하다가 나온 모르는 단어들을 정리해보았습니다! 이 글이 프로젝트 최적화나 웹사이트 성능 개선에 도움이 되었기를 바랍니다! 😊

바렐(Barrel) 파일(index.ts) 사용하기 가이드 ✨😊

Sun, 01 Jun 2025 03:09:06 GMT

1. 바렐(Barrel)이란?

폴더 내부에 여러 모듈(컴포넌트, 유틸, 타입 등)을 한곳에서 재내보내기(re-export)하는 방법
index.ts 파일을 “통(barrel)”처럼 만들어두면, 상위 코드에서 폴더 경로만으로 필요한 모듈을 한 번에 가져올 수 있어요 😉
예시
- 폴더 구조
```
components/
Button/
      Button.tsx
      IconButton.tsx
      index.ts  ← Barrels
```
- index.ts 내부
  - export { default as Button } from "./Button";
    - export { default as IconButton } from "./IconButton";
- 이렇게 하면 다른 파일에서
```
import { Button, IconButton } from "components/Button";
```
  처럼 간단하게 사용 가능 👍

2. 장점 (Pros) 😊

1. import 문이 간결해진다

여러 모듈을 개별 경로로 줄줄이 적을 필요 없이, 폴더명만 써서 한 번에 가져올 수 있어요.
코드 가독성이 눈에 띄게 좋아집니다!

2. 폴더 구조가 한눈에 보인다

index.ts만 보면 “이 폴더 안에 어떤 모듈이 모여 있는지” 바로 파악할 수 있어요.
팀원끼리 협업할 때 “어떤 컴포넌트를 써야 할지” 더 빠르게 찾을 수 있어요.

3. 리팩터링이 편해진다

파일명을 바꾸거나 새로운 파일을 추가/삭제할 때, index.ts만 수정하면 돼요.
다른 파일에서 일일이 import 경로를 고칠 필요가 없어서 효율이 올라갑니다!

4. 의존성 트리(Dependency Tree)가 깔끔해진다

번들러(예: Webpack, Vite)가 바렐을 통과해 실제 구현 모듈을 매핑하므로, 의존성 그래프가 정돈돼요.
Tree‐shaking을 통해 사용하지 않는 코드가 번들에 포함되지 않도록 할 수 있어요.

3. 단점 (Cons) 😅

1. 바렐 파일이 너무 커질 수 있다

폴더 안에 모듈이 너무 많으면 index.ts도 길어져 관리하기 번거로워질 수 있어요.
“바렐이 또 다른 바렐을 가져오는” 식의 중첩 구조(바렐 체인)가 생길 위험이 있습니다.

2. 트리 쉐이킹(Dead Code Elimination) 주의

export * from "./A"; 같은 방식으로 모든 걸 일괄 re‐export하면, tree‐shaking이 제대로 동작하지 않을 수 있어요
필요한 모듈만 정확히 export해 주지 않으면, 사용하지 않는 모듈도 번들에 포함될 가능성이 있습니다.

3. 순환 참조(Circular Dependency) 위험

서로 다른 바렐끼리 재내보내기를 하게 되면 순환 의존성이 발생할 수 있어요.
예측하지 못한 에러가 나거나 빌드가 중단될 수 있으니 주의해야 합니다.

4. 바렐에만 의존 경로가 집중됨

모듈 간 의존 순서가 바렐 내부에 숨어 있으면, 디버깅이 어려워질 수 있어요.
특정 모듈이 사이드 이펙트(side effect) 를 실행해야 하는 상황에서는, 바렐을 타고 순서가 뒤바뀌면 문제가 생길 수 있습니다.

4. 주의할 점 & 베스트 프랙티스 (Cautions & Best Practices) ⚠️

1. 바렐 크기 관리

폴더 안에 5~10개 정도의 관련 모듈이 있을 때 바렐을 만드는 것이 적당해요.
너무 많은 모듈을 한 번에 묶으면 가독성과 유지보수가 오히려 어려워집니다.

2. 명시적 재내보내기(explicit export)

export * from "./SomeModule"; 대신
```
  export { default as SomeModule } from "./SomeModule";  
  export type { SomeType } from "./SomeModule";  
```
와 같이 개별 export를 사용하면, tree‐shaking이 더 잘 동작해요.
사용하지 않는 코드는 번들에서 제외되도록, 불필요한 모듈을 최대한 배제합시다.

3. 순환 참조(Avoid Circular Dependency)

바렐끼리 서로 참조하지 않도록 신경 써야 합니다.
“이 폴더의 index.ts는 같은 폴더 내부의 모듈만 재내보낸다”는 원칙을 지키면 순환 의존성 문제를 피할 수 있어요.

4. 폴더/파일 네이밍 일관성

폴더마다 동일한 네이밍 컨벤션(단수형 vs 복수형 등)을 사용하여 헷갈리지 않도록 해요.
예:
```
  components/
    Button/
      Button.tsx
      IconButton.tsx
      index.ts
```
이런 식으로 네이밍하면 누구나 구조를 쉽게 이해할 수 있어요.

5. 번들러 설정 확인

package.json에 "sideEffects": false 옵션을 추가하거나, Webpack/Rollup/Vite 설정에서 tree‐shaking 관련 옵션을 확인해 주세요.
그렇지 않으면 의도하지 않은 코드가 번들에 포함될 수 있습니다.

5. 실무 적용 예시 (Examples) 🌟

5-1. 컴포넌트 바렐

폴더 구조

src/
components/
  Button/
    Button.tsx
    IconButton.tsx
    MenuButton.tsx
    index.ts
  Modal/
    BaseModal.tsx
    ConfirmModal.tsx
    index.ts

components/Button/index.ts

  export { default as Button } from "./Button";
  export type { ButtonProps } from "./Button";

  export { default as IconButton } from "./IconButton";
  export type { IconButtonProps } from "./IconButton";

  export { default as MenuButton } from "./MenuButton";
  export type { MenuButtonProps } from "./MenuButton";

사용 예시

  // Before
  import Button from "components/Button/Button";
  import IconButton from "components/Button/IconButton";

  // After
  import { Button, IconButton } from "components/Button";

5-2. 타입 바렐

폴더 구조

  src/
    types/
      User.ts
       Post.ts
        Comment.ts
        index.ts

types/index.ts

export * from "./User";
export * from "./Post";
export * from "./Comment";

사용 예시

import { User, Post, Comment } from "types";

6. 장점 vs 단점 한눈에 정리 👍👎

구분	장점	단점
가독성	- import 문이 간결해지며 코드가 깔끔해집니다.	- 바렐 파일 자체가 비대해지면 관리하기 어려워집니다.
유지보수	- 파일명 변경, 모듈 추가/삭제 시 `index.ts`만 수정하면 됩니다.	- 잘못 구성된 바렐은 순환 의존성(circular dependency)을 유발할 수 있습니다.
의존성 관리	- 번들러가 의존성 트리를 깔끔하게 정리해 줍니다.	- `export * from ...` 방식으로 모든 걸 re-export하면 tree-shakng이 제대로 안 될 수 있습니다.
리팩터링	- 필요한 모듈만 올바로 export해 두면 번들 크기가 줄어듭니다.	- 사이드 이팩트(side effect)가 있는 모듈을 바렐을 통해 잘못 로딩하면 예기치 않은 버그가 발생할 수 있습니다.

7. 주의할 점 다시 한번! ⚠️

바렐을 “만드는 목적”은 편리함과 가독성 향상이지, 무턱대고 모든 모듈을 한곳에 몰아넣으라는 뜻이 아닙니다.
“폴더마다 관련 모듈을 5~10개 내외로 묶어두는” 정도가 적당하며, 그 이상이라면 폴더를 더 잘게 쪼개거나 바렐 범위를 좁혀보세요.
번들러 설정(특히 tree‐shaking, sideEffects 옵션)과 순환 참조 여부를 꼼꼼히 점검해야 합니다.

8. 참고 자료 (References) 📚

1. TypeScript 공식 문서

2. Webpack 공식 문서

3. Vite 공식 문서

4. 블로그/아티클

“Barrel Files in TypeScript” by Basarat Ali Syed
“Organizing Modules with Barrels” from Practical TypeScript Tutorial

✨ 정리 끝! ✨ 바렐 패턴을 적절히 활용하면 import 문이 깔끔해지고, 유지보수·리팩터링이 한결 수월해집니다. 하지만 과도한 바렐 사용이나 순환 의존성, tree‐shaking 누락 등에 주의하면서 상황에 맞게 적용하세요! 😎🛠

Happy Coding! 🚀

💡 CSS 100vh vs 100% 제대로 이해하고 쓰기

Fri, 30 May 2025 14:24:30 GMT

CSS에서 높이를 설정할 때 가장 자주 쓰는 단위인 100vh와 100%. 비슷해 보이지만 둘은 동작 방식이 완전히 다릅니다.

이번 글에서는 100vh와 100%의 차이, 예제 코드, 실제 동작 방식, 그리고 자주 하는 실수와 해결법까지 모두 정리해볼게요!

✅ 1. `100vh`란?

vh는 Viewport Height의 약자로, 브라우저 화면 높이 기준입니다.

100vh = 브라우저 화면 전체 높이
50vh = 브라우저 화면의 절반 높이

.section {
  height: 100vh;
}

📌 위 코드는 .section 요소를 브라우저 화면 전체 높이만큼 채웁니다.

✅ 2. `100%`란?

100%는 부모 요소의 높이를 기준으로 동작합니다.

.parent {
  height: 500px;
}

.child {
  height: 100%;
}

📌 이 경우 .child는 정확히 500px 높이가 됩니다.

❗ 주의: 부모 요소에 height가 없으면, 100%는 아무 효과가 없습니다.

🔍 비교 요약

속성	기준	특징
`100vh`	브라우저 창	항상 정확하게 적용됨
`100%`	부모 요소	부모가 `height`를 가져야 적용 가능

🧪 실전 예제 비교

예제 HTML

① `height: 100vh`

.box {
  height: 100vh;
  background: skyblue;
}

🟢 결과: .box는 브라우저 높이만큼 정확하게 채워짐

② `height: 100%` (부모 높이 없음)

.wrapper {
  background: lightgray;
}

.box {
  height: 100%;
  background: red;
}

🔴 결과: .wrapper가 height가 없기 때문에, .box는 높이가 0 → 보이지 않음

③ `height: 100%` (부모 높이 있음)

.wrapper {
  height: 400px;
}

.box {
  height: 100%;
  background: red;
}

🟢 결과: .box는 400px 높이로 정확히 적용됨

💡 추가 팁: 위치와 높이는 다르다!

.box {
  height: 100vh;
  margin-top: 40px;
}

📌 이 코드는 높이 100vh인 박스를 위에서 40px 아래에 위치시킵니다.

즉, 실제 위치는 40px ~ 840px이 되죠. vh는 크기일 뿐, 시작 위치를 의미하지는 않습니다.

❌ 자주 하는 실수

/* ❌ 잘못된 예시 */
height: 100vh - 1rem;

이렇게는 CSS가 인식하지 못해 무시됩니다.

✅ 올바른 방법은 calc() 사용!

/* ✅ 제대로 된 예시 */
height: calc(100vh - 1rem);

🎯 언제 뭘 써야 할까?

상황	추천 속성
화면 전체를 채우고 싶을 때	`100vh`
부모 요소와 같은 높이로 맞추고 싶을 때	`100%` (단, 부모가 `height`를 가질 때만)
뷰포트에서 특정 영역만 제외하고 싶을 때	`calc(100vh - xxx)`

✅ 마무리 요약

속성	기준	특징
`100vh`	브라우저 화면 전체	항상 일정한 높이 보장
`100%`	부모 요소의 높이	부모가 `height`를 설정해야 의미 있음

📚 HTML5 시맨틱 태그 완전 정복

Fri, 30 May 2025 13:03:25 GMT

🧠 시맨틱 태그란?

시맨틱(Semantic)이란 "의미론적인"이라는 뜻이에요. 즉, 시맨틱 태그(Semantic Tag)는 "이 태그가 어떤 역할을 하는지 그 이름만 보고도 알 수 있도록 만든 HTML 태그"를 의미해요.

과거에는

, 같은 의미 없는 태그만 써서 모든 구조를 만들었지만, HTML5부터는 구조를 더 명확하게 설명하기 위해

같은 시맨틱 태그가 도입되었어요.

🔍 왜 시맨틱 태그를 사용할까?

이유	설명
✅ 의미 전달	코드만 봐도 어떤 역할을 하는지 알 수 있어요
✅ SEO 향상	검색 엔진이 구조를 더 잘 이해할 수 있어요
✅ 접근성 향상	스크린 리더 등의 보조 기기가 의미를 파악할 수 있어요
✅ 유지보수 편리	개발자나 협업자들이 코드를 이해하기 쉬워요

이제 본격적으로 자주 사용하는 시맨틱 태그들을 하나씩 살펴볼게요!

✅ 1.

✔ 정의

웹페이지의 주요 콘텐츠 영역을 나타내요. 페이지마다 하나만 존재해야 하며, 사이트 전체에서 공통으로 반복되는 헤더, 네비게이션, 푸터 등은 포함하지 않아요.

✔ 사용 예시


  HTML 시맨틱 태그란?
  시맨틱 태그는 의미를 갖는 태그입니다...

✔ 어디에 사용될까?

블로그 본문
기사 내용
제품 상세 정보
서비스 소개 페이지의 핵심 설명

✅ 2.

✔ 정의

하나의 주제(topic) 또는 기능 단위를 묶는 구획이에요. 보통 제목(

)을 포함하며, 논리적으로 관련된 콘텐츠 덩어리에 사용해요.

✔ 사용 예시


  시맨틱 태그의 장점
  접근성과 SEO에 유리합니다...

✔ 어디에 사용될까?

블로그에서 "관련 글", "댓글", "작성자 소개" 구역
포트폴리오에서 "프로젝트 목록", "기술 스택" 구역
메인 페이지에서 각각의 배너나 섹션 단위

✅ 3.

✔ 정의

독립적으로 구분 가능한 콘텐츠 단위에 사용돼요. 그 자체로 의미를 갖고, 외부에 단독 발행이 가능한 콘텐츠에 적합해요.

✔ 사용 예시


  HTML5란?
  HTML5는 최신 웹 표준입니다...

✔ 어디에 사용될까?

블로그 글 하나
뉴스 기사
게시판 글
제품 리뷰, 유저 후기

✅ 4.

✔ 정의

내비게이션 링크 집합을 나타내요. 웹사이트의 메뉴, 목차, 페이지 이동 등 사용자 이동을 위한 링크 그룹에 사용해요.

✔ 사용 예시


  
    홈
    블로그
    문의

✔ 어디에 사용될까?

사이트 상단 메뉴 바
사이드 메뉴바
문서의 목차 영역

✅ 5.

✔ 정의

보조적인 콘텐츠 영역이에요. 메인 콘텐츠와 직접적인 연결은 없지만, 관련 있거나 부가적인 정보를 제공하는 데 사용돼요.

✔ 사용 예시


  관련 글
  
    HTML5 기본 구조
    CSS 모듈이란?

✔ 어디에 사용될까?

블로그의 관련 글, 광고, 인기 글 목록
뉴스 사이트의 작가 소개
기술문서에서 태그 목록, 참고 링크

🎯 시맨틱 태그 요약 비교표

용도	특징	대표 사용 위치
주요 콘텐츠	페이지당 1개만	본문, 핵심 콘텐츠
주제별 구획	제목 포함됨	페이지 단위 구간
독립적인 콘텐츠	단독 발행 가능	블로그 글, 게시물
내비게이션 링크	링크 집합	메뉴바, 목차
보조 콘텐츠	참고/광고/연관 내용	사이드바, 관련 글

✍️ 마무리 한 마디

시맨틱 태그는 단지 태그의 이름만 바꾸는 게 아니라, 의미를 명확히 하여 검색엔진 최적화(SEO)와 접근성 향상에도 큰 도움을 줍니다.

정확한 의미를 이해하고 적절한 위치에 사용하면, 구조적으로 탄탄하고 유지보수하기 쉬운 웹페이지를 만들 수 있어요! 💪

🎯 React Router에서 Router는 왜 index.tsx에 있어야 할까?

Thu, 29 May 2025 05:17:36 GMT

useLocation 훅을 사용하려는데 자꾸 에러가 난다면, Router 위치를 의심해보세요!

🧩 문제 상황

React 프로젝트에서 다음처럼 AppRouter 내부에서 useLocation()을 사용하면서 Router까지 함께 선언하는 경우:

import { Router, useLocation } from "react-router-dom";

const AppRouter = () => {
  const location = useLocation(); // ❌ 여기서 에러 발생!

  return (
    
      {/* Routes 구성 */}
    
  );
};

이럴 때 다음과 같은 오류가 발생합니다:

❗useLocation() must be used within a component

✅ 이유: useLocation은 Router의 자식 컴포넌트여야 동작

React Router의 모든 훅들 (useLocation, useNavigate, useParams 등)은 내부적으로 Router Context를 참조합니다. 즉, 이 훅들이 정상 작동하려면 반드시 Router 컴포넌트 아래(자식)에서 호출돼야 해요.

✅ 해결 방법

🔧 Router는 index.tsx에, AppRouter는 경로 구성만

📁 index.tsx (또는 main.tsx)

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import AppRouter from "./AppRouter";

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  
    
      
    
  
);

📁 AppRouter.tsx

import { Routes, Route, useLocation } from "react-router-dom";
import Header from "./components/common/Header";
import StudyRoomHeader from "./components/studyRoom/StudyRoomHeader";
import HomePage from "./pages/HomePage";
import StudyRoomPage from "./pages/StudyRoomPage";

const AppRouter = () => {
  const location = useLocation();
  const isStudyRoom = location.pathname.startsWith("/study-room");

  return (
    <>
      {isStudyRoom ?  : }
      
        } />
        } />
      
    
  );
};

export default AppRouter;

❓ 그럼 useLocation을 안 쓰면 Router를 어디에 둬도 되는 걸까?

✔️ 맞습니다.

만약 AppRouter 내부에서 useLocation()이나 useNavigate(), useParams() 같은 훅을 전혀 사용하지 않는다면, Router를 AppRouter 안에 두더라도 기술적으로는 에러가 나지 않습니다.

하지만 이건 우연히 작동하는 것처럼 보일 뿐, 다음과 같은 단점이 있습니다:

🚫 내부에서 Router를 선언하면 생기는 문제점

문제	설명
❌ 위치 부적절	라우팅 환경과 구조를 한 컴포넌트에 섞게 됨
❌ 유지보수 어려움	추후 `useLocation` 사용 시 다시 구조 변경해야 함
❌ 컨텍스트 중첩 오류	중첩된 Router나 미묘한 버그 유발 가능

✅ 구조를 나누는 게 좋은 이유

장점	설명
✅ 안정성	모든 라우터 훅들이 안전하게 작동
✅ 역할 분리	`index.tsx` → 환경 제공, `AppRouter.tsx` → 경로 구성
✅ 확장성	이후 `Layout`, `AuthRoute` 추가하기 쉬움
✅ 예측 가능	동작 위치가 명확하므로 디버깅이 쉬움

🧠 정리

상황	Router 위치	설명
`useLocation()` 사용함	`index.tsx` (최상단)	반드시 필요
아무 훅도 사용 안 함	내부에 둬도 에러 없음	그러나 비추천

✨ 결론

“Hook을 쓰려면, 그 Hook을 인식할 수 있는 환경 안에 있어야 한다.”

React Router의 훅을 쓰고 싶다면 반드시 Router는 컴포넌트 외부, 보통은 index.tsx에 위치해야 합니다. 그렇지 않으면 훅은 작동하지 않거나 에러가 발생합니다. 안 쓰더라도 미래를 생각해 구조를 나눠두는 것이 더 좋은 선택입니다. 🌱

📘 React.FC란 무엇인가? – TypeScript에서의 사용과 장단점 정리

Fri, 23 May 2025 15:59:55 GMT

React와 TypeScript를 함께 사용할 때, 흔히 보게 되는 타입이 하나 있다. 바로 React.FC 또는 React.FunctionComponent이다. 이 글에서는 React.FC가 무엇인지, 어떤 역할을 하는지, 실제 현업에서는 어떤 방식을 선호하는지, 그리고 구체적인 예시를 통해 정리해보자.

✅ 1. React.FC란?

React.FC는 Function Component의 타입 정의를 도와주는 제네릭(Generic) 타입이다. 즉, 컴포넌트가 어떤 props를 받을지 명시할 수 있도록 도와주는 타입 도우미라고 이해하면 된다.

type Props = {
  name: string;
};

const Hello: React.FC = ({ name }) => {
  return Hello, {name};
};

위 코드에서 Hello 컴포넌트는 name이라는 문자열 props를 받으며, React.FC를 통해 이 타입을 명시하고 있다.

🧠 2. TypeScript에서 React.FC가 하는 일

Function Component로 정의
- 컴포넌트가 함수형이라는 것을 타입으로 명확하게 알려줌
children을 자동 포함
- props.children이 자동으로 타입에 포함되어 따로 명시하지 않아도 사용 가능
반환값을 ReactElement로 고정
- 컴포넌트가 JSX 또는 ReactNode를 반환하는 것을 타입으로 보장함

⚖️ 3. React.FC의 장단점

✅ 장점

장점	설명
🔹 `children` 자동 포함	컴포넌트 내부에서 `props.children`을 바로 사용할 수 있음
🔹 명시적인 반환 타입	`ReactElement`를 반환하는 걸 보장해줌
🔹 초기 학습자에게 직관적	한눈에 "이건 함수형 컴포넌트야"라는 걸 알 수 있음

❌ 단점

단점	설명
🔸 `children` 자동 포함으로 인한 오류	사용하지 않는 컴포넌트에도 `children`이 허용됨 (실수 가능)
🔸 제너릭 사용 제약	등의 제너릭을 적용하기가 번거로움
🔸 함수의 반환값 타입을 중복 명시	TypeScript가 추론 가능한 값을 굳이 명시할 필요 없음

🆚 4. React.FC vs 명시적 Props 타입

✅ React.FC 방식

type Props = {
  name: string;
};

const MyComponent: React.FC = (props) => {
  return {props.name};
};

✅ 명시적 타입 방식 (권장되는 추세)

type Props = {
  name: string;
};

const MyComponent = ({ name }: Props) => {
  return {name};
};

🔍 5. 어느 방식이 더 좋은가?

기준	React.FC	직접 타입 명시
`children` 자동 포함	✅ O	❌ 명시 필요
타입 추론 유연성	❌ 제한 있음	✅ 자유로움
코드 길이	❌ 길어짐	✅ 간결함
최신 추세	❌ 지양	✅ 선호됨

💡 대부분의 기업, 라이브러리, 공식 문서에서는 React.FC 사용을 지양하는 추세다. 특히 children 자동 포함으로 발생할 수 있는 불필요한 오류 방지와 타입 추론 유연성 확보가 큰 이유다.

⏰ 언제 React.FC를 써도 괜찮을까?

상황	React.FC 사용 여부
간단한 프로토타입 개발	✅ 괜찮음
`children` 포함한 컴포넌트 작성 시	✅ 명시 없이 사용 가능
제너릭 사용이 필요한 상황	❌ 지양
규모 있는 팀 프로젝트	❌ 가급적 명시적 방식 사용 권장

✅ 결론

React.FC는 타입스크립트에서 함수형 컴포넌트를 쉽게 선언할 수 있도록 도와주는 제네릭 타입이다.
하지만 children 자동 포함과 제네릭 제약 때문에 요즘은 직접 Props를 명시하는 방식을 선호한다.
상황에 따라 적절히 선택하되, 팀 내 코드 스타일 가이드에 맞춰 통일하는 것이 중요하다.

📝 한 줄 요약

React.FC는 편리하지만, 더 명시적이고 유연한 직접 Props 타입 선언 방식이 현재 TypeScript + React 개발에서 더 많이 사용된다.

🧠 실시간 통신의 두 가지 방식: Polling vs WebSocket 정리

Fri, 23 May 2025 09:15:52 GMT

실시간 기능이 필요한 채팅, 알림, 라이브 데이터 등에선 데이터를 실시간으로 주고받는 방식이 매우 중요합니다. 대표적으로 사용되는 방식은 두 가지입니다:

🕓 Polling (폴링)
🔌 WebSocket (웹소켓)

이번 글에선 이 두 가지 방식을 비교하고, 어떤 상황에서 어떤 방식을 사용하는 게 좋은지 살펴보겠습니다.

✅ 1. 폴링(Polling)이란?

일정한 시간 간격으로 서버에 “새 소식 있어요?”라고 계속 물어보는 방식입니다.

폴링은 클라이언트가 정해진 시간마다 서버에 요청을 보내, 새로운 데이터가 생겼는지 확인하는 방식입니다.

[클라이언트] → 3초마다 → [서버] "새 메시지 있어?"
[서버] → "있어!" 또는 "없어~"

🔹 특징

실시간처럼 보이지만, 실제로는 주기적으로 확인
구현이 매우 간단함 (setInterval만 사용해도 가능)
새로운 데이터가 없어도 계속 요청하게 되어 서버에 부담이 될 수 있음

✅ 2. 웹소켓(WebSocket)이란?

한 번 연결하면 서버와 클라이언트가 실시간으로 메시지를 주고받는 방식입니다.

웹소켓은 서버와 클라이언트가 한 번 연결한 뒤, 지속적인 연결을 유지하면서 양방향 통신이 가능한 방식입니다.

[클라이언트] 🔗 [서버] ←→ 실시간 대화

🔹 특징

실시간성이 매우 뛰어남 (채팅, 알림 등 즉시 반영이 필요한 기능에 적합)
연결을 유지하기 때문에 불필요한 반복 요청이 없음
설정이 다소 복잡하지만, 효율적이고 빠름

🔁 Polling vs WebSocket – 간단 비교표

항복	Polling	WebSocket
작동 방식	일정 가격마다 요청	한 번 연결 후 계속 통신
실시간성	느림 (3~5초 간격)	매우 빠름 (즉시 전송)
서버 부담	요청 많으면 과부하	적음 (지속 연결 유지)
구현 난이도	쉽다 (단순한 요청 반복)	중간 이상 (서버/클라이언트 설정 필요)
브라우저 호환성	매우 좋음	최신 브라우저 대부분 OK
사용 예	뉴스 피드, 테스트 채팅	실시간 채팅, 알림, 주식, 게임

💬 MEETTY 프로젝트에서의 활용

우리 프로젝트인 MEETTY에서는 다음과 같은 방식으로 활용할 수 있습니다:

기능	추천 방식	이유
채팅방 테스트	Polling	빠르고 간단하게 구현 가능
실제 채팅/화상채팅	WebSocket	실시간 반응이 중요함
읽지 않은 메시지 수 확인	Polling	주기적으로 확인하면 충분
참여자 수 실시간 표시	WebSocket	변화가 생기면 즉시 반영 필요

🧪 React에서 Polling 구현 예시

import { useEffect, useState } from "react";
import axios from "axios";

const ChatPolling = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const interval = setInterval(() => {
      axios.get("/api/messages").then((res) => {
        setMessages(res.data);
      });
    }, 3000); // 3초마다 서버에 새 메시지 요청
    return () => clearInterval(interval);
  }, []);

  return (
    
      채팅창
      {messages.map((msg, idx) => (
        {msg.content}
      ))}
    
  );
};

export default ChatPolling;

🐾 마무리 한 마디

정리해보니 폴링은 구현이 간단해서 초반 테스트에 좋고, 웹소켓은 실시간 반응이 필요한 기능에 더 잘 어울린다는 걸 알게 됐다. MEETTY 프로젝트에서도 상황에 맞게 둘 중 적절한 방식을 선택하면 좋을 것 같다.

🌈 CSS 파일 vs CSS Module 완벽 정리

Wed, 21 May 2025 16:18:04 GMT

프론트엔드 개발을 하다 보면 스타일을 적용할 때 style.css처럼 일반 CSS 파일을 사용하는 경우도 있고,
.module.css라는 조금은 생소한 확장자를 마주치는 경우도 있습니다.

이 둘은 어떻게 다르고, 언제 무엇을 써야 할까요?

🔍 CSS란 무엇인가?

CSS(Cascading Style Sheets)는 HTML 문서의 시각적 표현을 담당하는 스타일링 언어입니다.

/* style.css */
.button {
  background-color: #4caf50;
  color: white;
}

이 스타일은 모든 컴포넌트, 모든 파일에서 사용할 수 있습니다.
즉, 전역(Global) 으로 작동합니다.

🧩 CSS Module이란?

CSS Module은 컴포넌트 단위로 스타일을 캡슐화하는 방식입니다. 파일 이름이 Something.module.css처럼 되어 있고, JS/TS 파일에서 객체처럼 불러와서 사용합니다.

/* Button.module.css */
.button {
  background-color: #4caf50;
  color: white;
}

// Button.tsx
import styles from './Button.module.css';

이렇게 하면 이 button 클래스는 오직 이 컴포넌트에서만 적용됩니다.

⚖️ CSS vs CSS Module — 비교 정리

항목	일반 CSS (`.css`)	CSS Module (`.module.css`)
적용 범위	전역	로컬 (컴포넌트 단위)
클래스 충돌	발생 가능 (주의 필요)	충돌 없음 (자동 해시 처리)
스타일 사용 방식	`className="..."`	`className={styles.class}`
코드 유지보스	규모가 커지면 어렵다	컴포넌트별로 관리 쉬움
선언 위치	어디서든 가능	import한 컴포넌트 내에서만 사용
권장 상황	전체적인 레이아웃, 폰트, 공통 스타일	컴포넌트 스타일, 재사용 컴포넌트

✅ 실제 사용 예시

📁 디렉토리 구조

src/
├── components/
│   ├── Button.tsx
│   └── Button.module.css
├── App.tsx
└── global.css

📄 Button.module.css

.button {
  background-color: royalblue;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: none;
  font-weight: bold;
}

📄 Button.tsx

import React from 'react';
import styles from './Button.module.css';

const Button: React.FC = () => {
  return ;
};

export default Button;

📄 App.tsx

import React from 'react';
import './global.css'; // 전역 CSS
import Button from './components/Button';

function App() {
  return (
    
      CSS vs CSS Module
      
  );
}

export default App;

💡 어떤 걸 선택해야 할까?

상황	추천 방식
리셋, 폰트, 전역 테마 설정	일반 CSS
버튼, 카드, 섹션 등 개별 UI 컴포넌트	CSS Module
대규모 팀 프로젝트	CSS Module (충돌 방지)

✅ 한 줄 요약

전역 스타일은 .css, 컴포넌트 스타일은 .module.css로!

📚 마무리

React에서 CSS를 다룰 때는 단순히 보이는 것만 생각하지 말고, 구조적으로 스타일이 어디까지 영향을 미치는가를 고려하는 것이 중요합니다.

CSS Module을 잘 활용하면 유지보수도 쉬워지고, 팀원 간 충돌도 줄일 수 있어요.

🚀 Vite + React 프로젝트를 GCP에 배포하기

Thu, 15 May 2025 15:47:29 GMT

Vite는 빠른 개발 환경을 제공하는 프론트엔드 빌드 도구입니다. 이번 글에서는 Vite + React로 제작한 프로젝트를 GCP 환경에 배포하는 과정을 단계별로 정리해보겠습니다. ✅

✅ 1. 패키지 설치 및 빌드

먼저, Vite 프로젝트의 패키지를 설치하고 빌드합니다.

    cd 프로젝트명
    npm install
    npm run build

위 명령어를 통해 dist 폴더가 생성됩니다. dist 폴더에는 배포할 정적 파일들이 포함됩니다.

✅ 2. gcloud CLI 환경 설정 및 SSH 키 생성

gcloud CLI란?

gcloud CLI는 GCP 인스턴스에 접근하고 관리하는 명령줄 도구입니다. SSH 키 생성, VM 인스턴스 접속, 파일 전송 등을 지원합니다.

gcloud CLI 다운로드 및 설치:

    gcloud auth login
    gcloud config set project

SSH 키 생성 및 접속:

SSH 키 자동 생성

    gcloud compute ssh  --zone=

~/.ssh/google_compute_engine 경로에 SSH 키가 생성되고 서버에 자동 등록됩니다.

기존 SSH 키 삭제 및 재생성:

  rm -f ~/.ssh/google_compute_engine*
  gcloud compute ssh  --zone=

수동 SSH 키 생성:

  ssh-keygen -t rsa -f ~/.ssh/my-gcp-key

생성된 공개 키를 GCP Console > Metadata > SSH Keys에 추가합니다.

✅ 3. 파일 전송 (gcloud CLI vs SCP)

Vite + React 프로젝트의 dist 폴더를 GCP 서버에 전송하는 방법은 gcloud CLI와 SCP 두 가지 방식이 있습니다. 아래는 두 방법의 차이점과 각각의 명령어를 정리한 표입니다:

구분	gcloud CLI	SCP
사용 명령어	`gcloud compute scp`	`scp`
SSH 키 관리	자동 관리 (`~/.ssh/google_compute_engine`)	수동 관리 (`-i 옵션 사용`)
파일 경로	`/home//frontend/`	`/home//frontend/`
전송 방식	GCP CLI 내부 명령어로 전송	Linux, macOS 기본 명령어로 전송
명령어 예시	`gcloud compute scp --recurse ./dist/ :/home//frontend --zone=`	`scp -i ~/.ssh/google_compute_engine -r ./dist/* @:/home//frontend/`

✅ 권장 방법:

GCP 환경에 익숙하거나 프로젝트가 GCP CLI로 구성된 경우 gcloud CLI를 사용하는 것이 편리합니다. SSH를 통해 수동으로 관리하거나, GCP CLI 환경이 없는 경우 SCP를 사용하는 것이 좋습니다.

gcloud CLI로 파일 전송:

    gcloud compute scp --recurse ./dist/ :/home//frontend --zone=

SCP로 파일 전송:

    scp -i ~/.ssh/google_compute_engine -r ./dist/* @:/home//frontend/

✅ 4. 서버에서 dist 폴더 이동 및 Nginx 설정

서버로 접속:

    gcloud compute ssh  --zone=

dist 폴더 이동:

    sudo mv /home//frontend/* /var/www/html/

Nginx 설정 파일 열기:

    sudo nano /etc/nginx/sites-available/default

Nginx 설정 추가:

    server {
        listen 80;
        server_name ;

        root /var/www/html;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }

설정 저장 후 Nginx 재시작:

    sudo nginx -t
    sudo systemctl restart nginx

✅ 5. 배포 확인 및 로그 확인

웹 브라우저에서 접속:

http://서버IP로 접속하여 배포된 Vite + React 앱이 정상적으로 표시되는지 확인합니다.
Nginx 로그 확인:

    sudo tail -f /var/log/nginx/access.log
    sudo tail -f /var/log/nginx/error.log

이제 Vite + React에서 빌드한 dist 파일이 GCP 서버에 배포되었습니다!

이 과정에서 발생할 수 있는 에러나 추가적인 최적화 방법에 대해선 다음 글에서 다루도록 하겠습니다. 👍😊

TypeScript로 전환 후 Vite + React에서 발생한 모듈 경로 오류, 해결책은 단순히 VSCode 재시작?

Thu, 15 May 2025 13:07:50 GMT

Vite + React 환경에서 .jsx 파일을 .tsx로 변경한 후, 모듈에 대한 선언 파일을 찾을 수 없습니다라는 TypeScript 오류를 마주한 적이 있는가? 나도 동일한 문제를 겪었다. tsconfig.json을 열심히 뒤져보고, Vite 설정까지 점검했지만, 해결책은 의외로 간단했다.

✅ 문제 상황

Vite 프로젝트에서 .tsx 파일을 import할 때, 아래와 같은 에러가 발생했다:

모듈 './Login'에 대한 선언 파일을 찾을 수 없습니다. 'c:/Users/프로젝트경로/src/Login.tsx'에는 암시적으로 'any' 형식이 포함됩니다.ts(7016)

이 오류는 TypeScript가 .tsx 파일을 인식하지 못하거나 경로를 제대로 읽지 못할 때 발생한다. tsconfig.json의 경로 설정이 잘못되었거나, VSCode가 변경 사항을 인식하지 못한 경우다.

✅ 문제 원인 분석

이 오류의 원인은 다름 아닌 VSCode의 캐시 문제였다.

VSCode는 프로젝트를 열 때 tsconfig.json의 설정을 메모리에 캐싱해둔다. 그런데 .jsx에서 .tsx로 확장자를 변경하거나 파일 경로를 수정하면, TypeScript 서버가 이를 즉시 반영하지 못할 수 있다.

이 경우, TypeScript 서버는 기존 캐시를 사용해 여전히 .tsx 파일을 찾지 못한다고 인식하게 된다.

✅ 해결 방법

해결 방법은 아주 간단하다. 아래 두 가지 방법 중 하나만 수행하면 된다:

VSCode 재시작:

파일 경로나 설정이 변경되었을 때, VSCode가 이를 즉시 반영하지 못하는 경우가 있다.

따라서 VSCode를 완전히 종료하고 다시 실행하면 설정이 새로 반영된다.

TypeScript 서버 재시작:

Ctrl + Shift + P 또는 Cmd + Shift + P를 눌러 명령어 팔레트를 열고 TypeScript: Restart TS Server를 입력하고 실행한다.

이 과정에서 TypeScript 서버의 캐시가 초기화되고, 새로운 경로 설정이 반영된다.

✅ 왜 VSCode 재시작이 효과적일까?

VSCode는 프로젝트를 열 때 tsconfig.json과 vite.config.ts의 설정을 메모리에 저장한다.

.jsx에서 .tsx로 파일 확장자를 변경하거나, tsconfig.json의 include 경로를 수정해도, TypeScript 서버가 이를 즉시 반영하지 못할 때가 있다.

이럴 경우, VSCode를 재시작하거나 TypeScript 서버를 재시작하면, 캐시가 초기화되면서 새로운 설정이 반영된다.

✅ 결론

TypeScript 설정 파일을 아무리 수정해도 에러가 해결되지 않는다면, 가장 먼저 시도해볼 해결책은 VSCode 재시작이다.

TypeScript 서버가 새로운 설정을 인식하지 못할 때, 가장 빠른 해결책은 재시작이다.

작은 오류도 해결 과정에서 큰 배움이 될 수 있다. 이번 경험을 통해 VSCode의 캐시 시스템이 어떻게 동작하는지, 그리고 재시작이 왜 강력한 해결책인지 확실히 알게 되었다.

Objects are not valid as a React child (found: [object Date]).

Wed, 22 Jan 2025 16:26:56 GMT

Objects are not valid as a React child (found: [object Date]). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (http://localhost:3000/static/js/bundle.js:15364:11)
    at reconcileChildFibersImpl (http://localhost:3000/static/js/bundle.js:15679:9)
    at http://localhost:3000/static/js/bundle.js:15691:31
    at reconcileChildren (http://localhost:3000/static/js/bundle.js:17064:115)
    at beginWork (http://localhost:3000/static/js/bundle.js:17835:1565)
    at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:13128:14)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:20372:93)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:20266:38)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:20250:7)
    at performWorkOnRoot (http://localhost:3000/static/js/bundle.js:20011:42)

일정을 짜는 기능을 만드는 도중에, 에러가 떴다.... 정확하게는 react-calendar를 사용하여, 한국 시간대에 맞춘 마크와 타임테이블을 만들려고 하는 도중에 꼬여서 에러가 발생했다.

이 오류가 발생한 이유는 React가 렌더링 과정에서 Date 객체를 화면에 출력하려고 했기 때문이다. React는 문자열, 숫자, React 엘리먼트는 렌더링할 수 있지만, Date 객체는 직접 렌더링할 수 없다.

const MyComponent = () => {
    const now = new Date();        // Date 객체 생성
      return {now};    // Date 객체를 렌더링하려고 함 -> 오류 발생
};

위의 코드에서 now는 Date 객체이고, React는 이를 문자열로 변환하지 않으면 DOM에 출력할 방법을 모르기 때문에 오류가 발생한다.

React는 DOM의 텍스트 노드에 데이터를 삽입할 때 내부적으로 문자열만 처리한다. 하지만 Date 객체는 JavaScript에서 복잡한 데이터 구조를 가지며, 이를 단순한 문자열로 출력하려면 명시적으로 변환해야 한다.

React에서 Date 객체를 화면에 표시하려면 문자열로 변환해야 한다. JavaScript에서는 Date 객체를 문자열로 변환하는 여러 가지 방법을 제공한다.

1. toString() 메서드

기본적으로 사람이 읽을 수 있는 형식으로 변환

const now = new Date();
console.log(now.toString());    // "Wed Jan 22 2025 15:30:00 GMT+0900 (Korean Standard Time)"

2. `toLocalDateString()` 메서드

날짜를 특정 Local(ex: 한국 등) 형식으로 변환

const now = new Date();
console.log(now.toLocalDateString("ko-KR"));    // ex: "2025. 1. 22."

3. `toISOString()` 메서드

Date 객체를 표준 YYYY-MM-DDHH:mm:ss.sssZ 형식의 문자열로 변환

const now = new Date();
console.log(now.toISOString());    // ex: "2025-01-22T06:30:00.000Z"

⭐ 결론은 React에서는 Date 객체를 컴포넌트로 바로 올릴 수 없기 때문에 문자열로 변환하여 사용해야 한다!

Uncaught runtime Error!

Fri, 20 Dec 2024 18:51:10 GMT

Objects are not valid as a React child (found: object with keys {props}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (http://localhost:3000/static/js/bundle.js:13130:11)
    at reconcileChildFibersImpl (http://localhost:3000/static/js/bundle.js:13445:9)
    at http://localhost:3000/static/js/bundle.js:13457:31
    at reconcileChildren (http://localhost:3000/static/js/bundle.js:14830:47)
    at beginWork (http://localhost:3000/static/js/bundle.js:15601:1565)
    at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:10894:14)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:18138:93)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:18032:38)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:18016:7)
    at performWorkOnRoot (http://localhost:3000/static/js/bundle.js:17777:42)

props를 자식 컴포넌트에 넘겨주었을 때, { props } 형태로 자식 컴포넌트에서 사용해야 한다. 이것을 사용하지 않아 에러가 떴다...

참고 자료 BLOG : https://velog.io/@leemember/Objects-are-not-valid-as-a-React-child-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0 tiypeScript : https://ko.react.dev/learn/typescript

Too many re-renders Error!

Fri, 20 Dec 2024 16:23:29 GMT

Too many re-renders. React limits the number of renders to prevent an infinite loop.
    at renderWithHooksAgain (http://localhost:3000/static/js/bundle.js:13699:55)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:13659:63)
    at updateFunctionComponent (http://localhost:3000/static/js/bundle.js:14926:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:15544:16)
    at runWithFiberInDEV (http://localhost:3000/static/js/bundle.js:10885:14)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:18129:93)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:18023:38)
    at renderRootSync (http://localhost:3000/static/js/bundle.js:18007:7)
    at performWorkOnRoot (http://localhost:3000/static/js/bundle.js:17768:42)
    at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:18578:5)

Radio onChange로 value (0, 1) 값을 받아서, 배열(2차배열)의 첫번째 인자를 구분하고, 그 배열을 body에서 map으로 button을 생성하는 도중에 위의 에러가 뜨게 되었다.

아래의 링크를 읽어본 결과, state의 변화가 무한반복되어서 나타나는 에러로, button에서 onClick={handleButtonClick(index)} 부분이 문제였다. handleButtonClick(index)로 주면 바로 함수가 실행이 되기 때문에, 함수 안에 있던 setPayButtonMethod(index);라는 state를 값을 변경하는 로직이 계속 실행이 되어 무한 반복에 걸리게 된다.

해결은 onClick={() => handleButtonClick(index)}로 일급 함수 형태로 가지고 오면 된다. 함수를 실행이 아닌 인자로 넘겨주는 것이기 때문에, 무한 반복에 걸리지 않는다.

참고 링크

https://wnsdufdl.tistory.com/245 https://anerim.tistory.com/161

React Uncaught Error

Tue, 17 Dec 2024 18:14:41 GMT

Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`

발단

input tag로 radio를 만들고 있는 중이다.

해결

오류가 난 코드...
```
 item1 
```
오류 해결
```
 item1 
```

input은 하위 콘텐츠를 가질 수 없는 빈 요소이다. 그러므로 이 필요가 없다는 뜻! 그래서 예러가 뜬 것이다. 참조_codingEverybody{}

React Install ENONET Error!

Tue, 17 Dec 2024 17:45:46 GMT

npm error code ENOENT
npm error syscall open
npm error path E:\PracticeBookShop\FE\node_modules\.bin\parser.ps1
npm error errno -4058
npm error enoent ENOENT: no such file or directory, open 'E:\PracticeBookShop\FE\node_modules\.bin\parser.ps1'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: C:\Users\rmfla\AppData\Local\npm-cache\_logs\2024-12-17T17_00_53_052Z-debug-0.log

발단

clone 해서 가져온 react 파일을 npm start 할려고 했다가 안되어서, npm install을 시도하다가 또 에러가 떠서 찾아보는 중이다...

결론

저장 공간이 없어서 에러가 뜬 것이다... git 로컬 위치 바꿀려면 그냥 .git 파일 있는 곳 내용 전부 다른 곳으로 옮기면 된다.

(2024.09.06(금)) 슈퍼코딩 부트캠프 4주차 Day4-5 후기

Fri, 06 Sep 2024 03:42:14 GMT

To-do List

38강. 스타일링 - 4 - tailwindcss ~ 44강. 데이터 정렬

📜 38강. 스타일링 - 4 - tailwindcss

⭐ CSS Framework

프레임워크를 통해서 정해진대로 하다보면, 생산성을 높일 수 있음.
다양한 CSS 프레임워크 도구들이 있다.
이 외에도 Material UI, Ant Design, Chakra UI 같은 라이브러리도 많이 이용.

bootstrap : 과거에는 제일 많이 쓰였고, 현재도 일반적으로 많이 쓰던 css framework. 개발을 잘 모르는 사람도 쉽게 이용할 수 있다.

⭐ TailwindCSS

Utility first CSS Framework

사람들이 적게 사용하는 거라도, 프로그램에 맞는 것이라면 선택하는 것이 좋다. 오히려 적게 사용하면 이점이 생기는 것!

HTML과 CSS 파일을 별도로 관리할 필요가 없다.
클래스 명을 고민할 필요가 없다.
디자인이 일관되어있다.
자유롭게 커스텀이 가능하다. 등등

CLI

Commend Line Interface
CUI (Character User Interface) 라고도 불림 (vs. GUI )
글자를 입력하여 컴퓨터에 명령을 내리는 방식

ex) p-0 : padding: 0; mt-0.5 : margin-top: 0.125rem: // 2px

tailwindCSS에서의 1은 4px이다.

rounded : border-radius: 0.25rem; // 4px

4px이 기본값이므로, 그냥 rounded로 표현

tailwindUI

framework가 다양하게 존재. (거의 완성된)

📜 39강. 디버깅 Part 1

⭐ 디버깅 (Debugging)

소프트웨어의 소스의 오류 혹은 버그를 고치는 하나의 과정
예전에 1940년에 컴퓨터는 굉장히 컸음. 벌레 한 마리가 컴퓨터에 들어가서 컴퓨터가 멈췄다. 이 벌레를 빼니깐 컴퓨터가 다시 실행되었다. 이래서 버그를 잡는다고 함...

컴파일 에러 - 전적으로 개발자 잘못임

: 컴파일을 할 때 발생하는 에러

Syntax Error // 구문 에러 : 오타 났음! 되게 친절하게 알려줌.
Type Error //
Reference Error

런타임 에러

: 컴파일 과정을 마친 후에 사용자에 의해 실행시 에러

0 나누기 오류
Null 참조 오류
메모리 부족 오류

런타임 에러 해결 방식

// 예외 처리
try {
  logic...
} catch {
  error handling
}

중단점

break point
디버깅을 한 줄씩 확인하기 위해서, 멈췄으면 하는 곳에서 중단점을 찍어 멈추고 한줄씩 확인하기
멈췄으면 하는 곳에 dibbugger; 넣기

브라우저 환경에서 디버깅

소스 > 자바스크립트 파일 > 옆에 코드 줄 번호를 클릭하면 파란색 태그가 걸림(중단점) -> 디버깅 시작

📜 40강. 디버깅 Part 2

⭐프로 파일 도구들

코드를 최적화하기 위해 함수 호출 주기와 빈도, 시각과 메모리 소요 등을 측정하는 것

⭐ React Devtool - Chrome Extension

Components : 컴포넌트를 트리 구조로 보여줌. 상태 정보를 확인할 수 있음.

사진

Profiler : 랜더링된 컴포넌트를 소요 시간과 함께 보여줌

⭐ Google Lighthouse

google에서 프로파일만을 하기 위해서 전문적으로 만든 것
웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구.

📜 42강. 이벤트 버블링과 캡처링

⭐ 브라우저의 이벤트

이벤트 캡처링 : 이벤트를 지정한 것을 찾기 위해 DOM 요소를 부모 요소(body)부터 차근차근 찾아감
이벤트 타겟팅 : 타겟을 찾았다면 잡는다!
이벤트 버블링 : 타겟팅된 돔 요소를 다시 올라오면서 이벤트를 찾는다!

body -> div -> button -> div -> body

1) 이벤트 캡처링

body : Click 이벤트 핸들러를 가지고 있나요? 있다면, 호출한다.
div : 위와 동일

2) 이벤트 타겟팅

button : 클릭한 요소로 가서 이벤트 핸들러를 확인 -> 실행

3) 이벤트 버블링 - 반대로 다시 위로 올라가면서 이벤트 확인

div : Click 이벤트 핸들러를 가지고 있나요? 있다면, 호출해준다.
body : 위와 동일

⭐ 이벤트 버블링과 캡처링

위에서 아래로 target 요소를 찾아가는 것이 -> capturing
아래에서 위로 target 요소를 찾아가는 것이 -> bubbling
handler의 default 값이 bubbling 시 이벤트 헨들러가 일어남.
Event Bubbling
```
import React from "react";
```

function App() { return (

console.log("section dlick")}>

console.log("div click")}>

); }

export default App;

결과

button click div click section click


- Event Capturing

import React from "react";

function App() { // DOM 요소가 없을시에 처리 방법 if(document.getElementById("eventCapture")) return null;

// eventcapture의 DOM요소에 capture에서 돌아가게 함!
document.getElementById("eventCapture").addEventListener('click', () => console.log('div event capture'), true);

return (
     console.log("section dlick")}>
         console.log("div click")}>
            
        
    
);

}

export default App;

결과

div event capture button click div click section click


### ⭐ 이벤트 버블링을 막고 싶다면?

ex) 모달 : 네모난 박스 형태의 작은 창.

![](https://velog.velcdn.com/images/minjoo_huh/post/4b39b43e-2a1e-4daa-9df1-ad8101a67bf6/image.png)


기본적으로 모달 외의 영역을 클릭하게 된다면 모달창이 닫히지만, 해당 모달의 영역을 클릭하면 닫히지 않는다.

모달의 부모 영역에서 버블링을 통해 클릭 이벤트가 일어나 모달의 창이 닫히게 된다. 하지만 자식 요소이기 때문에 부모 영역 안에 속한다. 그렇다면 부모 요소에서 닫힘 이벤트가 떠있다면, 자식 요소도 닫히는 게 인지상정!

=> 이것을 막기 위해서 모달의 이벤트 버블링을 막아볼려고 한다.
해당 요소 위로는 버블링을 하는 것!

#### event.stopPropagation()
- Propagation : 전파

``` body -> div -> button -> div --> 여기 Click 이벤트 핸들러가 실행이 안되게 하고 싶어요.

import React from "react";

function App() {
    return (
         console.log("section dlick")}>
             {
                event.stopPropagation();
                console.log("div click");
                }}
            >
                
            
        
    );
}

export default App;

결과

button click
div click

📜 43강. 복잡한 이벤트와 상태 디자인하기

⭐ 드롭다운 컴포넌트를 구현해보자.

동작 설명해보기
state와 event handler로 나누기
비슷한 것 묶기

✨ 1. 동작 설명해보기

1) 드롭다운 클릭 2) 옵션이 나타남 3) 하나의 옵션을 클릭함 4) 옵션들이 사라짐 5) 클릭한 옵션이 박스에 표시됨

✨ 2. State와 event handler로 나누기

1) 드롭다운 클릭 Event handler 2) 옵션이 나타남 State 3) 하나의 옵션을 클릭함 Event handler 4) 옵션들이 사라짐 State 5) 클릭한 옵션이 박스에 표시됨 State

✨ 3. 비슷한 것 묶기

토대로 구현하기ㅎㅎ

❓CSS event가 일어날 때 변경하기.

1) 조건

: dropdown을 클릭하면 테두리가 생기게 한다.

.dropdown {
    ...
    border: none;
    ...
}

.switched-dropdown {
    border: 1px solid black;
}

2) state 생성하기 (boolean)

const [switchCss, setSwitchCss] = useState(false);

3) click handler 함수에서 state 값 변경

const handlerClick = () => {
    ...
    setSwitchCss(!switchCss);
};

4) div에 className 삼항연산자로 변경하기

...

5) 끝!

❓ 부모 요소 뒤에 자식 요소

부모 요소 뒤에 자식 요소를 숨기고 싶다면? overflow: hidden; 을 부모 요소(CSS)에 넣어주자!

📜 44강. 데이터 정렬

⭐ Number 정렬

.sort() 메서드

const data = [1, 5, 6, 3];

data.sort();

> (4) [1, 3, 5, 6]

📌.sort() 메서드 문제점 - comparator

const data2 = [1, 10, 2, 3];

data2.sort();

> (4) [1, 10, 2, 3]

JS 내부에서는 sort()라는 함수를 구현할 때, 다른 타입도 모두 사용가능하게 구현하였다. 그리고 string이 default 값이기 때문에, 배열을 정렬하면 위처럼 나오게 된다.

이는 comparator 메서드로 설정하여 해결한다.

data2.sort((a, b) => a-b);

> (4) [1, 2, 3, 10]

두 수를 비교하여 순서를 맞추어 나간다. ( a-b < 0 이면, b가 큰 것이고, a-b > 0 이면, a가 큰 것이다. )

⭐ string 정렬

localeCompare() 메서드

사전 정렬 방식과 비슷함.

const data3 = ['a', 'b', 'A', 'B', 't'];

data3.sort()

> (5) ['A', 'B', 'a', 'b', 't']

ASCII 코드로 인해서 대문자 -> 소문자 순으로 정렬이 된다.

알파벳 순서대로 (대소문자 섞어서) - comparator

data3.sort((a, b) => a.localeCompare(b));

> (5) ['a', 'A', 'b', 'B', 't']

거꾸로 정렬하기

data3.sort((a, b) => b.localeCompare(a));

> (5) ['t', 'B', 'b', 'A', 'a']

⭐ object 정렬

여러 가지 속성이 있는 객체들을 정렬할려면 어떻게 해야 하는 가?

테이블 만들기

react-icons

: react에서 지원해주는 아이콘. 방법은 링크에서 친절하게 가르쳐 줌.

array.prototype.find()

Array 인스턴스의 find() 메서드는 제공된 테스트 함수를 만족하는 첫 번째 요소를 반환한다. 테스트 함수를 만족하는 값이 없으면 undefined가 반환된다.

오름차순(asc), 내림차순(desc)

comparator 메서드에서, a - b > 0 이면 a가 더 크고, a - b < 0 이면 b가 더 크다는 것을 이용하여, 값이 작은 순서대로 놓여지게 된다. 그렇다면 (a-b)에 -1을 곱해주면 순서는 값이 큰 순서대로 놓여지게 된다.

sortedData = [...data].sort((a, b) => {
      // comparator 함수
      const valueA = sortValue(a);
      const valueB = sortValue(b);

      // compare할 때, order 확인 : asc or desc
      // null일 때는 애초부터 이 함수가 돌지 않음
      // asc: 1, desc: -1
      const reverseOrder = sortOrder === "asc" ? 1 : -1;

      // 객체 타입별 비교
      if (typeof valueA === "string") {
        return valueA.localeCompare(valueB) * reverseOrder; // order 순서
      } else {
        // Number일 경우
        return (valueA - valueB) * reverseOrder;
      }
    });

아키텍처, 칸반

Fri, 30 Aug 2024 03:14:02 GMT

📜 소프트웨어 아키텍처

⭐ 정의

: 소프트웨어의 골격이 되는 기본 구조이자, 소프트웨어를 구성하는 요소들 간의 관계를 표현하는 시스템의 구조 또는 구조체이다.

아키텍처 그림 참조

자세한 설명

⭐ 특징

소프트웨어 개발 시 적용되는 원칙과 지침이며, 이해 관계자들의 의사소통 도구로 활용된다.
소프트웨어 아키텍처의 설계는 기본적으로 좋은 품질을 유지하면서 사용자의 비기능적 요구사항으로 나타난 제약을 반영하고, 기능적 요구사항을 구현하는 방법을 찾는 해결 과정이다.
애플리케이션의 분할 방법과 분할된 모듈에 할당된 기능, 모듈 간의 인터페이스 등을 결정한다.
소프트웨어 아키텍처 설게의 기본 원리로는 모듈화, 추상화, 단계적 분해, 정보은닉이 있다.

⭐ 원리

모듈화(Modularity) : 소프트웨어의 성능을 향상시키거나 시스템의 수정 및 재사용, 유지 관리 등이 용이하도록 시스템의 기능들을 모듈 단위로 나누는 것을 의미한다.
추상화(Abstraction) : 추상화는 문제의 전체적이고 포괄적인 개념을 설계한 후 차례로 세분화하여 구체화시켜 나가는 것이다.
단계적 분해(Stepwise Refinement) : 단계적 분해는 Niklaus Wirth에 의해 제안된 하향식 설계 전략으로, 문제를 상위의 중요 개념으로부터 하위의 개념으로 구체화시키는 분할 기법이다.
정보 은닉(information Hiding) : 정보 은닉은 한 모듈 내부에 포함된 절차와 자료들의 정보가 감추어져 다른 모듈이 접근하거나 변경하지 못하도록 하는 기법이다.

접근제한자

⭐ 설계 과정

1) 설계 목표 설정

: 시스템의 개발 방향을 명확히 하기 위해 설계에 영향을 주는 비즈니스 목표, 우선순위 등의 요구사항을 분석하여 전체 시스템의 설계 목표를 설정한다.

2) 시스템 타입 결정

: 시스템과 서브시스템의 타입을 결정하고, 설계 목표와 함께 고려하여 아키텍처 패턴을 선택한다.

3) 아케텍처 패턴 적용

: 아키텍처 패턴을 참조하여 표준 아키텍처를 설계 한다.

4) 서브시스템 구체화

: 서브시스템의 기능 및 서브시스템 간의 상호작용을 위한 동작과 인터페이스를 정의한다.

5) 검토

: 아키텍처가 설계 목표에 부합하는지, 요구사항이 잘 반영되었는지, 설계의 기본 원리를 만족하는지 등을 검토한다.

⭐ 사용해야하는 이유

https://velog.io/@yeongori/%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98%EB%9E%80

유지 보수에 최적화!

📜 칸반 (Kanban)

⭐ 칸반의 기원

kanban은 간판 또는 광고판을 의미하는 일본어 용어이다.
'오노 타이이치'라는 산업 엔지니어가 도요타 자동차 회사에서 칸반을 개발하여 제조 효율성을 개선하였다.

⭐ 칸반의 의미

칸반(Kanban)은 반복적인 프로세스의 단게를 명확히 나누는 프로젝트 관리 방식이다.
애자일 방법론을 실현하는 도구의 종류.
칸반 보드에 팀별로 해야할 일(to do)과 진행중인 일을 잡아놓는다.
매일 짧은 회의를 거쳐 우선순위에 따라 업무 처리한다.

프레임워크를 통해 주요 작업을 관리하기 쉬운 작은 조각으로 세분화하고 칸반 보드에 배치하면 각 업무의 진행 상태를 시각적으로 확인할 수 있으며, 문제가 발견되면 즉시 해결할 수 있다.

⭐ 애자일이란?

'민첩한', '기민한'이라는 의미이다.
고객의 요구사항 변화에 유연하게 대응할 수 있도록 일정한 주기를 반복하면서 개발과정을 진행한다.
스크럼도 여기에 포함됨.

칸반으로 프로젝트를 관리하는 방법

극강의 효율을 위해 사용...

참조

정보처리기사 필기 2024 기본서 - 시나공 https://learn.microsoft.com/ko-kr/devops/plan/what-is-kanban https://open-pro.dict.naver.com/_ivp/#/pfentry/c0be8b4bdf92430c8b8fea537ae8468a/db75ef713bbd46de9d7f42a3046818ad

(2024.08.29(목)) 슈퍼코딩 부트캠프 4주차 Day3 후기

Thu, 29 Aug 2024 13:46:42 GMT

To-do List

34강. 리스트 렌더링 - 3 - 리스트 필터링 ~ 37강. 스타일링 - 2 - CSS Modules

📜34강. 리스트 렌더링 - 3 - 리스트 필터링

⭐리스트에 필터를 걸어주기

리스트에 상품들을 특정 조건에 따라 필터링 해서 보여주기
필터링을 할 때마다 업데이트가 되어야 한다.
값이 없으면, 없다는 문구를 나타낸다.

filter state

const [filteredYear, setFilteredYear] = useState("2023");

filter handler

  const filterChangeHandler = (selectedYear) => {
    setFilteredYear(selectedYear);
  };

filter items -- array list

  const filteredExpenses = props.items.filter((expense) => {
    return expense.date.getFullYear().toString() === filteredYear;
  });

html input data

html input data - filter html + state (ExpensesFilter.js)

const dropdownChangeHandler = (event) => {
    props.onChangeFilter(event.target.value);
  };

  return (
    
      
        Filter by year
        
      
    
  );

html filtered items

{/* 3항 연산자 */}
      {filteredExpenses.length > 0 ? (
        filteredExpenses.map((item) => (
          
        ))
      ) : (
        값이 없습니다.
      )}
      {/* {filteredExpenses.length === 0 && 값이 없습니다.} */}
      {/* {expensesContent} */}

📜35강. 스타일링 - 1 - 동적인 스타일링

⭐인라인 스타일링

직접 요소에 스타일링을 넣어서 만듦

일반 인라인 스타일링

3항 연산자 인라인 스타일링

isValid - true or false / state 변수

⭐CSS 클래스를 동적으로 조작하기

css file - class

.form-control.invalid input {
  background-color: salmon;
  border-color: red;
}

class 불러오기, name 옆에 class 명 붙이기


    
        목표

동적으로 불러오고 싶어여!

isValid - true or false / state 변수


    
        목표

📜36강. 스타일링 - 2 - styled-components

⭐CSS-in-JS

자바스크립트 코드를 CSS 에서 작성하는 방식

⭐styled component

CSS-in-JS 방식은 자바스크립트에서 CSS를 작성하는 방식이다.
CSS-in-JS 방식은 CSS를 컴포넌트 레벨로 추상화 해서 관리할 수 있다.
styled-components는 리액트 컴포넌트 스타일링을 위해 CSS를 JS로 쓸 수 있게 만든 가장 많이 쓰이는 도구 중 하나이다.

styled-components download

버전 이슈 때문에 가장 최신 버전 다운로드
```
> npm install styled-components@latest
```

styled-components import 하기

import { styled } from "styled-components";

styled component 표현하기

const DivControl = styled.div`
  margin: 0.5rem 0;
`;

const DivControlLabel = styled.label`
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
`;

const DivControlInput = styled.input`
  display: block;
  width: 100%;
  border: 1px solid #ccc;
  font: inherit;
  line-height: 1.5rem;
  padding: 0 0.25rem;
  ${(props) =>
    !props.isValid && // isValid = false, 조건 성립
    `background-color: salmon;
    border-color: red;
    `}
`;

styled-components 값 불러오기

const test = () => {

  return 
    행운의 네잎클로버!
    
  ;
};

export default test;

📜37강. 스타일링 - 2 - CSS Modules

⭐CSS Modules

CSS 사용 시, Class 이름을 고유한 값으로 자동 생성한다.
React에서 CSS Modules을 사용한다면, Component에 적용하는 style 클래스의 이름이 중첩되는 현상을 방지할 수 있다.

CSS 파일을 `파일명.module.css`로 작성

사진 첨부

.testControl label{
}

.testControl input{
     font: inherit;
      padding: 0.5rem;
      border-radius: 6px;
      border: 1px solid #ccc;
      width: 20rem;
      max-width: 100%;
}

.testActions{
  text-align: right;
}

.isTrue{
    border: 1px solid red;
}

CSS 파일 imoprt 하기 (모듈처럼)

import styles from "./PaymentForm.module.css";

사용해보기

isValid - true or false / state 변수


    
        
            
                안녕!
            ...
            
            
                반가워!
                ...
            
            ...

부족한 점

매번 github에서 다운로드 받아서 console에 > npm install -save react-scripts를 적기가 귀찮다...

스스로 시도해 본 것들

googling

해결 내용

위의 부족한 점을 해결할 때 썼던 사이트에서 있는 코드들을 cmd에서 뿌리기 (workspace에서만)

알게된 점

헷갈리거나 실수한 점

과제할 때(filter price), state로 받은 데이터를 filter로 배열로 받아 html에 뿌릴려고 할때, 배열의 length 값이 0보다 클때 html을 뿌리면 되는데... 반대로 줘버렸다...;; (0보다 작을때... 이러니깐 안나오지!)

회고

결국 진짜... 아파서 어제 쉬게 되었음...! 진짜ㅠㅠ 왜ㅠㅠ 아직도 목이랑 머리가 아프긴 하지만... 버틸만 한가..? 버틸만 하니깐 이것저것 했겠지! 지금은 잠이 와서 오락가락하는 것 같긴함!
그래도 할 건 하고 자야한다! 춥다!!

(2024.08.27(화)) 슈퍼코딩 부트캠프 4주차 Day2 후기

Tue, 27 Aug 2024 14:56:19 GMT

To-do List

29강, 리액트 상태 - 5 - Form 제출 ~ 33강 리스트 렌더링 - 2 - KEY

📜29강. 리액트 상태 - 5 - Form 제출

⭐Form 제출하기

에는 onSubmit 이벤트 리스너가 있어서 form의 제출 이벤트를 핸들링
이 이벤트를 발생하기 위해서는

event.preventDefault()

해당 event에서 기본적으로 실행되는 로직을 실행되지 않게 하고 싶은 경우 1) a 태그 클릭 시 href 링크로 이동 2) form의 submit을 누르면 새로 실행이 됨

// button에서 submit 신호를 받으면 수행되는 함수
const buttonSubmitHandler = (event) => {
    event.preventDefault();

    console.log("submit");
}

return (
    ...
    // form 안에서 submit 신호를 받으면 함수 불러오기
    
        로직
        ...

        
        ...
    
    ...
);

⭐Two-way binding

form을 제출하고 값을 모두 초기화 해주고 싶을 때

1) Input에 상태를 value 속성으로 넣어준 후

Value에 useState 속성값 넣기 (objectState.name)
```
  ...
  ...
```

2) 제출을 한 후에 상태를 초기화 해주면

submit handler 함수에 상태 초기화 넣기.

setObjectState({
  name: "",
  price: 0,
  today: null,
});

3) Value에 초기화된 상태가 반영되어 UI에 업데이트

저장!

❌날짜 초기화가 안됨ㅜㅜ

날짜를 null 대신 초기화 대신 Date() 메소드로 초기화하기
```
today: null, => today: new Date(),
```

📜30강. 리액트 상태 - 6 - 자식과 부모간 상태 이동

⭐자식 컴포넌트에서 부모 컴포넌트로 상태 올리기

자식 컴포넌트에서 작성한 form state를 부모 컴포넌트로 올리기

1) props로 부모 컴포넌트의 data를 받는 함수를 자식에게로 보냄.

-> 바로 state를 보내는 방법이 없기 때문에 함수를 보내서 데이터를 받는다.

▪️부모 컴포넌트

// 1. parent에서 자식의 form 정보를 받는 함수
  const getPaymentFormDate = (data) => {
    console.log(data);

    setExpenses([
      {
        id: Math.random().toString(),
        title: data.name,
        amount: data.price,
        date: data.today,
      },
    ]);
  };

return (
    <>
      {/* 2. props로 함수 보내기 */}
      
    
);

2) 부모 컴포넌트에서 props로 받은

▫️자식 컴포넌트

const PaymentForm = ({getPaymentFormDate}) => {
...

    const buttonSubmitHandler = (event) => {
        event.preventDefault();

        // 4. button submit이 돌면 함수가 실행
            // objectState 정보 (함수가 가리키고 있는 부모 컨포넌트의 함수로) 보내기
            getPaymentFormData(objectState);
    }

    ...

    return ...
}

⭐부모 컴포넌트의 상태를 자식 컴포넌트에 전달

자식 컴포넌트에서 부모 컴포넌트로 올려진 state를 또 다른 컴포넌트로 전달해보기

1) HTML 창에서 값 입력(input) 받기 2) submit button click, 부모 컴포넌트에 data 전달. (props 로 받은 함수에 의해서) 3) 부모 컴포넌트는 함수에서 데이터 저장 및 할당

4) 또 다른 자식 컴포넌트에 다른 데이터 보내기 (props)

5) 자식 컴포넌트는 props로 받은 데이터를 HTML 창에 올릴 수 있다.

😫TypeError : props.date.getFullYear is not a function

date 관련 타입 에러
자식 컴포넌트에서 props로 데이터를 받고 처리할 때 string으로 뜬다.

그래서 state를 업데이트 할 때, event.target.value를 그냥 받아오는 것을 new Date(event.target.value)로 받아옴.

const inputTodayHandler = (event) => {
  setObjectState((prevState) => ({
    ...prevState,
    today: new Date(event.target.value),
  }));
};

해결!

📜31강. 리액트 상태 - 7 - 이미지 처리

⭐이미지 가져오기

이미지 파일을 불러오는 방법
image 파일명 같은 경우는 대문자부터 시작하는 경우가 많다.
이미지는 .png 같은 확장자가 반드시 붙여져야 한다. (js는 안붙었음!!)
```
import TestImage from "./images/alexa.png";
...
```
⭐이미지 파일의 종류

▪️jpg, jpeg
pixel 단위
높은 압축률 => 파일 크기가 작다.
이미지 퀄리티가 손상될 수 있음 (Lossy) → 압축되면서 손상 가능성 있음
수천 가지 팔레트 색 - 하나의 픽셀당
사진☑️ 로고, 라인❌- 잘못하다보면 깨질 수 있으니깐.... 깔끔하지 않지...
캡처 전달, 고용량 이미지 전송, 썸네일 전송

▫️png

손실 없이 이미지를 압축(Lossless) = 압축이 잘되지만, 파일 크기가 큼. (<-> Lossy)
W3C 권장 표준 - web 공식문서
간단한 배너 이미지☑️
배경을 지우고 해당 로고만 볼 수 있는 기능도 있음.
배너 이미지, 선명한 이미지, 백그라운드 없는 로고 이미지에서 많이 사용

▪️svg

2차원 벡터 그래픽 - 1000배를 늘려도 깨지지 않음.
해상도 상관 없이 이미지 품질 좋음
로고, 라인☑️
복잡한 이미지❌ - 굉장히 파일이 복잡하고 커지고 무거워지고...
아이콘, 선, 간단한 도형 등등 처리할 때. 이것들을 우리가 자유자재로 핸들링하고 싶을 때...

bmp, etc...

⭐이미지 용량에 따른 브라우저에서의 처리

alexa.png (4KB)

9.7KB보다 작으므로(< 9.7KB), inlined(encoding하여 string 형태로 저장) 된다.
❓Base64 : 이진 데이터를 기수-64 표현으로 변환하여 ASCII 문자열 방식으로 나타내는 유사한 이진 데이터를 텍스트로 인코딩 방식의 그룹.
큰 파일X, 주로 작은 파일에서 주로 사용. 커지면 그만큼 주소가 굉장히 길어짐;;

siri.png (57KB)

9.7KB보다 크므로(> 9.7KB), seperate files(파일 압축)해서 그대로 개발 서버에 저장된다.

⭐이미지 크기를 조절하기

이미지 크기를 조절하기

1) 태그의 속성인 width, height를 작성해 주기

2) Style 속성으로 width, height 값 작성해주기

📜32강. 리스트 렌더링 - 1 - 리스트 렌더링

❓List?

JS 배열 = 동적 배열 (Array List)
자료구조 List 종류 좀 더 자세한

⭐리스트를 state 값과 연동하기 - 추가

결제 추가를 하면 아래 리스트에 값이 추가되게 만들어 보기.

setExpenses에 ...expenses 스프레드 연산자로 연결하기! ▪️App.js

setExpenses([
    {
      id: Math.random().toString(),
      title: data.name,
      amount: data.price,
      date: new Date(data.today),
    },
    ...expenses, // 배열의 값이 몇개가 들어올지 모르니깐.. 스프레드 연산자로 확장.
  ]);

⭐리스트를 state 값과 연동하기 - 삭제

1) 삭제 버튼 만들기 2) 삭제 로직은 js 파일 어디든 넣을 수 있지만, state를 생성한 곳에서 하는 게 가장 효율적임! 3) 삭제 방법 2가지!

3-1) filter

: 주어진 함수의 테스트를 통과하는 모든 요소들을 모아 새로운 배열로 반환합니다.

filter(word => word.length > 6) : word.length라는 조건문이 true인 요소들을 모아 새로운 배열을 만들어냄

id, 즉 primary key를 가져올 수 있을 때 사용하는 것이 유리하다.

const newFilteredArray = expense.filter((item) => item.id !== id);
setExpense(newFilteredArray);

3-2) slice

: 어떤 배열의 begin부터 end까지 (end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 바뀌지 않습니다.

배열의 index 값을 받을 수 있는 환경일 때 사용하는 것이 유리하다.
시작부터 끝까지 자르는 것을 의미.
index 값이 필요한 것이기 때문에 delete 작업을 다르게 해야함...

▪️App.js

const deleteExpenseItem = (index) => {
    // 2. slice
    // [0, 1, 2, 3, .. , index, index+1, .. , n-1]
    // index 요소를 삭제하고 싶다.
    // [0, 1, 2, 3, .. , index-1, index+1, .., n-1]
    // [0, 1, 2, ... , index-1] [index+1, .., n-1] 두가지의 배열로 만듦
    const beforeArray = expenses.slice(0, index);
    const afterArray = expenses.slice(index + 1); // end는 생략 가능
    setExpenses([...beforeArray, ...afterArray]);
  };

return (
    <>
        ...
        
    
);

▫️Expenses.js - 다시 자식 컴포넌트로 함수 보내기 (props)

{props.items.map((item, index) => (
        
      ))}

▪️ExpenseItem.js - 삭제 버튼 + onClick 이벤트

📜33강. 리스트 렌더링 - 2 - KEY

div 요소 혹은 컴포넌트들이 서로 구분이 안돼, 식별이 안되어 식별자를 두라는 의미.
식별자를 두지 않으면 비슷한 것들 중에 하나의 state가 변경될 때, 전부 리랜더링이 된다.

⭐리스트의 key

리액트에서 리스트 형태로 만드는 모든 컴포넌트 (HTML tag, 커스텀 컴포넌트 등)에 대해서 key값을 고유하게 부여해 주어야 에러가 발생하지 않는다.
컴포넌트를 생성할 때 key 값을 부여해줘서 에러를 방지한다.

key는 꼭 unique한 값이어야 한다.

{props.items.map((item, index) => (
      
    ))}

minjoo_huh.log

📘 이벤트 버블링과 `stopPropagation()` — 구조적 이해와 실전 예시

✅ 이벤트 버블링이란?

🔍 예시 코드

🏢 회사 보고 체계로 비교해보자

✅ 예시 1: 자연스럽게 보고되는 일 (버블링 허용)

📌 예: 고객 문의, 서버 오류, 재무 관련 요청

☕ 예시 2: 굳이 보고 안 해도 되는 일 (버블링 차단)

📌 예: 커피가 떨어졌다 / 화분에 물 주기 / 사무실 청소

🧩 핵심 비교 요약

🧠 정리

💬 마무리

트리 쉐이킹(Tree-Shaking)과 사이드 이펙트(Side Effect) 쉽게 정리하기 😊

1. 트리 쉐이킹이란? 🌳✨

2. 사이드 이펙트(Side Effect)란? 🎭

3. 트리 쉐이킹 장점 😊👍

4. 트리 쉐이킹 단점 😅👎

5. 사이드 이펙트 장점 & 단점 😊👎

6. 왜 꼭 사용해야 할까? 🎯

7. 실제 사용 방법 🌐

7-1. Webpack

7-2. Rollup

7-3. Vite

8. 정리 ✨

9. 출처 (References) 📚

바렐(Barrel) 파일(index.ts) 사용하기 가이드 ✨😊

1. 바렐(Barrel)이란?

2. 장점 (Pros) 😊

3. 단점 (Cons) 😅

4. 주의할 점 & 베스트 프랙티스 (Cautions & Best Practices) ⚠️

5. 실무 적용 예시 (Examples) 🌟

5-1. 컴포넌트 바렐

5-2. 타입 바렐

6. 장점 vs 단점 한눈에 정리 👍👎

7. 주의할 점 다시 한번! ⚠️

8. 참고 자료 (References) 📚

💡 CSS 100vh vs 100% 제대로 이해하고 쓰기

✅ 1. 100vh란?

✅ 2. 100%란?

🔍 비교 요약

🧪 실전 예제 비교

예제 HTML

① height: 100vh

② height: 100% (부모 높이 없음)

③ height: 100% (부모 높이 있음)

💡 추가 팁: 위치와 높이는 다르다!

❌ 자주 하는 실수

✅ 올바른 방법은 calc() 사용!

🎯 언제 뭘 써야 할까?

✅ 마무리 요약

📚 HTML5 시맨틱 태그 완전 정복

🧠 시맨틱 태그란?

✅ 1. `100vh`란?

✅ 2. `100%`란?

① `height: 100vh`

② `height: 100%` (부모 높이 없음)

③ `height: 100%` (부모 높이 있음)