@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

JSX

학습목표

React를 쓰면서 생각보다 많은 분들이 JSX에 대해선 자세히 모르는 경우가 많다. 특히나 JSX가 리액트에서만 쓴다고 생각하지만, 이런 JSX에 대한 오해를 바로 잡고 제대로 이해하기

🚀 나아가 Virtual DOM까지 알아보면서 JSX와 Virtual DOM을 통해 React가 해결하고 했던 문제가 무엇인지 이해하는 시간을 가져보자.

PreviousParcel & ESLintNextJSX

Last updated 11 months ago