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의 기본을 배워봅니다. 1. html - 이미지, 링크 태그, 폼HTML의 기본 태그를 학습합니다. 이는 웹 페이지에서 이미지를 삽입하고, 링크를 설정하며, 폼을 생성하는 데 사용됩니다.- 코드 예제  예제 링크 이름: 이메일: 메시지: 제출  2. css 1 -  backgroundCSS를 사용하여 배경 스타일을 설정하는 방법을 학습합니다. 배경 이미지, 색상, 패턴..

JavaScript의 배열 메서드 map, filter, forEach는 코딩 초보자가 반드시 알아야 할 기본 개념이다.이 글에서 각 메서드의 개념, 특징, 차이점을 설명하고, 실전에서 어떻게 활용할 수 있는지 정리해보겠다. 🥳 1. 배열 메서드란 무엇인가?JavaScript에서 배열은 데이터를 여러 개 모아놓은 상자와 같다.배열에는 숫자, 문자, 객체 등 다양한 데이터가 들어갈 수 있으며,배열 메서드는 이 데이터를 더 쉽게 가공하고 조작하기 위한 도구라고 보면 된다. 오늘 다룰 map, filter, forEach는 배열을 반복해서 사용하거나, 데이터를 변환할 때 매우 유용하다. 근데, 배열이 뭔데? 🤷‍♀️ (1) 배열의 필요성 1. 여러 데이터를 관리하기 위한 효율적인 방법이다. • 같은 종류의..

[1121 배운 내용 복습]  1. 변수명 정하는 규칙 • 단수/복수 규칙: • 단수형: 하나의 값만 저장할 때 사용.const input = document.querySelector('input'); // 하나의 입력 요소를 가리킴  • 복수형: 여러 값을 저장하거나 배열로 관리할 때 객체명 뒤에 s를 붙이는 것이 관례.const inputs = document.querySelectorAll('input'); // 여러 입력 요소를 가리킴 • 이유: 변수명을 보고 데이터의 형태를 직관적으로 이해할 수 있음. 2. 배열의 특징과 사용법 • 배열은 순서가 있는 데이터의 집합을 관리한다. • 배열의 첫 번째 요소는 [0]으로 접근.const inputs = document.querySelectorAll('i..

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

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8/news/599398?gad_source=1&gclid=Cj0KCQiA0fu5BhDQARIsAMXUBOKF6M_TZWDPD5rXqcJ8InuvgLQErrQ5vqo8QivrqvcP0i3zHtYMdyAaAntNEALw_wcB 따라하며 배우는 리액트 A-Z[19버전 반영] 강의 | John Ahn - 인프런John Ahn | 이 강의를 통해 리액트 기초부터 중급까지 배우게 됩니다. 하나의 강의로 개념도 익히고 실습도 하며, 리액트를 위해 필요한 대부분의 지식을 한번에 습득할 수 있도록 만들었습니다.,www.inflearn.com https..

공부해볼 코드 01 1. 정답 단어 입력기 • 페이지 상단에 “정답 단어 적기”라는 제목과 함께 입력 필드가 표시됩니다. • 사용자가 단어를 입력하면 입력된 값이 WordGame 컴포넌트에 전달됩니다. • WordGame 컴포넌트는 사용자가 입력한 단어를 활용할 수 있도록 설계되었습니다. (이 부분은 추가 구현이 필요할 수 있습니다.) 2. 색상 선택 드롭다운 • “Pick Color”라는 제목 아래에 색상을 선택할 수 있는 드롭다운 메뉴가 표시됩니다. • 현재는 기능이 구현되지 않았지만, 선택한 색상에 따라 페이지의 배경색을 변경하도록 확장할 수 있습니다. 3. 실시간 시계 • Clock 컴포넌트가 현재 시간을 표시합니다. • 이 시계는 매초마다 업데이트되며, 사용자의 로컬 시간(예: HH:MM:SS)..

[javascript] 실습 과제 01! 1. 텍스트 필드에 값을 입력. 2. “제출” 버튼 클릭. 3. 아래에 당신이 입력한 text는 "입력된 값" 입니다. 출력.만들기  사용한 코드는 주석 추가해놓았당 텍스트 입력 실습 제출하기

JavaScript와 React, 기초 개념 정리 1. JavaScript와 React • React는 JavaScript로 만들어진 특화된 도구• React는 웹 앱 개발을 위한 라이브러리로, 상위 개념의 프레임워크가 아님.• React를 사용하려면 JavaScript 이해가 필수.• JavaScript 없이 React는 동작하지 않음.• 바닐라 자바스크립트(Vanilla JavaScript)란?• 프레임워크나 라이브러리를 사용하지 않은 순수 JavaScript.• DOM 조작, 이벤트 처리 등 모든 작업을 JavaScript 코드로 작성. 2. 변수(Variable)란? • 정의: 변수를 사용하면 데이터를 저장하고 재사용할 수 있음.• 예: 이름, 숫자, 계산 결과 등을 저장.• 왜 필요한가?• 동일..

Nodemon은 파일을 수정할 때마다 자동으로 서버를 재시작해주는 도구다. 1. Nodemon 글로벌 설치sudo npm install -g nodemon 2. 글로벌 권한 문제 해결 (필요 시)  1. 새로운 글로벌 경로 생성:mkdir -p ~/.npm-globalnpm config set prefix '~/.npm-global'  2. 경로 환경변수 추가:echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrcsource ~/.zshrc  3. 경로 확인:echo $PATH   4. Nodemon 다시 설치:npm install -g nodemon 3. Nodemon 사용  1. 터미널에서 실행 & 자동반영nodemon 파일이름.js • 파일 수정 시마다 서..