coalacoding 텍스트 애니메이션 SplitText — 글자 분해 등장 GSAP SplitText.create()를 사용해서 h1 제목 텍스트를 글자 단위로 분해하고, 각 글자가 아래에서 위로 순차적으로 페이드인하는 애니메이션을 만들어줘. stagger 0.03초, ease는 power3.out으로 설정하고, 애니메이션 완료 후 revert()로 DOM을 복구해줘. React + @gsap/react의 useGSAP 훅을 사용해서 SplitText.create()로 h1 제목 텍스트를 글자 단위로 분해하고, 각 글자가 아래에서 위로 순차적으로 페이드인하는 컴포넌트를 … 더 읽기
1. 기초영상 2. 심화영상 3. Composition? (컴포지션?) Nested Component 컴포넌트 라고도 하고 중첩 컴포넌트라고도 합니다. 컴포넌트를 중첩하는 것을 말합니다. 리액트 앱은 수많은 컴포넌트를 가지게 됩니다. 컴포넌트간의 주고받는 데이터 뿐만 아니라 박스나 컨테이너에서 사용하는 스타일코드의 중복까지도 최소화 하려면 props 만으로는 한계가 있는데요. 이때 사용할수 있는것이 composition(합성) 입니다. 앱에서 반복 사용되는 UI 디자인 코드를 별도의 컴포넌트로 생성하여 … 더 읽기
1.리액트소개 1.1.리액트란? JavaScript 라이브러리 UI(사용자 인터페이스)를 만들기 위해 Facebook에서 개발. 페이스북과 개발자,기업,단체에 의해 유지보수됨. 리액트는 싱글 페이지 애플리케이션 이나 모바일 애플리케이션 개발에 사용되기도 함. 1.2.리액트의 특징 JSX (javascript extension)라는 자바스크립트 확장문법을 사용한다. 웹브라우저에서는 바로 JSX를 해석할수 없으며 바벨이라는 트랜스컴파일러를 이용해서 자바스크립트로 변환후 웹 브라우저에 적용한다.• https://babeljs.io/repl 에서 변환되는 과정을 볼수있다 SPA (Single Page Application) 이다. 모바일애플리케이션을 개발할 … 더 읽기
1. 리액트 props 1.1. 데이터의 동적출력 리액트에서 컴포넌트를 생성하는 문법을 JSX(JavaScript XML: Javascript에 XML을 추가한 확장한 문법) 라고 합니다. jsx 에는 {} 기호 안에 자바스크립트 를 작성하면 자바스크립트 코드를 실행할수 있습니다. MemberItem 컴포넌트에서 사용하고 있는 데이터를 자바스크립트의 표현식으로 변경하여 작성해보겠습니다 1.1.1. 작성 components/MemberItem.js 를 수정합니다. //MemberItem.js import "./MemberItem.css"; const MemberItem = () => { const member = … 더 읽기
1. 리액트컴포넌트 1.1. 리액트 앱 구조 1.1.1. 이미지 리소스 주소 수업에 사용할 이미지 파일의 주소 입니다. http://qwerew.cafe24.com/images/pet-1.jpg http://qwerew.cafe24.com/images/pet-2.jpg http://qwerew.cafe24.com/images/pet-3.jpg http://qwerew.cafe24.com/images/pet-4.jpg http://qwerew.cafe24.com/images/pet-5.jpg http://qwerew.cafe24.com/images/pet-6.jpg http://qwerew.cafe24.com/images/pet-7.jpg http://qwerew.cafe24.com/images/pet-8.jpg 1.1.2. 리액트 앱의 폴더 구성 리액트 앱의 폴더와 파일의 구성과 역할을 알아봅시다. react-test/ |-**node_modules**/ # 의존성 파일을 담은 폴더 |- **src**/ |- **App.js** # 최상위 컴포넌트 |- **index.js** # 앱 진입점 … 더 읽기
1. React를 라이브러리로 설치 1.1.Vite 아래의 링크에서부터 시작한다. npm install npm run dev 2. React를 프레임워크로 설치 Next.jsRemixGatsbyExpo (for native apps)Bleeding-edge React frameworksNext.js (App Router) 리액트 프로젝트 생성 시 앱 네이밍 규칙은 다음과 같다. 3. 프로젝트명 규칙 4. 코칭프롬프 vite로 현재 폴더에 React 프로젝트를 생성해줘. 상태관리 라이브러리 없이, 타입스크립트도 사용하지 않고, 자바스크립트 기반의 최소 설정으로 … 더 읽기
1. Props (속성) 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법. 1.1. Props의 개념 Props는 Properties(속성)의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용하는 방법이다. None: 컴포넌트를 함수라고 생각하면, Props는 그 함수에 전달하는 매개변수(파라미터)다. // 일반 자바스크립트 함수 function greet(name) { // name은 매개변수 return `안녕, ${name}!`; } greet(“철수”); // “철수”는 인자 // React 컴포넌트 … 더 읽기
1. Inline Style — 태그 안에 직접 쓰기 1.1 개념 HTML에서 style=”color:red” 처럼 태그 안에 스타일을 직접 쓰는 방식이다. 리액트에서는 문자열이 아닌 객체 형태로 작성한다. 왜 객체로 써야 하나요? 리액트는 JavaScript를 기반으로 동작한다. JSX 안에서 스타일을 표현할 때는 JS 문법을 따르기 때문에, background-color 처럼 하이픈(-)이 들어간 속성은 backgroundColor 처럼 카멜케이스 로 바꿔서 써야 한다. 1.2 … 더 읽기
1. useContext로 전역 상태 관리 1.1. Context가 필요한 이유 리액트에서 데이터는 보통 부모 → 자식 방향으로 Props를 통해 전달한다. 그런데 컴포넌트가 깊게 중첩되어 있으면, 중간에 있는 컴포넌트들이 직접 쓰지도 않는 데이터를 계속 받아서 아래로 넘겨줘야 한다. 이 문제를 Prop Drilling(프롭 드릴링) 이라고 한다. Context를 사용하면 중간 컴포넌트를 거치지 않고, 필요한 컴포넌트가 직접 데이터를 꺼내 쓸 … 더 읽기
