본문 바로가기

전체 글

 (55)
[TS] type과 interface 차이와 index signature 타입스크립트에서 타입을 지정하는 방식에는 2가지가 있다type과 interface를 비교해보자 interface- 확장(extends), (다중)상속이 가능하다- 동일한 이름을 여러번 사용 가능(= 하나로 병합) props를 정의할 때 사용한다interface A { a: string;}interface B { b: string;}interface C extends A, B { c: string;}const example: C = { a: "a", b: "b", c: "c"};interface Car { drive(): void; // 메소드 wheels: number;}interface Boat { sail(): void; sails: number..
class-variance-authority (cva) 사용법 간단 정리 cva란?cva는 class-variance-authority 라이브러리의 함수로, 조건부로 CSS 클래스 이름을 생성하고, 일관성 있는 UI 정의와 관리를 하기 위해 사용된다이 라이브러리는 다양한 변형(variants)을 정의하고, 이러한 변형을 기반으로 동적으로 클래스 이름을 생성할 수 있게 한다이를 통해 CSS 클래스 이름을 조합하고 조건부로 적용하는 작업을 간편하게 처리할 수 있다! cva(baseStyle, {option})먼저 코드를 보면 const buttonVariant = cva("rounded border font-semibold hover:brightness-90 active:brightness-75", { variants: { intent: { primary: "bg..
비슷해서 헷갈리는 Rest 파라미터, spread 연산자 function Input({ label, ...props }: InputProps) { return ;} 예시 코드는 props를 받아서 label 속성을 제외하고, 나머지 속성을 props객체로 받아서 input 태그에 전달해 주는 코드이다 리액트에서 컴포넌트는 하나의 객체 (props)를 매개변수로 받기 때문에 구조분해로 가져올 수 있다 매개변수에 사용된 것은 rest 연산자매개변수를 input 태그에 전달하는 spread 연산자이다 생긴 게 비슷하고, 이름을 원하는대로 지을 수 있어서 헷갈리는 개념인 것 같다 Rest 파라미터 (나머지 매개변수)나머지 매개변수들을 하나(배열)로 모으는 역할주로 함수 매개변수, 배열 구조 분해, 객체 구조 분해에서 사용된다. 1. 함수 매개변수 = 매개변수를 ..
[JS] 핸드폰 번호 가리기 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 핸드폰 뒷자리 4자리를 제외한 나머지를 * 으로 출력하고, slice를 통해 -4 다음을 복사해서 문자열을 연결한다function solution(phone_number) { var answer = ''; answer = '*'.repeat(phone_number.length-4) + phone_number.slice(-4) return answer;}
[JS] 숫자 문자열과 영단어 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문자로 작성된 글자가 있다면 모두 숫자로 바꿔야하는 조건으로, words 배열을 돌면서 해당 문자가 s 문자열에 있다면, 모두 숫자로 바꾼다function solution(s) { words = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'] for(let i=0; i
react router Link에서 데이터 넘기기 다른 페이지로 이동할 때 Link 태그를 사용한다이때 Link 태그의 state에 전달할 값을 넘기면, useLocation을 사용해 값을 가져올 수 있다let { state } = useLocation();  실제로는 이렇게 사용했다 const location = useLocation();const { place_name: shop_name, road_address_name } = location.state;
vite에서 절대 경로 설정하기 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'), // 추가적인 경..
react router에서 useParams와 useSearchParams의 차이 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'} 을 반환한다 ..

티스토리툴바