스히네 스히네

Link 라우터 내에서 직접적으로 페이지 이동을 하고자 할 때 사용되는 컴포넌트html의 태그와 비슷한 역할을 한다import React from 'react';import {Link} from 'react-router-dom';function Nav(){ return ( Home About );}export default Nav;   NavLink 와 거의 동일한 기능을 하지만, 현재 라우트 경로와 일치 여부를 판단하여 스타일 혹은 클래스를 추가할 수 있게 해준다ex) 네비게이션 바 구현 시, 현재 선택된 메뉴에 특수한 스타일을 주기 위해 사용한다. ({ fontWeight: isActive ? "bold" : "normal", textDecora..

나는 트리가 너무 어렵다. package algorithm;import java.io.*;import java.util.*;public class Main { static int N, R, Q; static ArrayList[] tree; static int[] sizes; static boolean[] visited; // 서브트리 크기 구하는 배열 static int getSizes(int node) { visited[node] = true; int cnt = 1; for (int next : tree[node]) { if (!visited[next]) { cnt += getSizes(next); } } sizes[node] = cnt; return cnt;..

useMemo는 React에서 제공하는 훅으로, 값을 메모이제이션(Memoization) 하여 불필요한 계산을 방지하고 성능을 최적화하는 데 사용됩니다. 특정 값이나 계산이 의존성(dependencies)이 변경되지 않는 한 재계산되지 않도록 보장합니다.기본 개념useMemo는 복잡한 계산이나 무거운 연산을 수행해야 하는 값이 컴포넌트 렌더링 때마다 재계산되는 것을 방지합니다. 이를 통해 성능을 최적화할 수 있습니다.const memoizedValue = useMemo(() => { return computeExpensiveValue(a, b);}, [a, b]);computeExpensiveValue(a, b): 계산을 수행하는 함수.[a, b]: 의존성 배열로, 이 값들이 변경될 때만 compute..

Computed()계산된 속성을 정의하는 함수로, 미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄인다. const food = ref([ {text: '햄버거'}, {text: '초밥'}, {text: '부대찌개'}]){{ food.length > 0 ? 'food left' : 'no food' }}  위 코드에 computed를 적용해보자 const food = ref([ {text: '햄버거'}, {text: '초밥'}, {text: '부대찌개'}])const { createApp, ref, computed } = Vueconst restOfFood = computed(() => { return food.value.length ..

Template SyntaxDOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용  1. Text Interpolation- 이중 중괄호 구문 (콧수염 구문) 사용- 콧수염 구문은 해당 구성 요소 인스턴스의 msg 속성 값으로 대체- msg 속성 변경 시마다 업데이트  2. Raw HTML- 콧수염 구문은 데이터를 일반 텍스트로 해석함- 실제 HTML 출력하려면 v-html 사용해야 함  3. Attribute Bindings- 콧수염 구문은 HTML 속성 내에서 사용할 수 없기 때문에 v-bind 사용- html의 id 속성 값을 vue의 dynaminId 속성과 동기화 되도록- 바인딩 값이 null이나 undefined라면 렌더링 요소에서 제거  4..

진행하던 프로젝트에 챗GPT openapi를 활용한 챗봇을 만들고 싶었다.   바로 이렇게!!기능 구현은 모두 완료하였지만, 문제가 하나 남아있었다.  대화가 창을 넘어서면 최신 대화인 가장 하단으로 이동해야 하는데그대로 상단만 노출되었다는 점.... useRef라는 개념을 사용하였다  useRef를 사용하는 경우는? 특정한 virtual Dom element를 선택하고자 할 때 사용한다. input을 강제로 focus 시키거나, 요소의 크기나 위치를 얻어야 할 때 등이 있을 것. 바닐라JS에서는 getElementById, querySelector와 같은 메서드로 특정 element를 선택해 이런 작업을 할 수 있었지만, 가상DOM을 이용하는 React에서는 렌더링이 끝나기 전에는 페이지에 해당 ele..

import notice from "../assets/imgs/notice.svg"; 위 코드 작성 시 다음과 같은 에러 발생 Cannot find module '../assets/imgs/notice.svg' or its corresponding type declarations.ts(2307)   TypeScript는 SVG 파일을 기본적으로 모듈로 인식하지 않기 때문에profile.svg 같은 파일을 가져올 때 타입 선언이 필요합니다. 이를 해결하기 위해declaration.d.ts 파일에 SVG 모듈에 대한 타입을 선언할 수 있습니다.  declare module "*.svg" { const content: any; export default content;}  어라 아니다...타입을 strin..

1. 문제 요약 어라!동물원에서 원숭이가 한 마리 탈출했다. 그 녀석은 이상한 꿈이 있었는데…바로 말(Horse)이 되고 싶었다는 것 ! 포기란 배추 셀 때나 하는 말(Talk) 이었던 원숭이는 말을 따라 움직여 보기로 했다.말은 다음과 같이 이동할 수 있으며, 장애물을 뛰어넘을 수 있다.  어라근데 원숭이가 착각까지 하고 있다. 원숭이는 능력이 부족해서 K번만 말처럼 움직일 수 있고, 그 외에는 인접한 칸으로만 이동할 수 있다.원숭이는 여행을 떠난다. 왼쪽 위 → 오른쪽 아래까지 이동하고자 한다. 👿 원숭이가 최소한의 동작으로 도착점까지 갈 수 있는 방법을 알아내자! 👿 2. 문제 입출력입력값원숭이의 동작 수의 최솟값 : K격자판의 크기 : W, H격자판의 상태 ( 0은 평지, 1은 장애물 )14 ..