728x90 TECH49 use server와 use client 📡 React (특히 Next.js 13 이후 버전이나 React Server Components 환경)에서 사용하는 use client와 use server는 컴포넌트가 실행될 위치 (브라우저 vs 서버)를 명시하기 위한 지시자를 말한다. use client클라이언트 컴포넌트 선언브라우저에서 실행되어야 함을 명시하는 지시어React 18부터 도입된 Server Components에서는 기본적으로 모든 컴포넌트가 서버에서 렌더링되는데 이때, use client가 있어야 브라우저 전용 기능들을 사용할 수 있다. 사용 시점useState, useEffect, useRef 같은 React Hook을 쓰는 경우window, document, localStorage등 브라우저 API를 쓰는 경우사용자 인터렉션이 필.. 2025. 8. 14. all: inherit; 속성 🤰🏻 해당 요소의 모든 css 속성을 부모 요소로부터 상속받게 하는 역할을 한다.상속받는 속성은 다음과 같다.bordermargin, paddingcolor, font, line-heightbackgroundbox-shadow이외에도 거의 모든 속성 예를 들어, 부모 속성에 border: 1px solid red; box-shadow: box-shadow: 10px 5px 5px red; 라는 속성이 있다면 자식은 border와 box-shadow 모두 속성을 상속받아 자연스레 동일하게 적용된다. 자식 요소에서 사용하고 싶지 않을 때에는 상속받은 특정 속성을 명시적으로 초기화시키면 된다.border: none;box-shadow: none; 오랜만에 접하게 되면 "이게 뭐지" 싶다.되짚음 용으로 끄적여봤다. .. 2025. 8. 12. CSS 애니메이션 🙀 css 애니메이션은 2007년 애플이 처음 웹에 도입한 이후 많은 발전을 해왔다.그런데 조금만 복잡한 애니메이션을 구현하려면 서드파티 라이브러리나 방대한 자바스크립트 코드가 필요하다.그러나, 이제는 css만으로 스크롤 애니메이션을 만들 수 있다는 소식을 조금 늦게 가져와 봤다 ‼️ 스크롤 기반 애니메이션은 세 가지 요소로 구성된다.target: 애니메이션을 적용할 페이지 내의 대상keyframes: 사용자가 스크롤할 때 일어나는 변화timeline: 애니메이션이 일어나는 결정 기준 타임라인2023년 6월에 도입이 되었다. 스크롤 기반 애니메이션에서는 ‘시간’을 사용하지 않고, 타임라인의 유형인 scroll과 view를 이용해 구현한다. scroll()사용자의 스크롤에 따라 애니메이션이 진행된다.사용자가 .. 2025. 7. 31. 개발하면서... 느끼는 부분 정리 👩🏻💻 개발을 하면서 내가 느끼는 것 / 타인으로부터 느끼는 것이 있다.처음에는 무조건 정해진 일정에 기능만 잘 동작하면 된다고 믿었고, 그 시절에는 그것밖에 보이지 않았다.그것만 하기에도 벅찼으니까. 그런데 한 프로젝트를 5년 이상 자리를 지키다보니 내가 작성한 코드인데도 여기저기 사용하기도 하고, 기능이 뭔지 많은 시간들 들여 파악하기도 하고 하면서 어떻게 하면 이런 시간들을 좀 더 줄여볼까 고민을 하게 되었다. 지향할 것들 🤙🏻중복되는 부분은 반드시 파일로 분리 (getter / setter)2번 이상 다른 파일에서 사용한다면 utils 등의 폴더 및 파일로 분리하기예) userInfo에서 chidlname, name 부분같은 사소한 부분이어도 분리하기const getChildName = (childI.. 2025. 7. 17. 이전 1 2 3 4 5 6 7 ··· 13 다음 728x90
