코딩기록

import "./App.css";import React, { useEffect, useState } from "react";// useEffect - 컴포넌트 랜더링 될 때 특정시점을 캐치 해서 실행할 수 있도록 함./* mount ( = 리액트 컴포넌트가 그려질때, 렌더될때 ) unmount ( = 리액트 컴포넌트가 사라질때, 지워질때 ) update ( = 특정 값이 변해서 리액트 컴포넌트가 다시 그려질때 )*/function App() { const [count, setCount] = useState(0); // mount => []빈배열은 App()이 로딩될때 초기에 딱, 한번만! 호출됨. useEffect(() => console.log("hello"), []); // unmoun..

레퍼런스 참고중 도저히 코드가 안읽혀서 package.json을 보니 역시나 나와 다른 점이 있었다. 난 Vite 프로젝트. 넌 Next.js 프로젝트. 차이점을 내 공부 메이트 아리에게 물어봤다.  아리답변 현재 진행 중인 Rumiware 쇼핑몰 프로젝트(Vite)와 Next.js 주요 차이점과 유사점을 비교프로젝트 비교1. 사용 기술Rumiware 쇼핑몰 프로젝트: Vite, React, TypeScript, Recoil, TailwindCSS, DaisyUI 등Next.js 프로젝트: React, TypeScript, Next.js (서버 사이드 렌더링, 정적 사이트 생성 등을 지원하는 프레임워크)차이점:Rumiware 프로젝트는 Vite를 사용하여 빌드 시스템을 관리하고 있으며, React, Ty..

언제 파일뒤 확장자에 .ts를 쓰고 언제 .tsx를 써야할까? jsx를 쓰면  .tsx  jsx를 안쓰면 .ts    ✅ .ts vs .tsx 사용 기준표사용 예시 JSX 사용 여부 추천 확장자 설명✅ 유틸 함수 (formatDate, calculateTax)❌ 없음.tsUI와 무관한 일반 로직✅ 타입 정의 (types.ts, user.types.ts)❌ 없음.ts인터페이스, 타입 등만 포함✅ API 요청 (api.ts, useAxios.ts)❌ 없음.tsfetch, axios 등 비동기 로직✅ 커스텀 훅 (useAuth, useModal)❌ 없음.ts훅 내부에서 JSX를 리턴하지 않으면 .ts✅ React 컴포넌트 (Header, ProductCard)✅ 있음.tsxJSX 포함 시 반드시 .tsx✅ 페..

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