| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
- redux-toolkit
- 알고리즘
- next
- Challenge
- 폼
- Collapse
- eslint
- array
- 직업군 추천하기
- form
- javscript
- Weekly
- component
- 리액트
- programmers
- Weekly Challenge
- React
- Javasript
- level1
- javascript
- split
- 상호 평가
- nextjs
- js
- algorithm
- Prettier
- MaterialUI
- solution
- From
- HTML
- Today
- Total
목록Collapse (2)
기록
React Antd CollapseForm 검색 컴포넌트(1)
서론 antd를 이용한 form 컴포넌트 제작. FormItem 하나하나씩 나누어서 만들기. 사용 패키지 yarn add antd @ant-design/icons styled-components yarn add -D @typs/styled-components yarn add -D craco-antd @craco/craco yarn add moment 폴더구조 Craco 이용 antd 테마 커스텀 package.json 에서 start 스크립트를 craco start로 변경해준다. /craco.config.js module.exports = { plugins: [ { plugin: require("craco-antd"), options: { customizeTheme: { "@primary-color": ..
Simple Collapse
소스코드 import { useState } from 'react'; import styled from 'styled-components'; const StyledCollapse = styled.div` .content{ background: blue; color: white; max-height: 0; bottom: 0; overflow: hidden; -webkit-transition: max-height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); transition: max-height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .content.on { max-height: 500px; -webkit-transition: max-h..