◆[프론트엔드 심화]프로젝트 - 동적 UI개발(5) - Zustand - 로그인 구현/임시 로그인 코드
지금 백엔드 api연결이 안되어서 위에 메뉴들과 비밀번호 초기화가 넘어가지 않는 상황.임시테스트 용으로 코드를 바꿔봄 메뉴 설정// useCategory.ts 수업 내용/*import { useState, useEffect } from 'react';import { Category } from '../models/category.model';import { fetchCategory } from '../api/category.api';export const useCategory = () => { const [category, setCategory] = useState([]); useEffect(() => { fetchCategory().then((category) => { console..
◆ [프론트엔드 심화]프로젝트 - 동적 UI개발(4) - 라우트 작성
라우트 작성(페이지, 링크를 타고 이동하는 경로)https://www.npmjs.com/package/react-router-dom react-router-domDeclarative routing for React web applications. Latest version: 7.5.2, last published: 3 days ago. Start using react-router-dom in your project by running `npm i react-router-dom`. There are 23706 other projects in the npm registry using react-router-dom.www.npmjs.comhttps://www.npmjs.com/package/@types/rea..
◆ [프론트엔드 심화]프로젝트 - 동적 UI개발(3) - 기본 컴포넌트 작성
기본 컴포넌트 작성title 컴포넌트// Title.tsximport styled from "styled-components";import { ColorKey, HeadingSize } from "../../style/theme";interface Props{ children : React.ReactNode; size: "large"| "medium" | "small"; color?: ColorKey;}function Title({children, size, color}: Props) { return( {children} );}const TitleStyle = styled.h1>`font-size: ${({theme, size}) => the..
◆ [프론트엔드 심화]프로젝트 - 동적 UI개발(2)-레이아웃 구성, 테마스위처, Property 'color' does not exist on type 'DefaultTheme'.오류
레이아웃 구성 Pico CSS • Minimal CSS Framework for semantic HTMLMinimal CSS Framework for Semantic HTML A minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà!picocss.com >>인덱스에 css를 넣는 방법 //App.tsx방법1import Layout from "./components/layout/Layout";import Detail from "./pages/Detail";..
◆ [프론트엔드 심화]프로젝트 - 동적 UI개발
프로젝트 환경 설치리액트 환경 툴은 두가지가 있다. (1)CRAC:\project>npx create-react-app book-store-c --template typescriptC:\project>cd book-store-cC:\project\book-store-c>ls //설치된 것 확인C:\project\book-store-c>npm run //어떤 코드를 사용할 수 있는지 알려줌npm start //리액트 시작(2) Vitenpm create vite@latest book-store-v -- --template react-tscd book-store-vnpm installnpm run dev >> (1)CRA 사용! 프로젝트 폴더(디렉토리) 구조pages - 라우트에 대응하는 페이지 컴포넌..