해본거 정리할라고 해본거 정리할라고

ShortId 랜덤한 id를 자동으로 생성해준다. npm i shortid // 사용시 id: shortId.generate() Faker 데이터를 자동으로 생성해준다. npm i @faker-js/faker npm i @faker-js/faker npm i @faker-js/faker https://www.npmjs.com/package/@faker-js/faker?activeTab=code @faker-js/faker Generate massive amounts of fake contextual data. Latest version: 7.6.0, last published: 6 months ago. Start using @faker-js/faker in your project by running `n..

eslint 중에서도 악명높은 airbnb 규칙을 설정해보자. npm i -D babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react-hooks babel-eslint: Babel과 함께 사용되는 Eslint 구문 분석기입니다. JavaScript 코드를 트랜스파일링 하기 전에 Linting 검사를 실행할 수 있습니다. eslint-config-airbnb: Airbnb 스타일 가이드를 따르는 Eslint 구성 파일입니다. 이 구성 파일은 Airbnb에서 사용하는 코드 스타일을 따르며, 코드 품질을 향상시키기 위한 권장 사항과 규칙을 포함합니다. eslint-plugin-import: Eslint에서 모듈 import 및 ex..

놀러왔음~ #나들이 #여행 이런 내용이 있을 때 #나들이, #여행 을 각각 이동가능한 해시태그로 바꾸어주려면 어떻게 하면 될까?? 아래 코드를 참고하자. const PostCardContent = ({ postData }) => ( {postData.split(/(#[^\s#]+)/g).map((v, i) => { if (v.match(/(#[^\s#]+)/g)) { return ( {v} ) } return v })} ) 여기서 postData 파라미터가 '놀러왔음~ #나들이 #여행'

컴포넌트의 자식 태그까지 컴포넌트로 만들기 버거울 때 만약 라는 태그 안에 이 들어있는데, 이런 사소한 태그들까지 컴포넌트로 만들기 버거울 때가 있다. 이럴 때는 '&'를 사용해서 자식 태그에 스타일을 이어서 줄 수 있다. const Header = styled.header` height: 44px; background: white; position: relative; padding: 0; text-align: center; & h1 { margin: 0; font-size: 17px; color: #333; line-height: 44px; } 다양한 선택자도 사용 가능하다 & > h1 { ... } 라이브러리에서 제공하는 컴포넌트에 스타일 주고싶을 때 styled.div`` 이 형태가 아니라 styl..

react-slick npm i react-slick initialSlide 몇번째부터 시작할건지 afterChange 슬라이드할 때 숫자를 저장 infinite 무한반복 arrow 화살표 보이기/숨기기 slidesToShow 몇개씩 보여줄 지 slidesToScroll 몇개씩 넘길 지 등등...

PropTypes.shape로 감싼뒤 괄호() 안에 키값의 타입을 정의해준다. PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, content: PropTypes.string, createdAt:PropTypes.object, Comments: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object) }).isRequired }

const PostForm = () => { const imageInput = useRef(); const onClickImageUpload = useCallback(() => { imageInput.current.click() }, [imageInput.current]) return ( 이미지 업로드 ) }