코딩기록

TypeScript에서 type과 interface는 둘 다 타입을 정의하는 역할을 하지만, 몇 가지 차이가 있음 .1. 기본적인 차이점type interface용도다양한 타입(객체, 유니온, 맵드 타입 등)을 정의할 때 사용객체의 구조(프로퍼티와 메서드)를 정의할 때 사용확장(상속)&(인터섹션)으로 확장extends 키워드로 확장중복 선언 가능 여부❌ 불가능 (덮어쓰기 됨)✅ 가능 (자동으로 병합됨)유니온 타입 지원✅ 가능❌ 불가능맵드 타입 지원✅ 가능❌ 불가능2. 타입 상속(확장) 방식 비교(1) interface의 확장 (extends)인터페이스는 extends 키워드를 사용하여 확장할 수 있음.interface Person { name: string; age: number;}interface ..

타입 가드(Type Guard)**는 TypeScript에서 특정 값이 어떤 타입인지 판별하는 기능.유니온 타입이나 타입이 확실하지 않은 값을 처리할 때 매우 유용.✅ 타입 가드(Type Guard)란?타입 가드는 런타임에서 타입을 좁히는(Narrowing) 역할.즉, 특정 조건을 만족하면 TypeScript가 해당 변수의 타입을 더 구체적으로 인식할 수 있도록 도와줌.예제) 타입 가드 없이 타입 오류 발생 🚨function printLength(value: string | number) { console.log(value.length); // ❌ 오류: 'number'에는 'length' 속성이 없음}위 코드는 number 타입에는 length 속성이 없기 때문에 오류가 발생.✅ 타입 가드를 사용하..

내가 현재쓰는 버전 1. 프로젝트 생성 및 초기 설정npx create-react-app my-app --template typescriptcd my-appnpm install react@18 react-dom@18 간혹 프로젝트 생성 후 web-vitals 모듈이 누락된 경우 아래 명령어로 설치 하면된다. npm install web-vitals  2. 필요한 패키지 설치npm install react-router-dom@^7.1.5 web-vitals styled-components @types/styled-componentsnpm install @eslint/config-array @eslint/object-schema eslint-config-prettier eslint-plugin-prettie..

[ Header.tsx ]import React from 'react';import styled from 'styled-components';import { ProgressBar } from 'react-bootstrap';interface Props { type: string;}export default function Header(props: Props) { return ( {props.type === 'progress' ? ( ) : ( 😻예비집사 판별기 )} );}const ProgressWrapper = styled.div` font-size: 40pt; align-items: cent..

처음 깃헙 상태  커밋 전 vscode 상태  여기서 메시지를 쓰고  ✔Commit  을 클릭.   ☁ Publish Branch   클릭  public 선택여기서 private과 publish 선택을 잘못하면 나중에 repository > setting에 들어가서 다시 public으로 설정해야 한다.첨부터 public으로 선택! vscode에서 커밋완료 후 깃헙 홈피로 들어가 확인하면 이렇게 새로 레파지토리가 생성되어 있다.clone 안 하고 기존 프로젝트를 깃헙 새 레파지토리에 연동하기 끝!

익스텐션에서 prettier, Eslint를 설치 한다.[ .prettierrc ]{ "arrowParens": "avoid", "bracketSpacing": true, "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxBracketSameLine": false, "jsxSingleQuote": false, "printWidth": 120, "proseWrap": "preserve", "quoteProps": "as-needed", "requirePragma": false, "semi": true, "singleQuote": false, "tabWidth": 2, "trailingComma": "es5", "use..

1. 프로젝트 폴더 생성 및 초기화터미널에서 새로운 프로젝트 폴더를 생성하고 해당 폴더로 이동.mkdir ts-app cd ts-appVite로 React + TypeScript 템플릿 생성 (권장)Vite는 빠르고 효율적인 빌드 시스템을 제공. 최신 React 환경에 적합함.npm create vite@latest  --template react-ts필요한 패키지 설치Select a framework: React  선택Select a variant: TypeScript  선택npm install  2. 설정 확인 및 수정 - 선택사항package.json 파일 수정필요한 의존성들만 포함되도록 package.json을 다음과 같이 수정.{ "name": "ts-app", "version": "0.1...

일차원 배열 하나로flat() - 한 단계만 평탄화const arr = [[1, 2], [3, 4], [5, 6]];const flattened = arr.flat();console.log(flattened); // [1, 2, 3, 4, 5, 6] reduce() - 배열을 누적하여 하나의 배열로 합산const arr = [[1, 2], [3, 4], [5, 6]];const flattened = arr.reduce((acc, val) => acc.concat(val), []);console.log(flattened); // [1, 2, 3, 4, 5, 6] (...) 스프레드연산자와 concat() - 배열을 펼쳐서 합산const arr = [[1, 2], [3, 4], [5, 6]];const fl..

이중 배열에서 최대값만 찾아 일차원 배열로 만들기const twoArr = [[1, 2], [3, 4], [5, 6]];const maxValues = twoArr.map(subArr => subArr.reduce((max, num) => Math.max(max, num), -Infinity));console.log(maxValues); // [2, 4, 6] 최대값만 더하기.reduce를 추가한다.const twoArr = [[1, 2], [3, 4], [5, 6]];const sumOfMaxValues = twoArr.map(subArr => subArr.reduce((max, num) => Math.max(max, num), -Infinity)) .reduce((sum, maxVal) => s..