![]()
1. console.log('검색어:', keyword); const { data, error, isLoading } = useQuery({ queryKey: ['searchResults'], queryFn: () => getSearchResultApi(keyword), }); if (isLoading) { return Loading...; } if (error) { console.error('Error fetching search results:', error); return 에렁에렁; } if (!data) { return 노 결과에영; } console.log('data:', data); console.log('data.length:', Object..
![]()
오류일기가 날아갔다,,, 뭐 별로 중요한 거 없겠지,,, '{ searchKeyword: string; }' 형식은 'string' 형식에 할당할 수 없습니다. import React from 'react'interface SearchResultProps { searchKeyWord: string }const SearchResult = (KeyWord: SearchResultProps) => { return {KeyWord.searchKeyWord};};export default SearchResult 우선 interface로 props의 타입을 지정해주고 받아오니 문제가 해결되었다.아마 search가 { search : ~~ } 이런 식으로 받아와서 그런 것 같다. 근데 아이러니하게 c..
![]()
리액트를 다시 공부해야 할 것 같다... 잊어버린 게 너무 많아서... https://sam-repository.tistory.com/14 리액트(React) 공부 시작하기오늘은 JavaScript로 웹 프론트엔드 개발을 하는 분들이라면 한 번쯤은 들어봤을 React.js 학습 방법에 대한 글을 작성하려고 합니다! 12월 한 달이 조금 안 되는 기간 동안 React를 학습하면서 찾아본sam-repository.tistory.com https://ko.react.dev/learn https://brunch.co.kr/@princox/235
![]()
이번에 메인 홈페이지에 애니메이션을 넣었다.딸깍이라 참 좋았다... 쉽고 간편한데 페이지들을 더 고급지게 만들어주는 것 같아 밑에 링크들을 정리한다 메인으로 보면 좋을 것 같은 예시들이 있는 페이지https://motion.dev/docs/react-animationhttps://www.framer.com/developers/ 용어들을 정리해놓은 블로그들https://flen-e.github.io/Framer-Motion/https://velog.io/@keumky1/Framer-Motion-%EC%9E%85%EB%AC%B8%ED%95%98%EA%B8%B0https://velog.io/@dae_eun2/Framer-motionhttps://velog.io/@zimablue14/Framer-Motion#t..
![]()
이것저것 사용해봤으나... 결국 혼자서는 해결을 하지 못해 챗gpt의 도움을 빌렸다.아래는 수정된 코드 전문이다.코드더보기import { cva, } from 'class-variance-authority';import { cn } from '@/app/utils/cn';import React from 'react';import Image from 'next/image';import { ProfileProps } from './type';export const ProfileVariants = cva('', { variants: { size: { sm: 'flex size-[4rem] rounded-[1.25rem] object-cover', md: 'flex size-[7.2re..
![]()
버튼 컴포넌트를 다 만들고 나서 이미지 컴포넌트를 만들 차례가 됐다.이전에 버튼을 만들던 경험으로 size만 있을 것 같아서 size만 붙여넣었다. 코드더보기import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/app/utils/cn';import { ButtonHTMLAttributes, FC } from 'react';import React from 'react';type Size = 'sm' | 'md' | 'lg';interface AvatarProps { size: Size;}const AvatarVariants = cva('rounded-[0.625rem] hover:brightness-9..
![]()
버튼 컴포넌트는 버튼을 만들 때 속성들을 매번 입력하기 귀찮고 코드가 길어져서 재사용을 하기 위해 만든 것이다.1차적으로[리팩토링] 재사용 가능한 버튼 컴포넌트 만들기이 블로그의 글을 참고해서 버튼 컴포넌트를 제작하였다.코드더보기import React from 'react';import { cva, VariantProps } from 'class-variance-authority';import { ReactNode } from 'react';type Color = 'blue' | 'white' | 'gray';type Size = 'sm' | 'md' | 'lg';interface ButtonProps { type?: 'submit' | undefined; // type이 undefined인 경우에는 ..
![]()
function solution(a, b, c) { if ((a + b + c) / 3 === a) { return Math.pow(a,6) * Math.pow(3,3) } if ((a === c && a !== b) || (a === b && a !== c) || (b === c && a !== c)) { return (a + b + c) * (a*a + b*b + c*c) } if (a !== b !== c) { return a + b + c }}깡으로 조건을 다 넣었다.다른 방법이 없진 않을까 내일 더 고민해보고 다른 사람의 답을 보는 게 좋을 것 같다. 2번째 식만 잘 해보자 ++ 새로 알게 된 문법은Math.pow로, Math..
