전체 > devkira (21) 리액트 08: React useState훅을 이용한 상태에 반응하는 UI표현 안녕하세요, 각성한 데브키라입니다. 이 포스팅에서는 목록과 관련된 이벤트 처리에 대해 다루며, 특히 목록의 index값의 중요성을 강조합니다. 목록에 이벤트를 적용하기 전에 각 항목에 id값을 할당하는 방법을 사용하여 이벤트 처리를 더 효율적으로 만들 수 있습니다. 이 방법을 통해 이벤트 처리 과정을 실습해 보는 내용을 다룹니다. App.jsimport logo from './logo.svg';import './App.css';import {useState} from 'react';function Header(props){ console.log(props); console.log(props.title); return( { e.preventDefault();//기본.. 리액트 07: 리스트 형태의 사용자 정의 이벤트 구현 안녕하세요, 각성한 데브키라입니다. 이 포스팅에서는 목록과 관련된 이벤트 처리에 대해 다루며, 특히 목록의 index값의 중요성을 강조합니다. 목록에 이벤트를 적용하기 전에 각 항목에 id값을 할당하는 방법을 사용하여 이벤트 처리를 더 효율적으로 만들 수 있습니다. 이 방법을 통해 이벤트 처리 과정을 실습해 보는 내용을 다룹니다. App.jsimport logo from './logo.svg';import './App.css';function Header(props){ console.log(props); console.log(props.title); return( { e.preventDefault();//기본 이벤트의 동작을 막아줌 props.onCh.. 리액트 06: 사용자 정의 이벤트 구현 안녕하세요, 각성한 데브키라입니다. 웹 개발을 하다 보면 사용자의 행동에 따라 다양한 이벤트를 처리해야 할 필요가 있습니다. 오늘은 리액트에서 사용자의 클릭 이벤트를 다루는 방법과, 이벤트에 필요한 데이터를 전달하는 방식에 대해 알아보겠습니다. [ 핵심 내용정리 ][ 주요 부분만 스크랩한 코드입니다. ]====== 변수선언 ====== const topics = [ {id:1, title:"게시글1", content:"컨텐츠1..."}, {id:2, title:"게시글2", content:"컨텐츠2..."}, ] ====== 컴포넌트를 호출 ====== { ====== 컴포넌트에서 이벤트가 발생 후 이벤트 데이터를 전달받음 ====== ...내용 .. 리액트 01: React 설치와 초기화면 출력 안녕하세요, 각성한 데브키라입니다. 오늘은 사용자 인터페이스 구축에 필수인 리액트(React) 프로젝트 시작 방법을 소개합니다. 이 글은 Node.js와 Visual Studio Code 설치에서 리액트 앱 생성까지의 전 과정을 단계별로 안내합니다. 리액트는 선언적이고 효율적인 JavaScript 라이브러리로, 복잡한 UI와 데이터의 변화가 잦은 대규모 애플리케이션을 쉽게 다룰 수 있습니다. 시작해 볼까요?[ 핵심 요약정리 ]1. VsCode에서 프로젝트 디렉터리 생성2. 디렉터리에서 터미널 명령어 실행npx create-react-app . 3. 기존 샘플에 작성된 내용제거App.js, App.css4. 로컬서버 실행명령 npm start접속 url: localhost:30001. NodeJs v20... 리액트: 입문강좌 시리즈 안녕하세요, 각성한 데브키라입니다. 리액트 입문 강좌에 오신 것을 환영합니다. 이 강좌에서는 리액트의 기본에서부터 컴포넌트 활용, 데이터 관리까지 단계별로 배우며, 동적인 웹 애플리케이션 제작 방법을 익힐 것입니다.리액트(React)는 페이스북에서 개발한 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다. 리액트의 가장 큰 특징은 '컴포넌트'라는 개념입니다. 컴포넌트는 UI를 독립적이고 재사용 가능한 조각으로 나누어 관리할 수 있게 해주며, 각 컴포넌트는 자체적인 상태와 생명주기를 가질 수 있습니다. 이를 통해 복잡한 사용자 인터페이스를 보다 쉽게 구축하고 관리할 수 있습니다. 또한, 리액트는 '단방향 데이터 흐름'을 채택하고 있습니다. 이는 데이터가 한 방향으로만.. NextJs 13: env파일을 활용한 환경변수 설정 안녕하세요, 각성한 데브키라입니다. .env 파일을 사용하면 프로젝트에서 필요한 전역 설정을 한 곳에 모아 관리할 수 있습니다. 이는 데이터베이스 정보, 도메인 경로 등의 중요한 정보들을 편리하게 관리할 수 있게 해주며, 개발 환경의 유연성을 높여주고 보안 측면에서도 중요한 역할을 합니다.1. env파일의 사용환경 변수를 .env 파일에 저장함으로써, 개발자는 개발, 테스트, 프로덕션 등 다양한 환경에 맞는 설정을 쉽게 전환할 수 있습니다. 이는 로컬 개발 환경에서 사용하는 데이터베이스 서버 주소가 프로덕션 환경에서 사용하는 주소와 다를 경우와 같이, 환경에 따른 설정의 차이를 쉽게 관리할 수 있게 해줍니다.2. gitHub업로드대부분의 경우, .env 파일은 중요한 설정 정보를 포함하고 있기 때문에 .. NextJs 12: next.js글삭제 처리 및 CRUD예제 다운로드 안녕하세요, 각성한 데브키라입니다. 글 삭제 기능이 비교적 단순하기 때문에, 별도의 모듈로 분리할 필요 없이 'Link' 태그 내에서 'onClick' 이벤트를 직접 지정하여 구현하기로 결정했습니다. 이 방식을 통해 코드의 복잡성을 줄이고, 기능의 구현을 더욱 직관적으로 만들 수 있습니다.글삭제 소스코드page.js"use client"import Link from 'next/link';import { useParams, useRouter } from 'next/navigation';export function ButtonControl() { const params = useParams(); const router = useRouter(); // 수정됨: useRouter Hook을 사용 cons.. NextJs 11: next.js글수정 useEffect 안녕하세요, 각성한 데브키라입니다. 웹 애플리케이션 개발 과정에서 사용자의 편의를 위해 글 수정 기능을 추가하는 것은 매우 중요한 과정 중 하나입니다. 이를 위해 구조적인 준비와 코드의 정확한 구현이 필수적입니다. 본 문서에서는 글 수정 기능을 추가하기 위한 폴더 구조 설정과 필수 소스코드 구현에 대해 다루고자 합니다.1. 글수정을 위해 추가된 구조"update" 폴더를 생성하고 그 안에 "[id]"라는 이름의 디렉터리를 만들었습니다. 이 "[id]" 디렉터리는 특별한 기능을 가지고 있으며, 사용자로부터 입력 받은 id 파라미터를 "page.js" 파일로 전달하는 역할을 합니다.2. 글수정 소스코드입력 필드에 문자를 입력해도 반영되지 않는 문제를 방지하려면, onChange={(e)=>setTitle(.. 이전 1 2 3 다음
