CASSIE'S BLOG

네, 정확히 맞습니다. flex-wrap: wrap; 속성은 Flexbox 레이아웃에서 아이템들이 부모 컨테이너 안에서 여러 행으로 나누어질 수 있도록 지정하는 것입니다. 이것은 부모 컨테이너의 크기에 맞추어 유연하게 행을 생성하고, 필요한 경우에 여러 행에 아이템들을 배치할 수 있게 해줍니다. 만약 flex-wrap: nowrap;으로 설정한다면, 모든 아이템은 한 줄에 나란히 배치되며 부모 컨테이너를 벗어나지 않고 한 줄에 표시됩니다.

출처: https://www.youtube.com/watch?v=xkpcNolC270TypeScript는 에러메세지 퀄리티가 오짐. 타입스크르비트는 그냥 코드 에디터 부가기능 역할로 봐도 될 듯 코드짤 폴더 만들고 ts로 파일 확장자 해야한다. 저 내용 복사붙여넣기 해야함.' tsconfig.json에 들어갈건 { "compilerOptions" : { "target": "es5", "module": "commonjs", } } 이렇게 짠 코드는 브라우저가 인식을 못한다고함 .ts 파일을 브라우저가 못 읽어요. 브라우저는 무조건 자바스크립트 파일만 읽을 수 있다고함. 당연히 ts 파일을 js로 변환해야 사용가능 tsc dash w 하면 된다고함. "tsc -w" ts -> js 자동 변환 명령어임. 파일..

[CSS] 💍 이미지 hover 디자인 🖌️ 모음 (tistory.com)

align-items 속성은 부모 요소에서 자식 요소들을 수직으로 정렬하는 데 사용됩니다. 따라서 FilterControl이 부모 요소이며, 그 안에 있는 자식 요소인 CategoryLabel과 FilterSelect을 수직으로 중앙 정렬하는 역할을 합니다. 따라서 align-items 속성은 FilterControl에 적용됩니다. 자세한 내용은 CSS align-items를 참고하시기 바랍니다.

프로젝트를 하던 도중 의문 import React, { useState } from "react"; import ProductCard from "./ProductCard"; import ProductsFilter from "./ProductsFilter"; import styled from "styled-components"; // import page import Nav from "../MainPage/Nav"; // import Footer from "../MainPage/Footer"; const Products = (props) => { const [filtered, setFiltered] = useState(""); const filterChangeHandler = (selected) => { ..

효과적인 렌더링 관리 (useEffect): useEffect 훅을 사용하여 컴포넌트가 처음 렌더링될 때 한 번만 실행되도록 설정되어 있습니다. 상품 목록을 나타내는 src/component/organisms/ProductGrid.jsx import ProductCard from "../molecules/ProductCard"; import React, { useState, useEffect} from 'react'; import axios from 'axios'; // import fImage from "../../img/images/1.jpg"; import '../../../src/styles/organisms/ProductGrid.css' // import Loding from "../compon..