'웹 프로그래밍' 카테고리의 글 목록

[React] NavLink

웹 프로그래밍 2025. 1. 1. 18:49

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

useMemo()

웹 프로그래밍 2024. 11. 20. 10:57

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

[Vue.js] Computed Properties

웹 프로그래밍 2024. 11. 6. 09:59

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

[Vue.js] 시작하기

웹 프로그래밍 2024. 11. 5. 11:04

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

useRef (scrollIntoView)

웹 프로그래밍 2024. 11. 4. 16:12

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

TypeScript SVG 파일

웹 프로그래밍 2024. 9. 20. 20:31

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

ABOUT ME

스히네 스히네

티스토리툴바