코딩기록

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..

익스텐션에서 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..

arrA의 타입은 object const solution = (A) => { const arrA = A.toString().split('').map(Number); console.log('arrA: ', arrA);}console.log("solution", solution(12345));//printarrA: [ 1, 2, 3, 4, 5 ]arrA의 타입은 object

문제SNS에서 서로가 팔로우를 했다는 것을 '맞팔'이라고 표현합니다. 다음 팔로우 관계를 나타낸 배열을 통해 서로 맞팔 관계인 쌍의 수를 리턴하는 함수를 작성하세요. 이때 ["철수", "영희"] 라는 정보는 철수가 영희를 팔로우 했음을 나타냅니다. 입력  팔로우 관계가 표현된 String 2차원 배열 A. 출력  맞팔 관계인 쌍의 수 매개변수 : Stirng[][] A 리턴타입 : int 풀이const solution = (A) => { const followSet = new Set(); // 팔로우 관계 저장 let mutualCount = 0; // 맞팔 관계 수 for (const [a, b] of A) { const reverseRelation = `${ b } -> ${ a }`; /..

스왑 기본 동작좌항에서 배열의 각 위치에 우항의 값을 차례대로 할당하는 방식[a, b] = [b, a];​우항: [b, a] → 우항에서 b와 a의 값이 평가.좌항: [a, b] →  좌항에서 a와 b는 우항의 값을 차례대로 받는 것결과적으로,  좌항의  a에는 b의 값이 들어가고  b에는 a의 값이 들어감.    순열 재귀함수 - 스왑순열 (Permutation) 은 순서를 고려하여 나열하는 경우의 수let input = ['a', 'b', 'c'];let count = 0;// 순열 재귀함수 (배열, 시작할위치, 순열길이)const permutation = (arr, s, r) => { // 1. 재귀함수를 멈춰야할 조건 if (s === r) { count++; console.log(..

Array.from()은 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 배열로 변환하는 데 사용.문법 Array.from(arrayLike, mapFunction, thisArg);매개변수arrayLike: 배열로 변환하려는 유사 배열 객체 또는 반복 가능한 객체.mapFunction (선택 사항): 배열의 각 요소에 대해 호출할 매핑 함수.thisArg (선택 사항): mapFunction을 실행할 때 this로 사용할 값.사용 예제1. 유사 배열 객체를 배열로 변환  (문자열 => 문자배열)let str = "Hello"; let arr = Array.from(str); console.log(arr); // ["H", "e", "l", "l", ..

1. map const extractedCards1 = cards.map(card1 => { console.log('card1: ', card1); return card1});console.log('extractedCards1: ', extractedCards1);//printcard1: {}card1: {}extractedCards1: [ {}, {} ] 2. forEach cards.forEach(card2 => { console.log("card2:", card2);});//printcard2: {}card2: {} 3. for for (let i = 0; i  4. for...of for (const card4 of cards) { console.log( card4);}//print{..

useEffect는 React의 훅(hook) 중 하나로, **부수 효과(side effects)**를 처리하기 위해 사용된다.컴포넌트가 렌더링된 후 특정 작업을 수행하거나, 상태나 props의 변경에 따라 동작을 정의할 수 있게 해준다. 클래스형 컴포넌트에서 사용했던 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)를 대체하는 역할을 한다. 특징1. 의존성 배열에 따라 동작 2. 클린업(Cleanup)반환값으로 클린업 함수를 정의할 수 있음.이는 주로 이벤트 리스너 제거, 타이머 정리, 구독 취소 등에 사용.import React, { useState, useEffect } from 'react';export default fu..

코드의 주석이 조금 복잡하지만 요지는React의 setState 함수에서 콜백을 사용하는 것은 상태 업데이트가 비동기적이라는 점을 고려해 최신 상태를 안전하게 참조하기 위한 메커니즘이라는 것이다. const [number, setNumber] = useState(1);number는 현재 상태 값(배열)이고, setNumber는 이 상태를 업데이트하기 위한 함수.초기값( useState(1))은 원시타입 Number다.import React, { useState } from "react";export default function Counter2() { const [number, setNumber] = useState(1); // 비동기 적으로 실행됨-콜백사용하지 않아- 상태 업뎃시 최신 상태 반영안됨..

원시타입 state와 참조타입 state는 리액트에서 상태를 업뎃하는 방식과 리렌더링 조건에 차이가 있다.[ state, setState ]스테이트, 셋스테이트 통상적으로 이렇게 부른다. 살펴보면,  1. 원시 타입(Primitive Type) State원시 타입은 값 자체를 저장하는 데이터 타입.string, number, boolean, null, undefined, symbol, bigint특징값 자체가 변경되면 React는 해당 상태를 새 값으로 인식하고 리렌더링을 트리거함.업데이트가 간단하며 불변성(immutability)을 비교적 쉽게 유지할 수 있음.예제 [ jsx ]import React, { useState } from "react";function Counter() { const [c..

1. CRA (create react app)리액트 공식 홈피https://ko.legacy.reactjs.org/docs/add-react-to-a-website.html 노드와, npm 버전 확인node -vnpm -v  리액트 프로젝트 생성  npx create-react-app 프로젝트이름npx create-react-app my-app 설치확인 ls -al설치한 위치로 이동 cd my-app 간혹 프로젝트 생성 후 web-vitals 모듈이 누락된 경우 아래 명령어로 설치 하면된다. npm install web-vitals그리고 현재 250106월  react@19.0.0 버전과 @testing-library/react@13.4.0 버전 사이에 버전 충돌이 있다.1. React 버전 변경: re..