LIBRARY (4) 썸네일형 리스트형 2. Breakpoints 프론트 작업할 때마다 헷갈려서 정리해보려 한다. 1. 초기값 MUI 공식 문서에는 다음과 같이 정리되어있다. xs, extra-small : 0px sm, small : 600px md, medium : 900px lg, large : 1200px xl, extra-large : 1536px 2. 사용법 {...children} 위 예시는 다음과 같다. 0px to 599px - flexDirection : 'column' 600ox and up - flexDirection: 'row' 이걸 media query로 바꾸면 @media (min-width: 0px) and (max-width: 599px) – flexDirection: ‘column’ @media (min-width: 600px) – fl.. 1. Typography 컴포넌트 Typography 기본적인 HTML 로 마크업을 할 때는 , 와 같은 태그를 사용해야했다. MUI에서는 이걸 라는 하나의 컴포넌트를 사용해서 자유롭게 사용할 수 있도록 만들었다. variant & component prop variant prop : 텍스트 크기 조절 및 HTML 태그 결정 component prop : variant prop 과 상이한 HTML 태그를 사용해야 할 때는 component prop으로 태그명을 명시해주면 됨. ex) 텍스트의 크기는 h6로 하고 싶은데, HTML 태그를 div 로 써야 하는 경우 Alerter tailwind-styled-components ✅ 왜 쓰게 되었는가 tailwind-css 를 배우고 적용시키는 공부를 하던 중, tailwind를 쓰기 전 styled-components 를 쓸 땐 몰랐던 단점을 알게 되었다. Home Prologue Wines MyPage Log in Resister 😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶😶 ❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔❔ 지저분하다. 정말.. 따로 css 와 분리하지 않고 바로 적용할 수 있다는게 tailwind의 장점이긴한데.. 이건 좀 아니지않나싶다. 그래서 찾은게 tailwind-styled-components 이다. ⛏ 설치하는 방법 Using npm npm i -D tailwind-styled-components Using yarn yarn add -D tailwi.. 1. AXIOS AXIOS 란? Axios 는 브라우저, Node.js 를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 백엔드랑 프론트엔드 간의 원활한 통신을 위해 Ajax와 더불어 사용한다. 이미 JS 에는 fetch api 가 있지만, 프레임워크에서 ajax 를 구현할 땐 axios 를 쓰는 편이다. axios의 특징 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js 의 http api 사용 Promise API 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 HTTP 요청과 응답을 JSON 형태로 자동 변경 axios fetch 써드파티 라이브러리로 설치가 필요 현대 브라우저에 빌트인이라 설치 필요 없음 XSRF를 보호 해줌 별도 보호 X data 속.. 이전 1 다음
