커밋 메시지 가이드

✅ Udacity Git Commit Message Style Guidefeat : 새로운 기능 추가fix : 버그 수정docs : 문서의 수정style : (코드의 수정 없이) 스타일(style)만 변경 (들여쓰기, 같은 포맷이나 세미콜론을 빼먹은 경우)refactor : 코드 리팩토링test : Test 관련한 코드의 추가, 수정chore : (코드의 수정 없이) 설정을 변경출처 : Udacity Git Commit Message Style Guide✅ 확장된 커밋 메시지 타입 가이드feat: 새로운 기능 추가fix: 버그 수정docs: 문서 수정style: 코드 스타일 변경 (코드 포매팅, 세미콜론 누락 등)design: 사용자 UI 디자인 변경 (CSS 등)test: 테스트 코드, 리팩토링 (Te..

• format_list_bulleted 기타
• · 2025. 7. 6.
• textsms

Next js useRef 이용해 아코디언 애니메이션 구현

🎯 목표아코디언이 스르륵 열리는 애니메이션을 구현해보겠습니다. 현재 액티브 클래스 유무에 따라 display : none, block을 CSS로 제어하고 있으나, 트랜지션이 적용되고 있지 않습니다. 그 이유는 css의 트랜지션은 고정적인 값 예 ) em, px등 에 반응하기 때문입니다.자바스크립트 기능을 이용해 scrollHeight값을 계산해 할당함으로써 이를 구현할 수 있습니다. 현재 환경인 리액트에서는 useRef라는 문법을 사용해 구현합니다.📃진행 순서useRef란?아코디언 적용💻useRef란?저장공간, 주로 DOM에 접근하기 위해 사용되는 React Hook입니다.자바스크립트에서 querySelector 메서드를 사용하듯 React에서 DOM을 직접 선택해야 하는 상황에 사용할 수 있습니다..

• format_list_bulleted react
• · 2025. 5. 12.
• textsms

Next js 페이지 공통 타이틀 출력

✅ Props별 스타일 적용이번 시간에는 페이지 대표 타이틀을 컴포넌트로 생성해 동적으로 출력해보겠습니다.Title은 props 전달 값에 따라 다른 CSS를 적용할 수 있도록 만들었습니다.아래와 같이 스타일 컴포넌트 요소로 스타일을 먼저 선언해주었습니다.// Title.jsconst TitleWrap = styled.div` margin-bottom: 8px;`const MainTitle = ` font-size: 32px; font-weight: 700;`;const SubTitle = ` font-size: 24px; font-weight: 500;`; 컴포넌트는 기본적으로 Wrapper와 함께 출력되며, className값으로 선언되었던 CSS를 매개변수로써 받습니다. ..

• format_list_bulleted react
• · 2025. 4. 24.
• textsms

Variable Font, 너 뭔데!?!?

Variable Font(가변 폰트)Variable fonts(가변폰트)란 이름 그대로 다양한 디자인의 변형을 저장하고 사용할 수 있게 해주는 글꼴 포맷입니다.그말은 즉 이를 활용하면 우리가 평소에 익숙한 thin, light, regular 등 폰트의 두께 별로 하나씩 저장할 필요없이CSS 속성만으로 다양한 글꼴의 두께 및 스타일이 적용이 가능합니다!🎯가변 폰트의 장점파일 크기 절약, 로딩 속도 이점특수한 값의 font-weight 설정 가능💻 코드 예시자 이제 실제로 활용을 해보도록 하지 variable 폰트를 다운로드 받았다면기존에 폰트를 적용했던 것처럼 src 값으로 연결해주고~ font-weight 저 부분이 핵심입니다저게 앞은 폰트 weight 최솟값, 뒤는 최대값으로 45~920까지의 ..

• format_list_bulleted design system
• · 2025. 4. 15.
• textsms