React 4

[UX ESSAY 002] Micro Interaction: Skeleton Component, 기다림 속의 약속

기다림은 디지털 경험에서 흔히 마주치는 순간이다. 웹 페이지가 로드되기를 기다리고, 양식 처리가 완료되기를 기다리고, 데이터가 동기화되기를 기다리는 일이 누구에게나 일어난다. 이런 기다림의 순간은 종종 공허하고 불편하게 느껴지지만, 그것이 반드시 불가피한 고통일 필요는 없다. 나는 예전에 한 웹 페이지를 로드하는 동안 텅 빈 화면과 끝없이 회전하는 로딩 스피너만 바라보던 적이 있다. 몇 초의 짧은 시간이었지만 무척 길게 느껴졌고, 나의 시간이 존중받지 못하고 있다는 생각마저 들었다. 이 경험은 나에게 한 가지 질문을 남겼다. 디자이너로서 이런 기다림의 순간을 어떻게 더 나은 경험으로 만들 수 있을까? 그 답 중 하나가 바로 Skeleton Component다.A skeleton component is a..

[React] TODO 앱을 만들며 배우는 CRUD

React를 이용해 TODO앱을 만들어봅니다. 이를 통해 CRUD(Create / Read / Update / Delete) 기능이 작동되는 방식을 알 수 있습니다. 자신이 만든 앱을 공유하고 피드백을 기반으로 앱을 업그레이드하는 것을 포함합니다.  import { useState } from "react";import "./App.css";const initialTodos = [ { id: 1, text: "운동가기", completed: false, dueDate: "2024-11-28" }, { id: 2, text: "미션 완료하기", completed: true, dueDate: "2024-11-29" }, { id: 3, text: "리액트 과제", completed: false, due..

[React 프레임워크를 알기 위한 사전 지식] HTML, CSS, JavaScript의 기본

디자이너를 위한 코딩 이론을 학습하고 이해합니다.React 프레임워크를 알기 위한 사전 지식 HTML, CSS, JavaScript의 기본을 배워봅니다. 1. html - 이미지, 링크 태그, 폼HTML의 기본 태그를 학습합니다. 이는 웹 페이지에서 이미지를 삽입하고, 링크를 설정하며, 폼을 생성하는 데 사용됩니다.- 코드 예제  예제 링크 이름: 이메일: 메시지: 제출  2. css 1 -  backgroundCSS를 사용하여 배경 스타일을 설정하는 방법을 학습합니다. 배경 이미지, 색상, 패턴..

[React] 이론 실습

react 응용 공부목적: React 프레임워크에 대해 알아보고 중요한 상태 관리에 대해 학습사용툴: JSX, React, Coding 응용 순서 🦧리액트 앱 만들기, 리액트 앱의 동작 원리리액트(React) 앱을 만드는 방법과 리액트의 동작 원리를 학습합니다. 먼저, 리액트 프로젝트를 생성하고 구조를 이해합니다.컴포넌트, JSX, 컴포넌트에 값 전달하기리액트의 기본 구성 요소인 컴포넌트(Component)와 JSX의 개념을 이해합니다. 또한, 컴포넌트 간에 값을 전달하는 방법을 학습합니다.이벤트 처리하기리액트에서 이벤트를 처리하는 방법을 학습합니다. 버튼 클릭, 폼 제출 등과 같은 사용자 인터랙션을 처리합니다.컴포넌트와 상태 이해하기리액트 컴포넌트의 상태(State)와 이를 관리하는 방법을 이해합니다..

728x90