aotoyae

💡 NavLink 태그에 대해 알아보자. Link 를 NavLink 로 바꾸면 인라인 스타일을 적용할 수 있게 된다. 카탈로그 커뮤니티 선택한 메뉴에 밑줄이 그어지게 만들어주기..! function getLinkStyle({ isActive }) { return { textDecoration: isActive ? 'underline' : undefined, }; }

💡 typescript + react + vite 앱 만들어보자! ✚ 또 다른 명령어.. 새 폴더를 만들고 그 위치에서 npx create-vite-app . --template react-ts 폴더까지 새로 만든다면 npx create-vite-app 원하는_폴더_이름 --template react-ts npm install ✚ 원래는 이렇게 했었지만! npm create vite@latest yarn create vite npm 6.x npm create vite@latest [프로젝트 명] --template react-ts npm 7+, extra double-dash is needed: npm create vite@latest [프로젝트 명] --template react-ts 버전별로 입력하면..

💡 데이터를 바로 불러오는게 아니라 조건적으로 가져오기! 이벤트나 ~ 가져오는 순서나 ~ useQuery("key", getData, {option}) 유즈쿼리의 세번째 인자로 옵션을 설정할 수 있다! const { data, refetch } = useQuery(['todos'], getTodos, { enable: true }); enable 은 기본값이 true 여서 적지 않아도 true ! true 면 바로 실행해 데이터를 가져온다는 뜻이다. 그런데 자동으로 바로 데이터를 불러오는게 아니라 😲 사용자가 버튼을 눌렀거나 할 때 데이터를 가져오고싶다면? Disabling/Pausing Queries const { data, refetch } = useQuery(['todos'], getTodos, {..

💡 첫 프로젝트 글.. tmdb 영화 api 를 이용해 최신 영화를 가져와검색 기능을 구현하는 프로젝트였다. 처음엔 가져오는 것만으로도 막막했는데 어찌저찌 완성했다.그리고 tmdb 엔 정말 많은 api 키가 있었다.. 다른 방식으로도 재밌게 쓸 수 있을 듯 해..! 👀 🎀 상세페이지 API포스터, 백드롭 포스터, 평점, 영화 공식 사이트(click 에 연결) 등을 가져오는 주소!찾아보니 등장인물 정보도 가져오는 api 도 있었다.const FULL_URL = `${BASE_URL}movie/${movieId}?language=en-US&`; 🎀 포스터 이미지가 없는 영화는 대체 이미지를 넣어줬다 !oneerror="this.src='url'"movieLi.innerHTML += ` ..

💡 프롭스를 더 유연하게 내려보자 ~ UtilityType.tsx import { AddressComponent, PersonChildComponent, ProfileComponent, } from "./UtilityTypeChildren"; export type PersonProps = { id: string; description: string; address: string; age: number; profile: string; }; export const PersonComponent = ({ // ❗️ 다섯가지 타입들 설정 id, description, address, age, profile, }: PersonProps) => { return ( {id} // ❗️ 어드레스만 하나 내려주는 중 );..

💡 타입스크립트를 투두리스트에 활용해 보자. type Todo = { id: string; isDone: boolean; }; function App() { const [todos, setTodos] = useState([]); // Todo 에 세팅은 어떻게 넘길까?! return ( {todos.map(({ id }) => ( ))} ); } function Todo() { return ; } export default App; function App() { const [todos, setTodos] = useState([]); return ( {todos.map(({ id }) => ( // ❗️ 프롭스 넘겨주고 ))} ); } function Todo({ id, setTodos, }: { id: ..

💡 비동기 함수에 타입스크립트를 사용해 보자. fetchingData.ts async function getPerson() { const res = await fetch(`http://localhost:5008/people`); if (!res.ok) { throw new Error(); } return res.json(); } getPerson().then((res) => console.log(res)); ts-node fetchingData.ts 해보면 이렇게 데이터가 나온다. 그런데 지금 가져오는 값은 타입이 정해져 있지 않다. 바꿔보자! 🙋‍♂️ 첫 번째 방법 type Person = { id: number; age: number; height: number }; // 객체 타입을 정해주고 // ..

💡 class 를 활용해 간단한 책 대여 프로그램을 만들어보자. src/index.ts User, 책 정의 enum Role { LIBRARIAN, // 사서 MEMBER, // 멤버 } abstract class User { // 추상 클래스 constructor( public name: string, public age: number ) {} abstract getRole(): Role; } class Member extends User { constructor(name: string, age: number) { super(name, age); } getRole(): Role { return Role.MEMBER; } } class Librarian extends User { constructor(n..