@dev_jaelll
  • README.md
  • CSS
    • TailwindCSS
      • 특정 줄수에서 말줄임 처리 👉🏻 line-clamp
      • 이미지 1:1 👉🏻 aspect-square
      • 말줄임 처리 👉🏻 truncate
      • 선택된 텍스트의 스타일 처리 👉🏻 selection
      • TailwindCSS Tricks
    • <a></a> 클릭 영역 설정
    • absolute 요소 중앙정렬
    • SVG를 배경으로 사용하기
    • 텍스트 균등 정렬 👉🏻 text-align
    • absolute 요소가 클릭영역을 방해할때 👉🏻 pointer-events
    • 그라데이션 그리드 배경 구현하기
  • JAVASCRIPT
    • JSON to XLSX
    • JavaScript로 재사용 컴포넌트 만들기
    • 크롬 모바일 브라우저에서 100vh 적용하는 방법
    • ffmpeg를 이용해 포맷 변환하기
    • Proxy 객체 활용하기
    • 두 배열의 겹치는 값 찾기 👉🏻 Set
    • URL 쿼리 파라미터 객체로 변환하기 👉🏻 Object.fromEntries()
    • 무한 스크롤 텍스트 구현하기 👉🏻 requestAnimationFrame
  • REACT
    • MEGATERA
      • 프론트엔드 개발 환경
        • 개발 환경
        • TypeScript
        • React
        • Testing Library
        • Parcel & ESLint
      • JSX
        • JSX
      • React로 사고하기
        • React Component
        • React State
      • React Hooks
        • Express
        • Fetch API & CORS
        • React의 Hook
        • useRef & Custom Hook
        • usehooks-ts
      • 테스트
        • TDD
        • React Testing Library
        • MSW
        • Playwright
      • External Store
        • External Store
        • TSyringe
        • Redux 따라하기
        • usestore-ts
      • React Router
        • Routing
        • Routes
        • Router
        • Navigation
      • CSS in JS
        • Design System
        • Style Basics
        • CSS in JS
        • styled-components
        • props와 attrs
        • Global Style & Theme
    • DeviceType을 확인하는 함수
    • Wath's new in React 19
  • NEXT JS
    • Documents
      • Authentication
    • 외부 이미지 적용하기
    • 폰트 적용하기
    • Not Found Page 만들기
    • viewport에 따라 이미지 반응형 적용하기
    • 텍스트 길이에 따라 fontSize 조절하기
    • 클래스 이름을 동적으로 적용하기
    • fetchData를 병렬로 가져오기
    • 병렬 라우팅(Parallel Routes)
    • 인터셉팅 라우팅(Intercepting Routes)
    • metadata를 동적으로 적용하기
    • NextAuth 카카오 로그인
    • 이미지를 업로드하는 컴포넌트 구현하기
    • Server actions 기능 사용하기
    • Form 컴포넌트 구현하기 (+ shadcn/ui)
    • offsetWidth와 Height를 감지하는 커스텀훅 만들기 👉🏻 useDimensions
    • client side에서 캐시를 효율적으로 관리하는 방법 👉🏻 staleTimes
  • error
    • Next.js
      • hostname [hostname] is not configured under images in your next.config.js
    • TypeScript
      • Cannot find name 'require'.
    • PostgreSQL
      • Can't reach database server at `localhost`:`5432`
  • DATABASE
    • PostgreSQL
      • PostgreSQL 설치, 실행
      • pgvector
    • Prisma
      • Schema의 모든 데이터 가져오기
      • Schema 정의하기
    • Firebase
      • 컬렉션 데이터 가져오기
  • SETTINGS
    • Prisma
    • Next.js & TailwindCSS & Shadcn UI & Vercel storage
    • Next.js 14 & Langchain & Vercel SDK & ChatGPT API & TailwindCSS
    • Migrating Next.js from Create React App
  • OTHER LIBRARIES
    • GSAP
      • 마우스 이동에 따라 HTML 요소 움직이기 👉🏻 quickTo()
      • 스크롤 애니메이션 효과 구현하기 👉🏻 ScrollTrigger
    • Three.js Basics
      • Transform objects
      • Animations
      • Cameras
      • Geometries
      • Textures
      • Lights
    • React Three Fiber
    • React Markdown
      • markdown에 iframe 동영상 적용하기
    • Framer Motion
      • COMPONENTS
        • Toggles
        • Vanish Text
      • Background Image Parallax
      • useScroll
      • 스크롤 방향에 따라 움직이는 텍스트, 스크롤 강도에 따라 기울기 적용하기
      • 테두리 애니메이션 효과
  • ALGORITHM
    • 효율성
      • Two Pointers Algorithm
        • 두 배열 합치기
        • 공통원소 구하기
      • 베스트앨범 - Hash
      • 학급 회장 - Hash
      • 아나그램 - Hash
  • frontend
    • HTML 속성 vs DOM 프로퍼티
    • Provider 패턴
    • Compound 패턴
    • Command 패턴
    • Singleton 패턴
  • typescript
    • Partial 활용하기
    • Readonly
    • Polymorphic 컴포넌트를 사용한 유연한 UI 패턴 만들기
  • react native
    • Android 빌드하기
  • OS
    • Vi / Vim 명령어 정리
  • Git
    • 삭제된 브랜치 복구하기
Powered by GitBook
On this page
  1. REACT
  2. MEGATERA

CSS in JS

학습 목표

디자인 시스템에 대해 이해하고 styled-components 를 활용하여 CSS in JS 를 적용할 수 있다.

PreviousNavigationNextDesign System

Last updated 11 months ago