일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- CSS방법론
- 이펙티브타입스크립트
- framer
- JSBridge
- VS Code
- react
- 코드트리
- 시스템디자인
- JUNCTION2023
- 회고
- typescript
- Semantic Versioning
- TS
- 타입스크립트
- 캐나다개발자
- 개발자를 위한 글쓰기 가이드
- 글또 10기
- framer-motion
- Effective Typescript
- 테오의 스프린트
- React-Router-Dom
- 알고리즘
- SemVer
- 캐나다취준
- 개발자 원칙
- ASP.NET
- 글또
- Framer motion
- useState
- CSS
- Today
- Total
목록CSS (2)
큰 꿈은 파편이 크다!!⚡️
책 "클린 코드"에서는 의미 있는 이름을 지어야 하는 이유와 이름을 의미있게 짓는 방법에 대해 한 챕터에 걸쳐 설명하고 있다. 입사하거나 팀 단위 프로젝트를 할 때에도 네이밍 컨벤션을 정해서 따라야 하는 만큼, 이름을 잘 짓고 바르게 이용하는 것은 소프트웨어 개발과 협업에 있어 중요한 요소이며, CSS를 작성할 때에도 예외가 아니다. 올바른 코드 스타일을 적용하면 유지보수하기 쉬운 코드가 되며, 이는 개발 과정의 효율성을 높여준다. CSS 네이밍 방법론 중에서 가장 널리 알려진 BEM에 대해 정리하고, 이제부터 배운 내용을 적용해가며 내 기존 코드들의 CSS 네이밍을 리팩토링해보려 한다.🫡 BEM (Block, Element, Modifier) 👈 SMACSS (Scalable and Modular Ar..
Intro 🍠🍞🥕 애니메이션이 서비스를 더 재미있게 만들어주고, 더 사용하고 싶어지게 만들어준다고 생각되는 요즘, 스터디를 통해 framer-motion을 학습해보게 되었다. Framer는 interactive 디자인을 도와주는 툴인데, 그중에서 Motion은 리액트를 위한 production-ready(실제 제품 단계의) motion library를 표방하며, 오픈 소스로 공개되어 있다. 특징으로 내세우는 것 중 하나는 effortless layout transitions and gestures, 즉 transition과 gesture를 고려할 때 노력이 필요없다..!는 점이다. 사실 나는 여기까지 정리하고서도 이해가 어려웠기에 공식문서의 예제를 사용해 사용 전/후 비교용 switch 컴포넌트를 만들어..