v-for 사용시 key값 사용하기🚨 Vue 3에서는 사용 시 key가 없으면 경고(warning)가 발생한다.일반적인같은 경우에는 여전히 key 없이도 동작하지만, 사용을 권장한다고 한다.또 다른 주의점은 v-for를 사용할 때 key 값으로 index를 사용하는 것은 몇 가지 문제를 일으킬 수 있다는 점이다. key 값으로 index를 사용시 문제점1. 컴포넌트 상태 유지 문제 Vue는 key를 기준으로 가상 DOM에서 요소를 식별하고 업데이트할지 여부를 결정한다. index를 key로 사용하면 배열이 변경될 때 예상치 못한 상태 유지 문제가 발생할 수 있다. 첫 번째 요소 { id: 1, value: "A" }를 제거하면 id: 2와 id: 3이 한 칸씩 앞으로 이..
✨ Intro새로운 프로젝트는 Vue.js를 사용하게 되어 학습 중 자동완성으로 생성되는 코드 템플릿과 vue 시작시 기본으로 생성되는 HelloWorld.vue 파일의 구조가 달라 궁금증이 생겼다. 기본적으로 *.vue 파일 생성시 vueinit을 입력하면 자동완성으로 코드 템플릿을 사용할 수 있다. 또한, VSCode 확장프로그램 중 Vue VSCode Snippets를 설치하면 아래와 같이 자동완성을 사용할 수 있다. 자세히 보면 모두 template → script → style 순으로 배치되어있다. 하지만 Vue 프로젝트 생성시 자동으로 생성된 HelloWorld.vue파일은 script → template → style 순이다.// src/components/HelloWord.vue ..
로컬 그룹 정책 편집기 Win + R 누르고 gpedit.msc 입력또는 윈도우 검색에 ‘그룹 정책 편집’ 검색 로컬 그룹 정책 편집기에서 컴퓨터 구성 → 관리 템플릿 → 네트워크 → Lanman 워크스테이션 으로 이동 1. 안전하지 않은 게스트 로그온 감사 - [사용] 설정2. 보안되지 않은 게스트 로그온 사용 - [사용] 설정 아마 ' 안전하지 않은 게스트 로그온 감사 - [사용] 설정' 만으로도 해결될 것이다.
ApexCharts에 기본적으로 차트 이미지 다운로드 버튼이 있는데 별도 버튼으로 분리하려고 한다. ApexChart 설치하기공식 홈페이지 : https://apexcharts.com/docs/installation/ Installation & Getting Started – ApexCharts.jsIntegrating ApexCharts is as simple as it can get with extensive API docs and 100+ samples ready to be used. Check out all the options of ApexChartswww.apexcharts.com apexcharts와 react-apexcharts를 설치해준다.npm install apexcharts reac..
Home 컴포넌트를 import할 때 "@/pages/Home" 형식이 아닌 src경로 하위의 폴더에 바로 접근하고 싶었다. 내가 원하는 경로 형식import Home from "pages/Home"; 하지만 아래와 같이 `pages/Home' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.' 라는 오류가 뜨면서 경로를 찾을 수 없었다.import { Routes, Route } from "react-router-dom";import Home from "pages/Home";const routes = [{ path: "/", component: , name: "Home" }];const AppRoutes = () => { return ( {routes.map((route) => ( ..
Intro모바일 환경에서 구동하는 웹뷰 형식의 프로젝트 구성을 위한 자료 수집을 하던 중 “2024 당근 테크 밋업”을 통해 모바일 환경에 적합한 Routing 라이브러리를 발견했다.🕑 10:20 참고🔗 프레임워크부터 플랫폼까지: 당근 웹뷰 플랫폼 | 2024 당근 테크 밋업 StackflowStackflow는 모바일 디바이스(iOS/Android 등)에서 주로 활용되는 Stack Navigation UX를 JavaScript 환경에서 구현하고, 이를 통해 하이브리드 앱과 웹뷰 개발을 쉽게 할 수 있도록 돕는 🥕 당근에서 만든 프로젝트이다.화면을 쌓고 스크롤을 유지화면이 쌓이는 전환 효과와 뒤로가기 시 화면이 사라지는 전환 효과를 지원iOS 스타일의 스와이프백을 통한 뒤로가기 동작 지원전환되는..
Introinput 태그에 양수만 입력을 받으려고 한다. 그런데 백스페이스로 입력값을 지운 후 키패드로 숫자 입력시 가장 왼쪽에 최소값인 0이 그대로 존재하는 현상을 해결하려고 한다. 기존 코드import { ChangeEvent, useState } from "react";import styled from "styled-components";const InputTest = () => { const [inputValue, setInputValue] = useState(0); const handleInputChange = (e: ChangeEvent) => { const value = e.target.value; // string 형태 console.log("value : ", value..
모바일에서 주로 사용되는 형태의 날짜 선택 컴포넌트를 만드려고 한다. 미리보기 환경react : v18.3.1styled-components: v6.1.13react-mobile-picker : v1.0.1 React Mobile Picker 설치npm install react-mobile-pickerNPM : https://www.npmjs.com/package/react-mobile-picker 코드import { useEffect, useState } from "react";import styled from "styled-components";import Picker from "react-mobile-picker";interface ISelections { year: number[]; month..
완성 화면 미리보기프로젝트 생성vite로 프로젝트를 생성했다.react : v18.13.1styled-components : v6.1.13npm create vite@latestcd calendarnpm install npm i styled-components date-fns 라이브러리 설치date-fns는 JavaScript에서 날짜와 시간 변환등을 다루는데 매우 유용한 도구이다.date-fns : v4.1.0npm i date-fns Calendar 컴포넌트 만들기 generateCalendar.ts 특정 월의 달력을 생성하는 함수// src/generateCalendar.tsimport { startOfMonth, endOfMonth, startOfWeek, endOfWeek, addD..
Intro환경 : React + Webpackfavicon 파일 경로 : src/assets/favicon/favicon.ico HtmlWebpackPlugin을 사용하는 경우HtmlWebpackPlugin 플러그인을 사용한다면 favicon 경로를 설정하는 것 만으로 간단하게 적용할 수 있다. 다만, 단일 favicon만 처리 가능하다.장점: 설정이 간단함장점: 자동으로 favicon을 처리함단점: 단일 favicon만 처리 가능// webpack.config.jsconst HtmlWebpackPlugin = require('html-webpack-plugin');const path = require('path');module.exports = { // ... 다른 설정들 plugins: [ ..
