Front-End16 css로 돌아가 업데이트(:is(),:has(),컴포넌트 반응형) css 지속적인 업데이트최근에는 Tailwind를 주로 사용하고 있지만 css기능들이 점점 업데이트 되면서 scss보다 css를 사용할지 고민이 되네요.새롭게 추 가된 기능을 소개해드릴께요. :is () 선택자 /* :is()를 사용한 예시 */:is(h1, h2, h3) { color: red;} 이렇게 하면 h1, h2, h3 태그에 모두 color: red 스타일이 적용됩니다. :is()는 선택자가 길어질 때 가독성을 높이고, 반복되는 스타일을 더 간단하게 작성할 수 있게 해줍니다. :has() 선택자:has()는 부모 요소가 특정 자식 요소를 포함할 때 스타일을 적용하는 선택자입니다. 예를 들어, 자식 요소가 있을 때 부모 요소에 스타일을 적용할 수 있습니다. 이는 "부모 요소가 자식 요소를 .. 2025. 2. 8. React 상태관리 라이브러리 - Zustand 설명 및 사용법 사내에서 새롭게 시작하는 프로젝트에서 새로운 상태관리 라이브러리를 써보자고 해서 조사하다가 도입하게된 "Zustand"에 대해서 소개 하겠습니다. Zustand- Zustand는 독일어로 "상태"라는 뜻인데 "Jotai"라는 상태 라이브러리를 만든 개발자들이 만든 상태관리 라이브러리로 알려져 있습니다. Zustand의 가장 큰 장점은 매우 쉽다는 것입니다. 보일러플레이트 코드는 거의 없고 Redux Devtools를 사용할 수 있어서 Debugging도 용이하게 할 수 있다. Zustand 사용법1. Zustand 다운로드 npm i zustand # or yarn add zustand 2. store 생성 // store.js 타입스크립트이면 store.tsximport { create } from.. 2024. 5. 14. CSS button hover/active 웹 페이지 버튼 페이지 개발 할때 특정 이벤트 발생 시킬 때 많이 사용하는것이 button 이다. button의 onclick 기능으로 button을 click 했을 때 특정 작업이 일어나도록 할 수 있는데 이런 button을 조작 할 때 같이 사용 되는 것이 hover 및 active 이다. hover button을사용자가 click하는 것 처롬 보이게 하는 효과를 넣기 위해서 주로 사용 하는데 button 위에 mouse를 올려 두면 hover 효과가 나타난다 .button { background-color : white - 처음 기본 색깔이 흰색이지만 &:hover { background-color : red - 마우스를 올려두면 빨강색으로 변함 } } active button을 사용자가 눌렀을 때.. 2024. 4. 8. 자바스크립트(JS)Math 메서드 정리2(floor, round, ceil) 더보기 Math. 메서드 설명 및 사용법 Math 메서드 정리 1에서 다룬 이외의 메서드를 추가로 정리 했습니다. 이번에는 소숫점을 처리해 주는 메서드를 모아봤습니다. 1. Math.floor() - 인수의 소수점 이하를 내림한 정수를 반환하는 메서드 입니다. 밑에 나오는 Ceil과는 반대 되는 개념입니다. 양수인 경우, 소수점 이하를 떼어 버린 다음 정수를 반환한다. 음수인 경우, 소수점 이하를 떼어 버린 다음 -1을 한 정수를 반환한다. ex) Math.floor(2.1); // 1 Math.floor(9.1); // 9 Math.floor(-1.9); // -2 Math.floor(-3.9); // -4 1. Math.ceil() - 인수의 소수점 이하를 올림한 정수를 반환 한다. ex) Math... 2023. 7. 31. 자바스크립트(JS)Math 메서드 정리1(abs, min, max) Math. 메서드 설명 및 사용법 Math는 주로 수학적 계산에 많이 사용 하는데 저는 주로 알고리즘 문제를 풀때 많이 사용을 하고 있습니다. 매번 문제를 풀때마다 검색해서 찾아서 쓰고 해서 이번 기회에 정리를 한번 할려고 글을 적었습니다. 1. Math.abs() - Math.abs()는 숫자의 절대값을 구해주는 메서드 입니다. ex) console.log(Math.abs(-3)) //3 let Number = 3 - 10 Math.abs(Number) // 7 2.Math.min() - Math.min()는 숫자들 중 최솟값을 구해주는 메서드 입니다. ex) Math.min(3,11,7) // 3 let Number1 = 10 let Number2 = 7 Math.min(Number1,Number2).. 2023. 7. 27. [Next.js] SSG(Static Site Generation)과 ISR 설명 및 사용법 -프론트엔드개발 SSG 개념 - SSG는 NEXT에서 브라우저를 렌더링 할 때 기본적으로 pre-rendering(사전 렌더링)을 한다고 하는데 기본적으로 NEXT에 default로 설정 되어 있다. pre-rendering이란 각 페이지들을 사전에 미리 HTML문서를 생성하는 것이다. NEXT에서 SSG로 pre-rendering을 하면 빌드 타임 때 해당 페이지 별로 각각의 HTML 문서를 미리 생성해서 클라이언트 요청이 들어올 때 해당하는 페이지를 반환해주는 형태로 동작한다. 위의 방식대로 미리 생성해 두었기 때문에 로딩 시간이 빠르다. 그리고 또 하나의 장점이 더 있는데 바로 효율적인 캐싱이다. 효율적인 캐싱이 뭐냐면 예를 들어, 클라이언트에서 블로그 게시글을 요청했다고 가정하고 유저가 게시글 내용을 백번 눌러도.. 2023. 7. 11. 이전 1 2 3 다음
