코딩기록

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