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: [ ..
문제https://school.programmers.co.kr/learn/courses/30/lessons/131705 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 자바스크립트function solution(number) { const cnt = number.length let answer = 0; for (let i = 0; i
문제https://school.programmers.co.kr/learn/courses/30/lessons/134240 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 자바스크립트function solution(food) { let bucket = [] for (let i = 1; i
문제https://school.programmers.co.kr/learn/courses/30/lessons/142086 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 자바스크립트function solution(s) { let indexHash = {}; let answer = [] for (let i = 0; i
문제https://school.programmers.co.kr/learn/courses/30/lessons/92334?language=javascript 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 자바스크립트function solution(id_list, report, k) { // 신고 횟수 누적 let hash = {} for (const receive of report) { const receiveList = receive.split(' ') if (hash[receiveList[1]]) { hash[receiveList[1]].pu..
문제https://school.programmers.co.kr/learn/courses/30/lessons/42579 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 자바스크립트function solution(genres, plays) { // 재생 횟수 저장 let playList = {}; for (let i = 0; i b.max - a.max) // 장르별 재생 횟수가 많은 곡 선택 answer = [] for (const genre of sortedGenres) { // 장르 안에서 재생 횟수가 많은 곡 순으로 Sorting const..
문제https://school.programmers.co.kr/learn/courses/30/lessons/42888?language=javascript 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 자바스크립트function solution(record) { // 객체에 Key Value를 통해 user의 정보를 등록 또는 변경 let userDb = {}; for (const event of record) { const eventList = event.split(' ') if (eventList[0] === "Enter" || eventList[0] === ..
