function Input({ label, ...props }: InputProps) { return ;} 예시 코드는 props를 받아서 label 속성을 제외하고, 나머지 속성을 props객체로 받아서 input 태그에 전달해 주는 코드이다 리액트에서 컴포넌트는 하나의 객체 (props)를 매개변수로 받기 때문에 구조분해로 가져올 수 있다 매개변수에 사용된 것은 rest 연산자매개변수를 input 태그에 전달하는 spread 연산자이다 생긴 게 비슷하고, 이름을 원하는대로 지을 수 있어서 헷갈리는 개념인 것 같다 Rest 파라미터 (나머지 매개변수)나머지 매개변수들을 하나(배열)로 모으는 역할주로 함수 매개변수, 배열 구조 분해, 객체 구조 분해에서 사용된다. 1. 함수 매개변수 = 매개변수를 ..
프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 핸드폰 뒷자리 4자리를 제외한 나머지를 * 으로 출력하고, slice를 통해 -4 다음을 복사해서 문자열을 연결한다function solution(phone_number) { var answer = ''; answer = '*'.repeat(phone_number.length-4) + phone_number.slice(-4) return answer;}
프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문자로 작성된 글자가 있다면 모두 숫자로 바꿔야하는 조건으로, words 배열을 돌면서 해당 문자가 s 문자열에 있다면, 모두 숫자로 바꾼다function solution(s) { words = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'] for(let i=0; i
다른 페이지로 이동할 때 Link 태그를 사용한다이때 Link 태그의 state에 전달할 값을 넘기면, useLocation을 사용해 값을 가져올 수 있다let { state } = useLocation(); 실제로는 이렇게 사용했다 const location = useLocation();const { place_name: shop_name, road_address_name } = location.state;
vite.config에서 alias 를 사용해서 찾을 경로와 바꿀 경로를 연결 해주면 된다import { defineConfig } from 'vite';import react from '@vitejs/plugin-react';import path from 'path';export default defineConfig({ plugins: [react()], resolve: { alias: { '@': path.resolve(__dirname, 'src'), 'components': path.resolve(__dirname, 'src/components'), 'assets': path.resolve(__dirname, 'src/assets'), // 추가적인 경..
useParamsurl 경로에서 동적 세그먼트를 가져오는데 사용된다url 경로 매개변수인 userId를 추출하여 UserProfile 컴포넌트에서 사용할 수 있다import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';function UserProfile() { const { userId } = useParams(); return User ID: {userId};}function App() { return ( } /> );}export default App; url이 /user/123 인 경우, useParams는 {userId: '123'} 을 반환한다 ..