파일 업로드 컴포넌트에 target 값을 넘겨서 업로드 API 요청 시 targetType으로 사용하려고 했다. 부모 컴포넌트에서는 아래처럼 file-input 컴포넌트에 target prop을 추가로 넘기고 있었다.

<file-input
  v-model="salesOrderDetail.fileList"
  :mode="'edit'"
  :target="'ORDER'"
/>

공통 컴포넌트인 file-input.vue에서는 props를 이렇게 선언했다.

const props = withDefaults(defineProps<IFileUploadProps>(), {
  module: "",
  fileCategory: "",
  target: "",
  mode: "edit",
  modelValue: () => [],
  clearable: false,
  multiple: true,
  accept: ".ppt, .pdf, .hwp, .docx, .xls, .xlsx, .png, .jpg, .jpeg",
  maxSize: 10,
  error: false,
  errorMessage: "",
  hintMessage: "",
  placeholder: "파일첨부"
});

그리고 업로드 요청을 보낼 때 이렇게 사용하고 있었다.

await apiClient.file<IFileResponse>("/files/upload", {
  moduleCode: props.module,
  fileType: "FILE",
  targetType: props.target ?? null,
  file
});

그런데 이상하게도 props.target 값이 보이지 않았다.

❓ 처음에는 부모에서 값을 잘못 넘긴 줄 알았다. 그래서 테스트용으로 fileCategory도 추가해서 넘겨봤다. ❓

<file-input
  v-model="salesOrderDetail.fileList"
  :mode="'view'"
  :target="'ORDER'"
  :fileCategory="'abc'"
/>

하지만 여전히 원하는 값이 props에서 확인되지 않았다.

원인 찾기

콘솔로 아무리 찍어봐도 보이지 않길래 일단 상위에 v-bind="$attrs"선언해 놓아서 혹시... 몰라props와 $attrs를 각각 확인했다.

(언제나 항상 혹시가 문제지..?)

const attrs = useAttrs();

console.log("props.target:", props.target);
console.log("attrs.target:", attrs.target);
console.log("attrs:", attrs);

결과는 다음과 같았다.

props.target: undefined
attrs.target: ORDER
attrs: Proxy(Object) { target: 'ORDER' }

여기서 중요한 점은 부모에서 값이 안 넘어온 게 아니라는 것이다.

부모가 넘긴 target="ORDER"는 실제로 자식까지 도착했다. 다만 Vue가 이 값을 props로 인식하지 못해서 $attrs로 넘겨버린 것이다.

즉 문제는 공통 컴포넌트의 defineProps 처리 쪽에 있었다.

타입 선언 확인

처음에는 IFileUploadProps 타입에 target이 없는 줄 알았다.

하지만 타입 파일을 확인해보니 target은 분명히 존재했다.

interface IBaseUploadProps<T extends IFileResponse = IFileResponse> {
  modelValue: T[];
  mode?: "edit" | "view";
  required?: boolean;
  hint?: string;
  hintMessage?: string;
  readonly?: boolean;
  disabled?: boolean;
  persistentHint?: boolean;
  clearable?: boolean;
  multiple?: boolean;
  maxSize?: number;
  module: string;
  fileCategory?: string;
  target?: string;
}

export interface IFileUploadProps extends IBaseUploadProps<ISaveFile> {
  placeholder?: string;
  accept?: string;
  target?: string;
}

TypeScript 기준으로는 문제가 없어 보였다.

IFileUploadProps는 IBaseUploadProps<ISaveFile>를 상속하고 있고, target?: string도 존재한다.

그런데 런타임에서는 props.target이 아니라 $attrs.target으로 빠지고 있었다.

진짜 원인

원인은 defineProps<IFileUploadProps>()에 넘긴 타입 구조가 Vue SFC 컴파일러가 런타임 props로 안정적으로 변환하기에는 복잡했던 것이다. (뭔가 doc에 있어보여서 이용하면 왜 이런게 터지는거죠..?)

문제가 된 구조는 다음 조합이었다.

interface IBaseUploadProps<T extends IFileResponse = IFileResponse> {
  ...
  target?: string;
}

export interface IFileUploadProps extends IBaseUploadProps<ISaveFile> {
  ...
  target?: string;
}

즉,

• imported interface
• extends
• generic
• 중복 선언된 prop

이 조합이 들어가 있었다.

TypeScript는 이 타입을 정상적으로 이해한다.

하지만 Vue의 defineProps<T>()는 완전한 TypeScript 타입 체커처럼 동작하지 않는다. Vue SFC 컴파일러는 타입 정보를 기반으로 런타임 prop 옵션을 만들어야 하는데, 이 과정은 제한적인 AST 분석에 가깝다.

그래서 TypeScript 입장에서는 target이 존재하지만, Vue 컴파일러가 런타임 props 목록으로 변환하는 과정에서 target을 누락할 수 있다.

그 결과 Vue는 부모에서 전달받은 target을 이렇게 판단한다.

target? 내가 아는 prop 목록에 없네.
그럼 props가 아니라 attrs로 넘긴다.

그래서 최종 결과가 이렇게 된 것이다.

props.target // undefined
attrs.target // "ORDER"

해결법

가장 확실한 해결법은 defineProps에 사용하는 타입을 flat하게 만드는 것이다.

즉 extends + generic 구조를 피하고, 해당 컴포넌트에서 사용하는 props를 직접 명시한다.

interface FileInputProps {
  modelValue: ISaveFile[];
  mode?: "edit" | "view";
  required?: boolean;
  hint?: string;
  hintMessage?: string;
  readonly?: boolean;
  disabled?: boolean;
  persistentHint?: boolean;
  clearable?: boolean;
  multiple?: boolean;
  maxSize?: number;
  module: string;
  fileCategory?: string;
  target?: string;
  placeholder?: string;
  accept?: string;
  error?: boolean;
  errorMessage?: string;
}

const props = withDefaults(defineProps<FileInputProps>(), {
  module: "",
  fileCategory: "",
  target: "",
  mode: "edit",
  modelValue: () => [],
  clearable: false,
  multiple: true,
  accept: ".ppt, .pdf, .hwp, .docx, .xls, .xlsx, .png, .jpg, .jpeg",
  maxSize: 10,
  error: false,
  errorMessage: "",
  hintMessage: "",
  placeholder: "파일첨부"
});

이렇게 변경하면 Vue가 target을 정상적으로 prop으로 인식한다.

이후 API 요청에서도 정상적으로 사용할 수 있다.

await apiClient.file<IFileResponse>("/files/upload", {
  moduleCode: props.module,
  fileType: "FILE",
  targetType: props.target || null,
  fileCategory: props.fileCategory || null,
  file
});

여기서 ?? null보다 || null을 사용한 이유는 기본값이 빈 문자열일 수 있기 때문이다.

props.target ?? null

이렇게 쓰면 props.target이 ""일 때 그대로 빈 문자열이 들어간다.

반면,

props.target || null

이렇게 쓰면 빈 문자열일 경우 null로 처리할 수 있다.

다른 해결 방법에는...이런게 있대요

공통 타입을 꼭 재사용하고 싶다면 generic을 제거하는 것도 방법이다.

export interface IBaseUploadProps {
  modelValue: ISaveFile[];
  mode?: "edit" | "view";
  required?: boolean;
  hint?: string;
  hintMessage?: string;
  readonly?: boolean;
  disabled?: boolean;
  persistentHint?: boolean;
  clearable?: boolean;
  multiple?: boolean;
  maxSize?: number;
  module: string;
  fileCategory?: string;
  target?: string;
}

export interface IFileUploadProps extends IBaseUploadProps {
  placeholder?: string;
  accept?: string;
  error?: boolean;
  errorMessage?: string;
}

다만 가장 안전한 방법은 defineProps에 들어가는 타입만큼은 최대한 단순하고 명확하게 유지하는 것이다.

임시방편

당장 구조를 바꾸기 어렵다면 $attrs에서 값을 꺼내 사용할 수도 있다.

const attrs = useAttrs();

const uploadTarget = computed(() => {
  return props.target || String(attrs.target || "");
});

그리고 업로드 요청에서는 이렇게 사용한다.

await apiClient.file<IFileResponse>("/files/upload", {
  moduleCode: props.module,
  fileType: "FILE",
  targetType: uploadTarget.value || null,
  file
});

하지만 이 방법은 근본적인 해결책은 아니다.

target은 명확히 컴포넌트의 prop으로 사용되는 값이기 때문에 $attrs에서 꺼내 쓰는 것보다 defineProps에서 정상적으로 인식되도록 고치는 것이 맞다.

다음에 조심할 것

defineProps<T>()에 타입을 넣을 때는 TypeScript에서 문제가 없다고 해서 Vue 런타임에서도 항상 정상 동작한다고 믿으면 안 된다.

특히 아래와 같은 타입 구조는 조심해야 한다.

interface BaseProps<T> {
  value: T;
}

interface ChildProps extends BaseProps<SomeType> {
  target?: string;
}

이런 구조는 TypeScript에서는 정상이어도 Vue SFC 컴파일러가 런타임 props로 변환하는 과정에서 일부 prop을 누락할 수 있다.

앞으로는 다음 기준을 지키는 것이 좋다.

1. defineProps에 넣는 타입은 최대한 flat하게 작성하기

interface ComponentProps {
  modelValue: SomeType[];
  target?: string;
  mode?: "edit" | "view";
}

2. props가 안 잡히면 $attrs를 바로 확인하기

const attrs = useAttrs();

console.log("props.target:", props.target);
console.log("attrs.target:", attrs.target);

만약 props에는 없고 $attrs에 있다면 부모 전달 문제라기보다 자식의 prop 선언 문제일 가능성이 높다.

3. console.log(props)만 믿지 않기

Vue의 props는 reactive proxy이기 때문에 콘솔에서 펼쳐 보는 것만으로는 헷갈릴 수 있다.

가능하면 개별 값을 직접 찍는 것이 좋다.

console.log("target:", props.target);
console.log("module:", props.module);
console.log("mode:", props.mode);

4. 공통 타입 재사용보다 컴포넌트 안정성을 우선하기

공통 타입을 재사용하면 코드가 깔끔해 보이지만, defineProps에서는 오히려 런타임 변환 문제가 생길 수 있다.

특히 공통 타입이 generic, extends, imported type을 포함하고 있다면 props 선언에는 flat type을 사용하는 것이 더 안전하다.

정리

이번 문제는 부모 컴포넌트에서 prop을 잘못 넘긴 문제가 아니었다.

부모에서 넘긴 값은 자식까지 정상적으로 도착했다. 다만 Vue가 해당 값을 prop으로 인식하지 못해서 $attrs로 넘겨버린 것이 문제였다.

핵심 원인은 defineProps<IFileUploadProps>()에 사용한 타입이 extends + generic 구조였고, Vue SFC 컴파일러가 이를 런타임 props로 완전히 변환하지 못한 것이었다.

해결은 defineProps에 사용하는 타입을 flat하게 바꾸는 것.

interface FileInputProps {
  modelValue: ISaveFile[];
  module: string;
  target?: string;
  fileCategory?: string;
  mode?: "edit" | "view";
}

이렇게 단순하게 선언하면 props.target으로 정상 접근할 수 있다.

이번 일을 통해 알게 된 점은 하나다.

TypeScript가 이해하는 타입과 Vue가 런타임 props로 변환할 수 있는 타입은 다를 수 있다.

서비스 리뉴얼을 요청사항 중, 두 개의 독립적인 B2B 서비스를 하나의 프로젝트로 통합하면서도, 필요에 따라 특정 모듈을 독립적인 프로젝트로 즉시 분리할 수 있는 고도의 유연성이 요구되었다. 😅 (2년차인 나에게 또 하나의 도전을..선사..함) 그러면서 알게된 프론트엔드 프로젝트 아키텍처를 간단히 정의하고, 요구사항에 맞는 아키텍처 선택의 이유에 대해 설명하려고 한다.

1. 아키텍처 및 구조 설계 관련 용어 정리

① 모놀리식 (Monolithic)

📣 모든 기능이 하나의 코드 베이스와 하나의 빌드 단위로 묶인 구조

😊: 개발 초기 속도가 빠르고 배포 파이프라인이 단순

😡: 서비스 규모가 커지면 코드 간 의존성이 꼬여 수정이 어렵고, 전체를 다시 빌드해야 하므로 배포 효율이 떨어짐

② 모노레포 (Monorepo)

📣 두 개 이상의 독립적인 프로젝트를 하나의 레포지토리에서 관리하는 방식. 도메인별로 독립적인 패키지 분리가능

😊: 프로젝트 간 코드 공유(Shared 패키지)가 쉬워 의존성 관리 용이, 일관성유지하기 쉬움

😡: 레포지토리 크기가 커지며, 빌드 도구(pnpm, Turborepo 등)에 대한 숙련도가 필요

이미지 출처: Moving from multiple repositories to a lerna-js mono-repo

③ MFA (Micro Frontends Architecture)

📣 MSA(Microservices Architecture)의 프론트 버전으로 독립적으로 배포 가능한 작은 단위로 쪼개는 설계 방식

😊: 서비스별 독립 배포, 기술 스택의 자율성, 특정 모듈의 즉각적인 독립 프로젝트화 가능.

😡: 초기 설정이 복잡하며, 런타임 시 의존성 충돌을 관리 필요. 많은 프론트엔드 개발자 필요.

④ FSD (Feature-Sliced Design)

📣 기능 중심으로 폴더를 계층화하는 프론트엔드 전용 설계 패턴

😊: 구조 명확하고 코드의 응집도가 높고, 특정 기능을 떼어내기 매우 유리, 유지보수성이 향상

😡: 폴더 구조가 깊어지고 모든 작업자가 아키텍처에 대해 학습이 필요

이미지출처: FSD공식문서

2. 요구사항에 맞춘 최적의 아키텍처: "MFA 기반 모노레포 + FSD"

요구 사항을 다시 정리 하자면, 🤦‍♂️"두개의 서비스를 합치나, 언제든 특정 모듈을 뽑아서 별도 프로젝트로 만들 수 있어야 한다" 때문에 리서치 한 결과로 생각해보면, 모노 레포 + MFA로 한 레포지토리에 두개 도메인을 관리하고 각 도메인 폴더는 언제든 특정 모듈을 뽑아서 프로젝트를 생성할 수 있게 feature, entities 단위로 구조를 짜려고 한다

• 거시적(Macro) 관점 - 모노레포 & MFA: 물리적인 프로젝트 분리. SCM과 특송을 별도의 앱으로 격리하여 서로 영향을 주지 않게 함.
• 미시적(Micro) 관점 - FSD: 프로젝트 내부의 논리적 분리. 특정 기능(모듈)이 자기 완결성을 갖도록 설계하여 복사-붙여넣기만으로 기능 이전이 가능하게 함.

3. 추천 아키텍처 폴더 구조 예시

① 거시적 - Monorepo (pnpm Workspaces)

root/
├── apps/
│   ├── shell/                # 메인 포털 (SCM + 특송을 담는 그릇)
│   ├── scm-service/          # 공급망 관리 App
│   └── express-service/      # 국제 특송 관리 App
├── packages/
│   ├── shared-ui/            # 공통 버튼, 입력폼 등 Design System
│   ├── shared-api/           # Axios 인스턴스, 공통 API 호출 로직
│   └── shared-utils/         # 날짜 포맷팅, 권한 체크 등 공통 함수
├── package.json
└── pnpm-workspace.yaml

② 미시적 - 개별 App 내부 (FSD 구조)

각 모듈이 독립성을 가짐.

src/
├── app/                      # 앱의 진입점 (Provider, Router 설정)
├── pages/                    # 라우트 페이지 (예: 운송장 목록 페이지)
├── widgets/                  # 복잡한 컴포넌트 조합 (예: 상단 네비바 + 검색창)
├── features/                 # 실제 비즈니스 가치 (예: 운송장-출력, 배송-추적)
│   └── ship-tracking/        # 이 폴더만 떼어내면 다른 프로젝트에서도 사용 가능
│       ├── ui/               # 해당 기능 전용 컴포넌트
│       ├── model/            # Pinia 스토어 (특송 서비스 전용 상태)
│       └── api/              # 해당 기능 전용 API 호출
├── entities/                 # 비즈니스 엔티티 (예: 화물, 고객, 기사)
└── shared/                   # 프로젝트 내부 공통 모듈

결론: 왜 이 구조인가?

1️⃣재사용성: features/ 하위의 특정 폴더와 packages/shared만 복사하면, 당장 새로운 B2B 서비스를 런칭가능 2️⃣유연성: vite Module Federation 을 통해 필요한 시점에만 모듈을 로드하므로 초기 로딩 속도 최적화에 유리

BUT 작업자는 나 혼자임

😭MFA를 사용해 독립배포 가능하게 하자니 초기 세팅 및 유지 보수하는데 업무 부담이 클 것 같고, 😭FSD를 구조대로 넣자니 관리 포인트가 너무 많아져 역시 혼자 업무하는데 개발 속도가 나지 않을 것같다... 🔔그래서 b2b 프로젝트에서 작업해봤을 때, 고민이 되었던 부분을 녹여 위에서 조사한 각 장점..?의 일부를 조금씩 더해서 아래와 같이 구조를 설계해 보았다.

src/
├── apps/
│   ├── scm-service/           # 공급망 관리 앱
│   │   ├── views/         # 도메인별 페이지
│   │   │   ├── order/     # 주문 도메인
│   │   │   │   ├── components/
│   │   │   │   ├── store.ts
│   │   │   │   └── OrderList.vue
│   │   │   └── product/   # 상품 도메인
│   │   └── main.ts
│   └── express-service/       # 특송 관리 앱 (구조 동일)
│
├── packages/                  # 재사용 가능한 "부품"||"재료"들
│   ├── shared/                # [Pure Shared] 비즈니스 로직 없음
│   │   ├── ui/                # 공통 헤더,푸터, 테이블, 툴팁, 버튼
│   │   ├── api/               # Axios 인스턴스, Interceptor
│   │   └── utils/             # 포맷팅, Swal Wrapper
│   └── auth/                  # [Auth Domain] 로그인, 권한체크, 토큰관리
│       ├── components/
│       └── store/
│
├── layout/                    # 공통 레이아웃
│   ├── DefaultLayout.vue
│   └── AuthLayout.vue

다시 결론 : 왜 이 구조인가?

1️⃣ 서비스 경계가 명확해서 나중에 서비스가 확장되어 개발자가 늘어나 팀이 커진다면! MFA도입해 각 독립적 배포 가능하게 확장 할수 있지 않을까. 2️⃣ FSD 구조에 맞추면 혼자 개발 생산성에 좋지 않아서 도메인 단위로 views 분리해서 나중에 필요한 도메인만 뽑아 새로운 프로젝트를 생성하기 쉽지 않을까.

이렇게..정리를 해보았고.. 이제 시작이닿 그래도 폴더가 많아지네요 ㅎ..........ㅎ

웹 페이지는 HTML을 단순히 화면에 출력하는 것이 아니라, 브라우저의 렌더링 파이프라인(Rendering Pipeline) 을 거쳐 화면에 그려집니다.
이 과정에서 성능에 큰 영향을 미치는 개념이 바로 Reflow와 Repaint입니다.

이 두 개념을 정확히 이해하면 프론트엔드 성능 최적화의 방향이 명확해집니다.

브라우저 렌더링 과정 간단 정리

브라우저는 다음과 같은 과정을 통해 화면을 렌더링합니다.

1. DOM 생성 (HTML 파싱)
2. CSSOM 생성 (CSS 파싱)
3. Render Tree 생성
4. Layout (Reflow) – 요소의 위치와 크기 계산
5. Paint (Repaint) – 색상, 배경 등 그리기
6. Composite – 레이어 합성 (GPU 처리)

Reflow와 Repaint는 이 중 Layout과 Paint 단계에 해당하며, 빈번하게 발생할 경우 성능 저하의 원인이 됩니다.

1. Reflow란?

Reflow(Layout) 는 브라우저가 요소의 위치와 크기를 다시 계산하는 과정을 의미합니다.

DOM 구조가 변경되거나, 레이아웃에 영향을 주는 CSS 속성이 변경되면 발생합니다.

Reflow가 발생하는 대표적인 경우

• DOM 요소 추가 / 삭제
• 크기관련 : width, height, margin, padding 변경
• 레이아웃관련:display, flex 등
• 폰트크기 : font-size , font-weight 등
• 위치관련 : position,top,left 등
• 브라우저 창 크기 변경
• 레이아웃 정보를 읽는 코드 실행

const el = document.querySelector('.box');
el.style.width = '200px'; // Reflow 발생

Reflow는 해당 요소뿐 아니라 부모와 자식 요소까지 연쇄적으로 영향을 줄 수 있어 비용이 매우 큰 작업입니다 (CPU를 사용)

2. Repaint란?

Repaint(Paint) 는 요소의 레이아웃은 그대로 두고 시각적인 스타일만 다시 그리는 과정)입니다.

Repaint 발생하는 대표적인 경우

• 색상관련 : color, background-color 변경
• 테두리관련 : border-color , border-radius 변경

const el = document.querySelector('.box');
el.style.backgroundColor = 'red'; // Repaint 발생

Repaint는 Reflow보다 비용이 적지만, 자주 발생하면 성능에 영향을 줄 수 있습니다. (GPU를 사용)

성능 최적화 방법

1. Reflow를 유발하는 CSS 속성 변경 최소화

레이아웃에 영향을 주는 속성은 가능한 한 초기 렌더링 시에만 설정하고, 동적 변경은 최소화하는 것이 좋습니다.

❗reflow 유발 대표 속성

width, height margin, padding border, top, left, right, bottom

// ❌ 반복적인 Reflow
for (let i = 0; i < 100; i++) {
  el.style.width = `${i}px`;
}

2. 레이아웃 정보 읽기와 쓰기 분리하기

레이아웃 정보를 읽는 순간, 브라우저는 강제로 최신 레이아웃 계산(Reflow) 을 수행합니다.

// ❌ Layout Thrashing
el.style.width = '200px';
console.log(el.offsetWidth); // 강제 Reflow

// ✅ 읽기와 쓰기 분리
const width = el.offsetWidth;
el.style.width = width + 10 + 'px';

3. 애니메이션은 transform과 opacity 사용

transform과 opacity는 Reflow를 발생시키지 않고 Composite 단계에서 처리됩니다. GPU 가속을 사용할 수 있어 성능상 가장 유리합니다.

/* ❌ */
.box {
  left: 100px;
}

/* ✅ */
.box {
  transform: translateX(100px);
}

4. will-change 속성 활용

will-change는 브라우저에 앞으로 변경될 속성을 미리 알려주는 힌트입니다.

.box {
  will-change: transform;
}

❗주의사항 과도한 사용은 메모리 낭비가 발생하므로 필요한 요소에만 적용해야 합니다! 애니메이션 시작 직전에만 적용하고 종료 후 제거 권장

5. display와 visibility 차이 이해하기

• display: none : 레이아웃에서 제거 → Reflow 발생
• visibility: hidden: 공간 유지 → Repaint만 발생

상황에 맞게 선택하는 것이 중요합니다.

마무리

1. Reflow는 레이아웃 계산, Repaint는 화면 다시 그리기
2. Reflow는비용이 크기 때문에 최소화가 핵심
3. 애니메이션과 UI 변경은 transform, opacity 중심으로 설계
4. 브라우저 렌더링 과정을 이해하면 자연스럽게 성능 최적화로 이어진다

Vue3에서 <script setup> 구문을 사용할 때, 컴포넌트 props를 정의하는 방식이 완전히 달라졌습니다. 이 글에서는 Vue3의 defineProps와 withDefaults 사용법을 예제와 함께 설명하고, Vue2 방식과의 차이점도 짚어보겠습니다.

✅ Vue2에서 Props 기본값 설정 방법

Vue2에서는 props를 props 옵션으로 정의하고, 객체 형태로 기본값과 타입을 지정

• default : 기본값 지정
• required : false: 생략 가능 (기본이 false)

export default {
  props: {
    title: {
      type: String,
      required: false,
      default: '상품 이미지'
    },
    itemName: String,
    itemCode: String
  }
}

✅ Vue3: <script Setup>에서의 Props 정의

1. defineProps로 Props 선언

• 타입 기반으로 선언하며, 이때는 기본값 설정이 되지 않습니다.

<script setup>
const props = defineProps<{
  title?: string;
  itemName?: string;
  itemImageList?: any[];
  itemCode?: string;
}>();
</script>

2. withDefaults()로 기본값 지정

• withDefaults는 타입 기반 defineProps에만 사용 가능
• 런타임에 작동하는 유일한 기본값 지정 방법

<script setup>
export interface Props {
  title?: string;
  itemName: string;
  itemImageList: Array<any>;
  itemCode: string;
}
let props = withDefaults(defineProps<Props>(), {
  title: "상품 이미지"
});
</script>

❗vue 3.4 이하 버전에서 타입 기반 선언 시 기본값을 사용시 해당 컴파일러 매크로를 사용하세요 :) 3.5이상의 버전에서만 Reactive Props 구조 분해가 기본 활성화되어 타입기반 definePops 에서도 기본값 설정이 자연스럽게 동작합니다.

🙅‍♀️잘못된 예시 (작동하지 않음)

• Vue2 스타일의 default는 <script setup>에서 무시됨!

  // default 속성은 무시됨
  const props = defineProps({
  title: {
    type: String,
    default: '상품 이미지'
  }
  });

🆚 Vue 2 vs Vue 3 차이 요약

참고

• Vue 공식 문서 - Props 정의
• Vue 공식 문서 - <script setup> defineProps문법
• Vue 공식 문서 - withDefaults

✅ 사용 예시

• 쿠키: 로그인 유지, 다크 모드 설정 저장
• 세션: 로그인 인증, 장바구니 정보 저장 (안전한 사용자 정보 보관)

📌 한 줄 요약

✔ 쿠키는 브라우저에 저장되고, 세션은 서버에서 관리된다!

✅ 사용 예시

• 로컬 스토리지: 다크 모드 설정 유지, 자동 로그인 토큰 저장
• 세션 스토리지: 입력 폼 데이터 임시 저장, 페이지 이동 시 데이터 유지

📌 한 줄 요약

✔ 로컬 스토리지는 브라우저를 꺼도 유지되지만, 세션 스토리지는 탭을 닫으면 삭제된다!

📢 Moment.js는 JavaScript에서 날짜와 시간을 쉽게 다룰 수 있도록 도와주는 라이브러리입니다. 가장 많이 사용되는 주요 메서드 5개를 소개하고, 각각의 정의와 예제를 정리해보겠습니다.

1. diff()

정의

두 날짜 간의 차이를 계산하는 메서드로, 연도, 월, 일, 시간 등의 단위로 차이를 구할 수 있습니다.

옵션

• diff(moment|String|Number|Date|Array, String, Boolean) : 비교할 날짜와 단위를 설정하고, Boolean 값(true)을 추가하면 소수점까지 반환할 수 있습니다.

예제

const moment = require('moment');

const date1 = moment('2025-03-07'); // 종료날짜
const date2 = moment('2025-02-25'); // 시작날짜

console.log(date1.diff(date2, 'days')); // 10 (일 단위 차이)
console.log(date1.diff(date2, 'weeks')); // 1 (주 단위 차이)
console.log(date1.diff(date2, 'months', true)); // 0.322 (소수점 포함)

2. add() / subtract()

정의

• add(): 특정 단위의 시간을 더할 때 사용합니다.
• subtract(): 특정 단위의 시간을 뺄 때 사용합니다.
• add()와 subtract()는 음수를 사용할 수도 있으며, add(-n, '단위')는 subtract(n, '단위')와 동일한 효과를 가집니다.

옵션

• add(Number, String) : 숫자와 단위를 입력하여 시간을 더합니다.
• subtract(Number, String) : 숫자와 단위를 입력하여 시간을 뺍니다.

예제

const date = moment('2025-03-07');

console.log(date.add(5, 'days').format('YYYY-MM-DD')); // 2025-03-12
console.log(date.subtract(2, 'months').format('YYYY-MM-DD')); // 2025-01-07
console.log(date.add(-3, 'days').format('YYYY-MM-DD')); // 2025-03-04 (subtract(3, 'days')와 동일)

3. format()

정의

날짜를 특정 형식의 문자열로 변환하는 메서드입니다.

옵션

• format(String) : 원하는 포맷의 문자열을 입력하여 날짜를 변환합니다.
• 기본값: YYYY-MM-DDTHH:mm:ssZ

예제

const date = moment();

console.log(date.format('YYYY-MM-DD HH:mm:ss')); // 2025-03-07 15:30:00
console.log(date.format('MMMM Do YYYY, h:mm:ss a')); // March 7th 2025, 3:30:00 pm

4. isBefore() / isAfter()

정의

• isBefore(): 특정 날짜보다 이전인지 확인하는 메서드
• isAfter(): 특정 날짜보다 이후인지 확인하는 메서드

옵션

• isBefore(moment|String|Number|Date|Array, String): 비교할 날짜와 단위를 설정합니다.
• isAfter(moment|String|Number|Date|Array, String): 비교할 날짜와 단위를 설정합니다.

예제

const date1 = moment('2025-03-07');
const date2 = moment('2025-02-25');

console.log(date1.isAfter(date2)); // true
console.log(date2.isBefore(date1)); // true

5. startOf() / endOf()

정의

• startOf(): 특정 단위의 시작 시점을 반환하는 메서드
• endOf(): 특정 단위의 마지막 시점을 반환하는 메서드

옵션

• startOf(String) : 설정한 단위의 시작 시간을 반환합니다.
• endOf(String) : 설정한 단위의 마지막 시간을 반환합니다.

예제

const date = moment('2025-03-07');

console.log(date.startOf('month').format('YYYY-MM-DD HH:mm:ss')); // 2025-03-01 00:00:00
console.log(date.endOf('month').format('YYYY-MM-DD HH:mm:ss')); // 2025-03-31 23:59:59

결론

Moment.js는 날짜를 다루는 다양한 기능을 제공하며, 특히 diff(), add()/subtract(), format(), isBefore()/isAfter(), startOf()/endOf() 등의 메서드는 자주 사용됩니다. 프로젝트에서 날짜 계산이 필요할 때 유용하게 활용해 보세요!

Vue 3에서는 defineExpose와 defineEmits를 사용해 컴포넌트 간 데이터 및 기능을 전달할 수 있다. 이를 이해하려면, 먼저 이벤트(event)와 함수(function)의 차이를 알아야 한다.

1️⃣ 이벤트(event) vs 함수(function)

🎯 함수란?

• 특정 로직을 실행하는 코드 블록
• 직접 호출해야 실행됨 (함수명())
• 독립적인 동작 수행 가능

✅ 함수 예제

function sayHello() {
  console.log("안녕하세요!");
}

sayHello(); // 직접 호출

➡️ sayHello()를 호출해야 콘솔에 "안녕하세요!"가 출력됨.

🎯 이벤트란?

• 특정 상황(클릭, 입력 등)이 발생했을 때 실행됨
• 브라우저나 사용자의 동작에 의해 자동으로 실행됨
• 이벤트 리스너를 등록해야 함

✅ 이벤트 예제

document.getElementById("btn").addEventListener("click", function () {
  console.log("버튼이 클릭됨!");
});

➡️ 버튼을 클릭해야 "버튼이 클릭됨!"이 출력됨. 직접 호출하지 않아도 이벤트가 발생하면 자동 실행됨.

🔥 이벤트와 함수의 연결

• 이벤트는 특정 상황이 발생하면 실행되지만, 그 안에서 실행되는 것은 결국 함수이다.
• 즉, 이벤트는 트리거(Trigger) 역할을 하고, 함수는 실제 동작을 수행하는 역할을 한다.

function handleClick() {
  console.log("버튼이 눌렸습니다!");
}

document.getElementById("btn").addEventListener("click", handleClick);

➡️ 클릭하면 handleClick() 함수가 실행됨.

2️⃣ defineExpose vs defineEmits

🎯 defineExpose: 부모가 자식의 특정 메서드 직접 호출

defineExpose는 자식 컴포넌트의 메서드(함수)나 데이터(변수)를 부모가 직접 접근할 수 있도록 한다.

✅ defineExpose 예제

📌 자식 컴포넌트 (ChildComponent.vue)

<script setup>
import { defineExpose } from "vue";

const sayHello = () => {
  console.log("안녕하세요!");
};

defineExpose({
  sayHello,
});
</script>

<template>
  <p>자식 컴포넌트</p>
</template>

📌 부모 컴포넌트 (Parent.vue)

<template>
  <ChildComponent ref="childRef" />
  <button @click="callChildMethod">자식 함수 호출</button>
</template>

<script setup>
import { ref } from "vue";
import ChildComponent from "./ChildComponent.vue";

const childRef = ref(null);

const callChildMethod = () => {
  if (childRef.value) {
    childRef.value.sayHello(); // ✅ 부모에서 직접 자식 함수 호출
  }
};
</script>

➡️ 부모가 ref를 이용해 자식의 sayHello() 메서드를 직접 실행할 수 있음.

🎯 defineEmits: 자식이 부모에게 이벤트 전달

defineEmits는 자식이 부모에게 데이터를 전달할 때 사용된다. 부모는 해당 이벤트를 감지해 핸들러를 실행할 수 있다.

✅ defineEmits 예제

📌 자식 컴포넌트 (ChildComponent.vue)

<script setup>
import { defineEmits } from "vue";

const emit = defineEmits(["customEvent"]);

const notifyParent = () => {
  emit("customEvent", "자식이 보낸 데이터!");
};
</script>

<template>
  <button @click="notifyParent">부모에게 이벤트 전송</button>
</template>

📌 부모 컴포넌트 (Parent.vue)

<template>
  <ChildComponent @customEvent="handleEvent" />
</template>

<script setup>
import ChildComponent from "./ChildComponent.vue";

const handleEvent = (data) => {
  console.log("부모가 받은 데이터:", data);
};
</script>

➡️ 자식에서 emit("customEvent", 데이터)을 실행하면, 부모는 @customEvent로 데이터를 받을 수 있음.

3️⃣ defineExpose vs defineEmits 정리

🎯 언제 defineExpose vs defineEmits를 사용할까?

✔ 부모가 자식의 특정 메서드를 직접 호출해야 한다면 → defineExpose

childRef.value.sayHello();

✔ 자식이 부모에게 데이터를 전달해야 한다면 → defineEmits

emit("customEvent", data);

👉 이벤트는 특정 상황에서 실행되며(defineEmits), 함수는 직접 실행하는 코드 블록(defineExpose를 활용하여 호출 가능)

이제 Vue 3에서 이벤트와 함수의 차이를 이해하고, defineExpose와 defineEmits를 언제 사용해야 하는지 확실히 알았을 거다!

프론트엔드 개발자로 전향하면서 백단과 프론트단 사이에서 소통은 어떤게 필요할까궁금해서 정리해보았다.

1️⃣ API 설계 및 데이터 구조 관련

✅ 1-1. API 요청/응답 데이터 구조

📌 프론트 & 백엔드 협의 포인트

• 필요한 데이터 및 형식 결정
• 필드명 통일 (userId vs user_id vs id)
• 불필요한 데이터 제거

💡 예제: 주문 정보 API 협의

✅ 1-2. API 응답 상태 코드 & 에러 핸들링

📌 프론트 & 백엔드 협의 포인트

• 상태 코드 정의 (200, 400, 500 등)
• 에러 메시지 통일 ("USER_NOT_FOUND", "INVALID_INPUT" 등)
• UI에서 처리할 수 있도록 에러 코드 설계

💡 예제: 로그인 API 응답 협의

✅ 1-3. 페이징 & 데이터 로딩 방식

📌 프론트 & 백엔드 협의 포인트

• 한 번에 불러올 데이터 개수 (page=1&size=20)
• 무한 스크롤 vs 페이지네이션 vs 더보기 버튼 방식
• 정렬 & 필터링 방식 (sort=desc, filter=status:active)

💡 예제: 주문 목록 조회 API 협의

GET /api/orders?page=1&size=20&sort=createdAt,desc

2️⃣ 성능 & 최적화 관련

✅ 2-1. 데이터 전송 최적화 (필요한 데이터만 받기)

📌 프론트 & 백엔드 협의 포인트

• 불필요한 필드 제거
• 대용량 데이터 (이미지 등) URL 방식으로 전달
• 캐싱 가능한 데이터 처리 방식 결정

💡 예제: 필요 없는 필드 제거 요청

{
  "orderId": 123,
  "user": {
    "name": "홍길동",
    "email": "hong@example.com"
  },
  "items": [
    {
      "name": "노트북",
      "price": 1500000
    }
  ]
}

✅ 2-2. 요청 개수 최소화 (API 호출 최적화)

📌 프론트 & 백엔드 협의 포인트

• 여러 개의 API 요청을 합쳐서 최소화
• 필요한 데이터만 포함하는 API 설계

💡 예제: 여러 개의 API를 하나로 합치기

{
  "orderId": 123,
  "user": { "name": "홍길동", "email": "hong@example.com" },
  "items": [
    { "name": "노트북", "price": 1500000 },
    { "name": "마우스", "price": 30000 }
  ]
}

✅ 2-3. 프론트 vs 백엔드에서 처리할 로직 분배

📌 프론트 & 백엔드 협의 포인트

• 데이터 필터링을 프론트에서 할지, 백엔드에서 할지 결정
• 계산 로직 처리 위치 협의

💡 예제: 주문 상태 변환 (프론트 vs 백엔드 협의)

// 백엔드 응답 예제
{ "status": "PENDING_PAYMENT" }

// 프론트에서 변환 예제
const statusText = {
  "PENDING_PAYMENT": "결제 대기중",
  "SHIPPED": "배송 중",
  "DELIVERED": "배송 완료"
};
console.log(statusText["PENDING_PAYMENT"]); // "결제 대기중"

3️⃣ 인증 & 보안 관련

✅ 3-1. 인증 방식 협의 (JWT vs 세션 vs OAuth 등)

📌 프론트 & 백엔드 협의 포인트

• 로그인 인증 방식 결정 (JWT, 세션, OAuth 등)
• API 호출 시 인증 토큰 전달 방식 (Authorization 헤더 사용)

💡 예제: JWT 인증 방식

GET /api/user
Authorization: Bearer eyJhbGciOiJIUzI1...

✅ 3-2. API 권한 및 보안 체크

📌 프론트 & 백엔드 협의 포인트

• 인증이 필요한 API vs 공개 API 구분
• 권한이 없을 때 응답 코드 (403 Forbidden vs 401 Unauthorized)

💡 예제: 관리자 권한 체크 API

GET /api/admin/orders
403 Forbidden // 관리자가 아니라면 이 응답을 보내기

🔹 결론 (주요 협의 내용 요약)

✅ API 데이터 구조 & 필드명 맞추기
✅ 페이징, 정렬, 필터링 방식 정하기
✅ 에러 코드 및 응답 메시지 통일
✅ 프론트 vs 백엔드에서 처리할 로직 나누기
✅ API 요청 개수 최소화 & 최적화
✅ 인증 및 권한 체크 방식 협의

HTTP 상태 코드는 클라이언트와 서버 간의 통신에서 요청이 성공했는지, 실패했는지, 또는 추가 작업이 필요한지 등을 나타내는 숫자 코드입니다. 총 5가지 범주로 나뉩니다.

1xx: 정보 응답 (Informational Responses)

클라이언트 요청이 접수되었으며 처리가 진행 중임을 나타냅니다.

• 100 Continue: 요청의 일부를 수신했으며 나머지를 계속 보내도 됨.
• 101 Switching Protocols: 서버가 프로토콜 변경 요청을 수락함.
• 103 Early Hints: 리소스 로딩에 사용할 수 있는 사전 정보 제공.

2xx: 성공 (Successful Responses)

요청이 성공적으로 처리되었음을 나타냅니다.

• 200 OK: 요청이 성공적으로 처리됨.
• 201 Created: 요청이 성공적으로 처리되었으며 새 리소스가 생성됨.
• 202 Accepted: 요청이 접수되었지만 아직 처리되지 않음.
• 204 No Content: 요청은 성공했으나 응답 본문이 없음.

3xx: 리다이렉션 (Redirection Responses)

요청한 리소스가 다른 위치에 있거나 추가 작업이 필요함을 나타냅니다.

• 301 Moved Permanently: 요청한 리소스가 영구적으로 다른 위치로 이동함.
• 302 Found: 요청한 리소스가 임시로 다른 위치에 있음.
• 304 Not Modified: 리소스가 수정되지 않았으므로 캐시된 버전을 사용해야 함.
• 307 Temporary Redirect: 요청한 리소스가 임시로 다른 URL에 있음 (요청 메서드 유지).
• 308 Permanent Redirect: 요청한 리소스가 영구적으로 다른 URL에 있음 (요청 메서드 유지).

4xx: 클라이언트 오류 (Client Errors)

클라이언트 요청에 오류가 있을 때 사용됩니다.

• 400 Bad Request: 잘못된 요청으로 인해 서버가 이해하지 못함.
• 401 Unauthorized: 인증이 필요하지만 제공되지 않았거나 유효하지 않음.
• 403 Forbidden: 권한이 없어 요청이 거부됨.
• 404 Not Found: 요청한 리소스를 찾을 수 없음.
• 405 Method Not Allowed: 허용되지 않는 HTTP 메서드 사용.

5xx: 서버 오류 (Server Errors)

서버가 요청을 처리하지 못했을 때 사용됩니다.

• 500 Internal Server Error: 서버 내부 오류로 인해 요청을 처리할 수 없음.
• 501 Not Implemented: 요청된 메서드가 서버에서 지원되지 않음.
• 502 Bad Gateway: 게이트웨이나 프록시 서버에서 잘못된 응답을 수신함.
• 503 Service Unavailable: 서버가 현재 요청을 처리할 수 없음 (과부하 또는 유지 보수).
• 504 Gateway Timeout: 게이트웨이나 프록시 서버가 요청을 처리하는 데 시간이 초과됨.

참고

• 공식 문서: MDN Web Docs - HTTP 상태 코드
• 관련 RFC 문서: RFC 7231 (HTTP/1.1)

HTTP 상태 코드는 웹 개발 및 API 통신에서 중요한 역할을 하므로 각 코드의 의미를 명확히 이해하고 사용하는 것이 중요합니다.

Vue 3 프로젝트를 진행하면서 SCSS를 사용하게 될 경우, 코드 스타일의 일관성을 유지하고 협업 효율성을 높이기 위해 ESLint와 Prettier 뿐만 아니라 Stylelint를 도입하는 것이 중요합니다. Stylelint를 통해 SCSS 포맷을 통일화하면, 탭 사이즈 등 코드 형식을 일관되게 유지할 수 있어 작성법을 표준화하고 코드 충돌의 위험을 줄일 수 있습니다.

Stylelint 설치 및 설정

먼저, Stylelint를 설치합니다.

npm install stylelint stylelint-scss stylelint-config-standard-scss --save-dev

설치가 완료되면, 프로젝트 루트에 .stylelintrc.json 파일을 생성하고 다음과 같이 설정합니다

{
  "extends": "stylelint-config-standard-scss",
  "rules": {
    "color-hex-case": "lower",
  }
}

필요에 따라 아래와 같이 추가 설정이 가능합니다

{
    "plugins": ["stylelint-scss", "stylelint-order"],
    "extends": [
        "stylelint-config-standard-scss",
        "stylelint-config-recommended-vue/scss",
        "stylelint-config-prettier-scss"
    ],
    "customSyntax": "postcss-html",
    "rules": {
        "color-hex-case": "lower",
        "order/properties-alphabetical-order": true // 
    }
}

Plugin

• stylelint-scss: SCSS 문법에 대한 지원을 추가합니다. SCSS를 사용할 때 유용한 다양한 규칙을 제공합니다.
• stylelint-order: CSS 속성의 순서를 정렬하는 기능을 제공합니다. 예를 들어, 알파벳 순서로 속성을 정렬할 수 있습니다.

Extends

• stylelint-config-standard-scss: 표준 SCSS 규칙을 포함하고 있는 Stylelint 구성입니다. 기본적인 스타일 규칙을 설정하여 코드 일관성을 유지합니다.
• stylelint-config-recommended-vue/scss: Vue.js와 SCSS를 함께 사용할 때 권장되는 Stylelint 규칙을 포함합니다. Vue 파일 내에서 SCSS 스타일을 검사할 때 유용합니다.
• stylelint-config-prettier-scss: Prettier와의 호환성을 위해 일부 Stylelint 규칙을 비활성화합니다. 이를 통해 Prettier와 Stylelint 간의 충돌을 방지합니다.

추가 설정

• customSyntax: postcss-html을 사용하여 .vue 파일 내의 스타일을 분석할 수 있도록 설정합니다. 이를 통해 Vue 컴포넌트 파일에서 스타일을 검사할 수 있습니다.

Figma 색상 코드 소문자로 변환 프로젝트를 진행하면서 가장 필요했던 부분은 Figma에서 복사한 색상 코드가 대문자로 표시되는 것을 소문자로 변환하는 룰이었습니다. 이를 위해 color-hex-case 규칙을 "lower"로 설정하여 대문자로 작성된 색상 코드가 자동으로 소문자로 변환되도록 합니다.

VSCode 설정

VSCode에서 코드 저장 시 자동으로 스타일이 수정되도록 설정하면 더욱 편리합니다. 이를 위해 VSCode의 settings.json 파일에 다음 설정을 추가하세요

  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },

사진 참고해 todo List html, css, js로 40분안에 구현

통과여부는...👇 .... ... .. .

'탈락'

찾아요.. 쥐구멍...

기본적인건데, 구현하지 못하다니...(개발자는 무리인가)
마냥 좌절하구 있을 수 없어, 원인을 파악하고 해결해나가기로 했다.
또, 블로그에 기록해서 내 머리 속에 더 강력하게 남기기로 함!

원인과 해결

vue와 react 강의통해 todo list를 많이 만들어봤는데, 가장 큰 문제는 혼자 구현해보지 않고, 기록도 안함. 결국 내 머리, 손가락에 남는건 없었던 것이다

problem 1 : list binding부터 실패 -> 마지막 하나만 나옴 추가되어도 추가된 마지막 하나만 나온다! ul에 li을 생성해서 innerHTML 하였음 되었는데..잘못 타켓팅함

solution 1

  const todoWrap = document.querySelector('.todoWrap');
  let todos = [
  {
    id: 1,
    text: '코테 회고',
    completed: false,
  },
  {
    id: 2,
    text: '방청소하기',
    completed: true,
  }
];
  const renderList = () => {
    todoWrap.innerHTML = ''; // 초기화
    todos.forEach(todo => {
      // li 만들기
      let item = document.createElement('li');
      item.setAttribute('class','todoItem');

      // start li 내부 요소 만들어 넣기 + 클래스명 + 이벤트리스너 추가
      let checkBtn = document.createElement('button');
      checkBtn.setAttribute('class','checkBtn');
      checkBtn.addEventListener('click',() => checkTodo(todo.id));

      let todoText = document.createElement('p');
      todoText.innerText = todo.text;

      let removeBtn = document.createElement('button');
      removeBtn.setAttribute('class','removeBtn');
      removeBtn.innerText = '삭제';
      removeBtn.addEventListener('click', () => removeTodo(todo.id));

      todo.completed ? item.classList.add('completed') :      item.classList.remove('completed')

      item.append(checkBtn);
      item.append(todoText);
      item.append(removeBtn);
      // end li 내부 요소 만들어 넣기 + 클래스명 + 이벤트리스너 추가

      // 만든 li ul에 넣기
      todoWrap.appendChild(item); 
    })
 }
  renderList() // 호출하기!

problem 2 : createTodo 추가 기능은 문제 없었으니 보완해서 다시 해보기

solution 2

  const todoInput = document.querySelector('.todoInput');
  const addBtn = document.querySelector('.addBtn');

  const createTodo = function(){
    if(todoInput.value === '') {
      alert('할 일을 입력하세요');
    } else {
    // new 객체 만들어 담기
      let newItem = {
        id:  nextId + 1,
        text: todoInput.value,
        complted: false
      };

      // todos = [...todos,newItem];   방법1
      todos = todos.concat(newItem); //방법2

      // reset
      todoInput.value = '';
      nextId += 1;

      // render list
      renderList();
    }
}

  // 버튼에 클릭이벤트 추가
  addBtn.addEventListener('click',(e)=>{
      e.preventDefault();
      createTodo();
});

solution3: checkTodo + removeTodo

  const checkTodo = function(id) {
  let newTodos = todos.map(todo => {
    if(todo.id === id) {
      return {...todo,completed: !todo.completed}
  }else return todo
    });
    todos = newTodos;
    renderList();
}

const removeTodo = function(id) {
    let newTodos = todos.filter(todo => todo.id !== id);
    todos = newTodos;
    renderList();
}

전체 코드 보기

html

  <body>
    <div class="wrap">

      <h2>TodoList</h2>
      <form>
        <input type="text" class="todoInput" placeholder="할일을 입력하세요">
        <button class="addBtn">추가</button>
      </form>
      <ul class="todoWrap">

      </ul>
    </div>
</body>

style.css

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
      list-style: none;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    background-color: #f8f8f8;
}

.wrap{
    padding: 30px;
    width: 450px;
    min-height: 300px;
    height: fit-content;
    background-color: #fff;
    border-radius: 25px;
}

form {
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.addBtn {
    position: relative;
    font-size: 0;
    width: 35px;
    height: 35px;
    border: 0;
    background-color: #000;
}

.addBtn::before,
.addBtn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 5%;
}

.addBtn::before{
    width: 18px;
    height: 2px;
}
.addBtn::after{
    width: 2px;
    height: 18px;
}


.todoInput {
    flex: auto;
    border: 2px solid #000;
    padding: 8px;
}

.todoWrap {
    margin-top: 20px;
}

.todoWrap .todoItem:not(:first-of-type){
    border-top: 1px solid #eee;
}

.todoItem {
    padding: 10px;
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.todoItem p {
    flex: auto
}

.checkBtn {
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: #fff;
    border: 2px solid #000;
    cursor: pointer;
}

.removeBtn {
    padding: 8px 10px;
    font-size: 16px;
    width: fit-content;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}

.todoItem.completed {
    background-color: #f8f8f8;
}

.todoItem.completed .checkBtn{
    position: relative;
    background-color: #ddd;
    border-color: #ddd;
}

.todoItem.completed p {
    text-decoration: line-through;
    color: #555;
}

.todoItem.completed .checkBtn:before{
    content:'';
    position: absolute;
    left: 5%;
    top: 30%;
    transform: rotate(45deg) translate(0%, -50%);
    width: 6px;
    height: 10px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-radius: 2px;
}

index.js

  'use strict';

const todoInput = document.querySelector('.todoInput');
const addBtn = document.querySelector('.addBtn');
const todoWrap = document.querySelector('.todoWrap');

let todos = [
  {
    id: 1,
    text: '코테 회고',
    completed: false,
  },
  {
    id: 2,
    text: '방청소하기',
    completed: true,
  }
];

let nextId = todos.length;



const checkTodo = function(id) {
  let newTodos = todos.map(todo => {
    if(todo.id === id) {
      return {...todo,completed: !todo.completed}

    }else return todo
  })
  todos = newTodos;
  renderList();
}

const removeTodo = function(id) {
  let newTodos = todos.filter(todo => todo.id !== id);
  todos = newTodos;
  renderList();
}


// list render..!
const renderList = () => {
  todoWrap.innerHTML = '';
  todos.forEach(todo => {
    let item = document.createElement('li');
    item.setAttribute('class','todoItem');

    let checkBtn = document.createElement('button');
    checkBtn.setAttribute('class','checkBtn');
    checkBtn.addEventListener('click',() => checkTodo(todo.id));

    let todoText = document.createElement('p');
    todoText.innerText = todo.text;

    let removeBtn = document.createElement('button');
    removeBtn.setAttribute('class','removeBtn');
    removeBtn.innerText = '삭제';
    removeBtn.addEventListener('click', () => removeTodo(todo.id));

    todo.completed ? item.classList.add('completed') : item.classList.remove('completed')

    item.append(checkBtn);
    item.append(todoText);
    item.append(removeBtn);

    todoWrap.appendChild(item);
  });
}

renderList();

const createTodo = function(){
  if(todoInput.value === '') {
    alert('할 일을 입력하세요');
  } else {
    let newItem = {
      id:  nextId + 1,
      text: todoInput.value,
      complted: false
    };

    // todos = [...todos,newItem];
    todos = todos.concat(newItem);

    // reset
    todoInput.value = '';
    nextId += 1;

    // render list
    renderList();
  }
}


addBtn.addEventListener('click',(e)=>{
  e.preventDefault();
  createTodo();
});

✨완성✨

🤜⚡️🤛 강의만 따라하지 말기!

들어가며!

vue로 만든 페이지를 github page로 배포 다른 페이지로 이동시 갑자기 404 에러가 떴다 🥲 (왜 또 갑자기?!)

발생원인

폭풍 구글링해보니 github page는 SPA를 지원안한다고...ㅜㅜ

갑자기 안된 이유는, /#/ 해쉬태그가 보기 싫어서 라우터 모드를 history로 바꾼게 원흉이었다. (업데이트 시간 전에 확인 했었는지 그땐 문제 없었지뭐람)

🔨 해결방법

다시 해시모드로 BACK!하는게 젤 간단명료 했다. 일단 포트폴리오 목적의 사이트기도 했으니, ㅎ_ㅎ

다른 방법으로 해결하고싶다면! 아래 사이트 참고 plz👇

ex. dist한 index.html를 복사해 404.html페이지로 둔갑 || index.html를 리다이렉트하기... || BrowserRouter 에 basename 지정

참고 사이트:

• https://www.inflearn.com/questions/842189/%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8%EC%8B%9C-404-%EB%AC%B8%EC%A0%9C
• https://github.com/rafgraph/spa-github-pages

props 는 properties 의 줄임말 컴포넌트에게 어떠한 값을 전달해줘야 할 때, props 를 사용 (부모 -> 자식 컴포넌트에게 값을 전달할 때)

사용법

App.js(상위)

    import React from 'react';
    import Welcome from './Welcome';

    function App() {
      return <Welcome name="React" color="blue"/>;
    }

Welocome.js(하위)

    import React from 'react';

    function Welcome(props) {
      return <h1 style={{color: props.color}}>Hello, {props.name}</h1>;
    }

    export default Welcome;

전달된 값은 props 파라미터로 조회할수 있고, 객체형태로 전달된다

만약, 여러개의 props 라면? 👇

비구조화할당(구조분해할당)

변수로 담아 바로 쓰기

Welocome.js

    import React from 'react';

    function Welcome({color, name}) {
      return <h1 style={{color}}>Hello, {name}</h1>; //스타일 color: color ->  color 로 축약 가능
    }

    export default Welcome;

defatultProp

prop의 기본값 정하기

Welocome.js

    import React from 'react';

    function Welcome({color, name}) {
      return <h1 style={{color}}>Hello, {name}</h1>;
    }

    Welcome.defaultProps = {
        color: "black"
    }

    export default Welcome;

Prop-type

prop의 type 정하기

npm install --save prop-types

Welocome.js

    import React from 'react';
    import PropTypes from 'prop-types';

    function Welcome({color, name}) {
      return <h1 style={{color}}>Hello, {name}</h1>;
    }

    Welcome.defaultProps = {
        color: "black"
    }

    Welcome.propTypes = {
        color: PropTypes.string,
          name: PropTypes.string.isRequired, // 필수 값 isRequired 추가
    }

    export default Welcome;

더 자세한 type 지정 방법 👉https://ko.legacy.reactjs.org/docs/typechecking-with-proptypes.html

prop.children

vue의 슬롯 같은 역할? 감싸고 있는 컴포넌트 값을 조회하기

Popup.js

    import React from 'react';


    function Popup({ children }) {
      const popup = {
           position: "fixed",
        left: '50%',
        top: '50%',
        transform: 'translate(-50%,-50%)',
        width: '200px',
        height: '200px',
        ...
      };
      return (
          <div style={popup}>
          { cildren } // 하위 내용 보이게 prop으로 렌더링
        </div>
      );
    }

    export default Popup;

App.js

    import React from 'react';
    import Welcome from './Welcome';
    import Popup from './Popup';

    function App() {
      return (
        <Popup>
          <Welcome name="react" color="red"/>
        </Popup>
      );
    }

참조된 요소 앞에 새로운 요소를 삽입하는 메소드이다.

문법

    부모요소.insertBefore(삽입할요소,기준요소)

1. 부모요소 : 삽입할 요소와 기준요소의 상위요소이다.
2. 삽입할요소 : 삽입하려는 요소를 넣어준다.
3. 기준요소 : 삽입할요소가 들어갈 위치의 기준이되는 요소로 삽입할요소는 기준요소 바로 앞에 추가 된다.

단, 기준요소가 null 값일 때는 삽입할요소 는 부모 요소의 마지막 자식으로 추가된다.

예제

📍 코드

<div
      class="parentElem"
      style="border: 1px solid #222; width: 400px;"
    >
      <p class="standardElem">제 바로 위에 형제요소를 만들어 주세요</p>

    <script>
      const parentEl = document.querySelector(".parentElem");
      const standardEl = document.querySelector(".standardElem");
      const newEl = document.createElement("p");
      newEl.style.color = "red";
      newEl.innerText = "안녕하세요 새로 추가된 요소입니다.";

      parentEl.insertBefore(newEl, standardEl);
    </script>

📍 결과화면

아래 링크로 insertBefore() method를 적용한 drag and drop 예제를 확인할 수있습니다. 👉 실전적용예제

callback

우선 callback은 다른 함수가 실행되고 나서 실행되는 함수로, 매개변수를 변수가 아닌 함수로 받는다. 함수 내부에서 실행된다. 간단한 작업에서는 상관없지만 비동기 작업을 많이할 경우 코드가 복잡해진다.(소위 콜백지옥👿)

대신, Es6에 문법으로 추가된 promise를 사용할 수있다.

Promise

resolve(성공)와 reject(실패)를 파라미터로 받아와야한다 내부에 .catch()를 통해 에러도 잡을수 있다.

const myPromise = new Promise((resolve, reject) => {
    setTimeOut(() => {
        //resolve('result');
        reject(new Error());
    },1000)
})

myPromise.then(result => {
    console.log(result) // result
}).catch(e => {
    console.error(e);
})

📌 callback과 차이점과 단점? callback은 중첩된 구조라 코드의 깊이가 깊어지지만 promise는 .then()과 .catch()를 사용해 깊어지지 않고 연달아 작성 가능하다. 비교적 난잡하지 않다. 하지만, 에러를 잡을때 어떤 부분에서인지 파악하기 어렵고, 특정 조건에 따라 분기를 나누기 번거롭다. 또, 특정값을 공유해가면서 작업을 연달아하기 번거롭다고 한다.

async/await

위 단점을 보완한 async/await을 사용한다. Es8에 추가된 문법이다.

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve,ms));
}

async function process(){
    console.log('시작');
    await sleep(1000);
    console.log('인사');
}

process();

실행할 함수 앞에 async, 실행할 promise 앞에 await를 붙여주면 된다. 위 promise 코드처럼 .then()로 넘어가지 않고 함수내부에서 promise를 기다려서 분기점을 나누기 용이하다. 하지만 .catch()같이 에러를 핸들링하지 못해 error를 함수로 던저 try-catch구조로 잡아야한다.

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve,ms));
}
async function makeError() {
    await sleep(1000);
    cont err = new Error();
    throw error; // 에러 던지기
}
async function process() {
    try {
        await makeError();
    } catch (e) {
        console.error(e)
    }
}

process();

+추가로,

여러개 promise 동시에 처리할 수 있는, Promise.all() 배열에 프로미스들을 등록해주고 Promise.all로 감싸 실행한다. 단, 셋중에 하나라도 에러가 발생하면 전체 에러로 나타난다.

promise.race() 방법은 동일하지만, 등록한 프로미스 중에 가장 빨리 실행되는것 만 나타나게할 때 사용한다. 단, 가장 빨리 끝난게 에러가 나면 에러지만 나머지에서 에러나면 에러로 간주하지 않는다.

참고 : 패스트캠퍼스 강의 참고(벨로퍼트와 함께 하는 모던 자바스크립트 : 자바스크립트에서 비동기 처리 다루기 - 김민준 강사)

🚫 Extension host terminated unexpectedly

위와 같이 토스트 팝업이 뜨면서.. 탭이 안된다.

처음에는 sass를 npm 설치하고 생겨서 sass 때문인가 했는데,아니었고 emmet 문제도 아니였다. 검색결과 vscode에 설치한 extension이 문제‼️

🔨 해결방법

1. vscode에서 명령창 열기

   • 윈도우라면 ctrl+shift+p
   • 맥이라면 command+shift+p

2. 'Start the Extension Bisect' 를 쳐서 실행한다.

   

3. 정상적으로 작동할 경우, 하단에 토스트 팝업 확인한다.

• 여전히 문제라면 "This is bad"를
• 정상으로 작동한다면 "Good Now"를 누르고 "Stop Bisect"를 누른다.
  

마치며

내 경우에는 live sass compiler란 익스텐션과 live server 익스텐션 때문인거였고, live sass compiler를 disabled 하니 되었다

참고사이트

• https://stackoverflow.com/questions/70052961/error-extension-host-terminated-unexpectedly-in-vs-code
• https://github.com/microsoft/vscode/issues/139280

vue 공부를 친구와 같이하는데, 친구도 똑같이 router를 npm으로 설치하고 쓰려는데, 두둥... 에러가났다. 다 똑같이 했는데,,, 뭐 때문이지 하면서 알아봤는데.. 여기서? 오류가 발생한다고? 싶었던거라 기록하려한다.

발생 이유

main.js에서 router를 불러올 때, 글자 그대로 명시하지 않았을 경우

🔨 해결 방법

new Vue로 생성할때, router관한 key와 value를 똑같이해주지 않는다면 발생한다.

친구의 경우는 앞에 대문자로 Router로 명시해서 에러가 발생했다.

1. router로 똑같이해주기

   import router from './router'
   new Vue({
   render: h => h(App),
   router,
   }).$mount('#app')
   

2. router: 
```java
import Router from './router'
new Vue({
  render: h => h(App),
  router: Router,
}).$mount('#app')

참고사이트

• https://wotres.tistory.com/entry/vue-error-%ED%95%B4%EA%B2%B0%EB%B2%95-Error-in-render-TypeError-Cannot-read-property-matched-of-undefined

작업중인 개인프로젝트를 github에서 관리하려했다. GitHub에 레퍼지토리를 생성하고 remote 하려는데...!

위와 같은 에러가 발생했다.🥺

발생 이유

1. 명령을 실행하려고 했지만 git 리포지토리가 있는 프로젝트 폴더로 이동하지 않았을 경우

2. 프로젝트 디렉터리에 있지만 해당 프로젝트 폴더에 대한 Git 저장소를 초기화하지 않았을 경우

나의 경우는 두 번째 ㅎ..ㅎ

🔨 해결 방법

1. command line에서 cd를 사용해 해당 디렉토리로 이동!

2. git init 명령어 실행으로 프로젝트 디렉토리에 .git 폴더 생성!

참고사이트

• https://komodor.com/blog/solving-fatal-not-a-git-repository-error/

목록화면을 퍼블리싱 작업할 때, 종종 display: grid를 사용한다. 여백을 잡을 때, 특히 gap을 사용해 열과 행 사이의 간격을 컨트롤하기 쉬웠기 때문이다. 근데 display: flex에서도 가능한 줄 몰랐어서 찾아보고 기록 남기려한다.

사용 방법

1. 사용 조건

인접한 요소가 있을 때, gap 스타일 속성으로 갭을 만든다.

적용대상 : multi-column elements, flex containers, grid containers

❓multi-column (다중 칼럼) column-count 속성을 사용해 몇개의 단으로 레이아웃을 나눌 경우, 그 사이의 간격을 column-gap 뿐만아니라 gap 속성으로도 조정할수있다.

column-count: 3;
gap: 20px;

2. 사용 형식

gap: 4em 10px
/* gap = <'줄간격'> <'열 간격'> */ 

브라우저 호환성

현재 muluti-column에 대한 gap 스타일 속성이 일부만 지원하는 것 외에 flex-box와 grid은 모든 브라우저에서 지원된다. 자세한 내용은 아래 참고사이트 목록 중 첫 번째 클릭!

참고사이트

• https://developer.mozilla.org/ko/docs/Web/CSS/gap#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%ED%98%B8%ED%99%98%EC%84%B1
• https://webisfree.com/2020-12-05/[css]-%EC%8A%A4%ED%83%80%EC%9D%BC%EC%86%8D%EC%84%B1-gap%EC%9D%84-flex%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0