전체 글189 최신 CSS로 할 수 있는 것들 최신 CSS 문법들은 여러 가지 들을 제공합니다. 물론, 하위 버전의 지원이 어느정도 되어야 하기 때문에 fallback으로 사용하거나, can I use 사이트에서 확인 후에 사용하는 것도 좋은 방법일 것입니다. 최근에는 media query로 체크해서 실용적으로 사용할 수 있는 여러 대안들도 나왔습니다. 따라서 ecma script의 최신 문법에 babel이 존재하듯이, css도 최신 문법에 따라서 작성할 수 있는 환경을 만들어서 더 좋은 아이디어를 낼 수 있는 방법을 모색하는 것 또한, 프론트엔드 개발자의 몫입니다. :is 선택자 기존에 다음과 같이 작성하던 코드를 개선 할 수 있습니다. /* 기존 */ .main_contents h1, .main_contents h2, .main_contents .. 2022. 10. 24. ES12(ES2021)의 최고의 3가지 기능 ECMASCRIPT 2022가 나와있고, ES13에 대해서도 다루겠지만, 오늘은 ES12에서 잘 정착되어, 가장 유용하게 사용하고 있는 3가지 기능에 대해서 소개해보려고 합니다. 1. Logical Assignment Operator(논리 할당 연산자) 논리할당연산자는 논리 연산을 결합할 수 있습니다. // 컨벤션을 고수하는 방식 if (!a) { a = b; } // 또는 간략하게 a = a || b; a = a && b; a = a ?? b; // 새로운 방식 a ||= b; a &&= b; a ??= b; a &&=b 는 a가 참이면 b가 할당되고, a가 거짓이면 a가 할당됩니다. a ??= b 는 a가 null이거나 undefined 이면, b가 할당되고, 아니라면 a가 할당됩니다. 처음에는 이해.. 2022. 10. 10. Axios 인터셉터를 사용하는 4가지 방법 Axios란 무엇인가? Axios는 브라우저 및 node.js에서 Promise 기반의 HTTP 클라이언트 입니다. JSON 응답을 자동으로 감지하고 일반 텍스트 대신에 response.json()과 같은 구문 없이도 객체를 반환하고 응답 상태 코드가 400 보다 큰 경우 자동으로 오류를 발생시켜주는 등 다양한 기능들이 있습니다. Axios Interceptor란 무엇인가? Axios 인터셉터는 요청을 보내거나 받을 때마다 라이브러리가 호출하는 함수입니다. "then" 또는 "catch"로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. // request interceptors 사용 axios.interceptors.request.use((config) => { // request를 보내기 전에 사.. 2022. 10. 10. 좋은 뷸렛(Bullet) 컴포넌트 만들기 위와 같은 마크업이 있을 때 제목의 중간에 사진이 위치하게 되겠죠. 그리드를 사용해서 쉽게 만들어볼 수 있고, scss nesting을 사용해서 컴포넌트 형태로 구성해볼 수 있겠네요. 얼핏 보면 플렉스박스를 사용하여 정렬을 처리할 수 있는 것처럼 보입니다. 아이콘이 제목보다 작으면 두 개를 모두 감싸고 플렉스박스로 세로로 정렬하면 됩니다. 그러나 아이콘이 더 크면 제목과 사본 사이에 어색한 간격이 생깁니다. 운 좋게도, CSS Grid는 열과 행을 모두 직관적으로 나눌 수 있습니다. 완료 코드는 다음과 같습니다 : ) See the Pen Bulletproof Flag Component by YoungMinKim (@oinochoe) on CodePen. 출처 : https://www.jayfreesto.. 2022. 10. 3. 이전 1 2 3 4 5 6 7 ··· 48 다음
