요르딩딩

8.1) 프로젝트 소개 및 준비 8.2) UI 구현하기 # Appimport "./App.css";import Header from "./components/Header";import Editor from "./components/Editor";import List from "./components/List";function App() { return ( );}export default App;.App { width: 500px; margin: 0 auto; display: flex; // 자식요소의 배치를 유연하게 해줌 flex-direction: column; // 열 기준 세로로 배치해줌 gap: 10px; // 간격} # Headerim..

7.1) 라이프사이클이란?  7.2) useEffect 사용하기 import "./App.css";import Viewer from "./components/Viewer";import Controller from "./components/Controller";import { useState } from "react";function App() { const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); }; return ( Simple Counter );}export defaul..

6.1) 프로젝트 소개 및 준비 6.2) UI 구현하기import "./App.css";import Viewer from "./components/Viewer";import Controller from "./components/Controller";import { useState } from "react";function App() { return ( Simple Counter );}export default App;const Viewer = () => { return ( 현재 카운트 : 0 );};export default Viewer;const Controller = ..

섹션5. React.js 개론// 리액트앱 생성.npm create vite@latest // package.json의 dependencies들 설치.npm i // 실행npm run dev// eslint 확장 프로그램 설치// 작성한 코드를 정적으로 검토하여 미리 오류로 띄워줌.eslinttrc.cjs > "no-unused-vars" : "off", (미사용변수 오류처리 안되도록.).eslinttrc.cjs > "react[prop-types" : "off" (안전하게 사용할수 있도록 해주지만 실습시 불필요) 5.2) React 컴포넌트 // App.jsxApp Component : HTML 태그를 반환하는 함수 (함수 컴포넌트)// 컴포넌트 생성 방법// 첫글자는 대문자!!!1. function ..

5.1) 실습 준비하기   4.2) 첫 React App 생성하기  4.3) React App 구동원리 살펴보기 npm ipublic폴더 : 이미지, 스타일 등등 정적파일 존재src폴더 : jsx 리액트코드용 확장자assets에도 정적파일 보관 가능eslintrc.cjs : 코드 스타일?index.html : 나중에 App.jsx > main.jsx > index.htmlApp.tsx > index.tsx > index.html???

3.1) Node.js를 소개합니다- 자바스크립트를 범용적으로 개발에 사용하기 위해 Node.js가 개발됨. - 기존에는 웹브라우저에서만 개발되었다가 -> Node.js 덕에 웹서버/모바일 앱/ 데스크톱 앱에서도 개발할 수 있게됨. 3.2) Node.js 설치하기- 설치확인 : cmd 창 > node -v / npm -v 입력 3.3) Node.js 사용하기[package.json]{ "name": "section03", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node src/ind..

2.1) Truthy와 Falsy // 1. Falsy한 값let f1 = undefined;let f2 = null;let f3 = 0;let f4 = -0;let f5 = NaN;let f6 = "";let f7 = 0n;// 2. Truthy 한 값// -> 7가지 Falsy 한 값들 제외한 나머지 모든 값let t1 = "hello";let t2 = 123;let t3 = [];let t4 = {};let t5 = () => {};// 3. 활용 사례function printName(person) { if (!person) { console.log("person의 값이 없음"); return; } console.log(person.name);}let person = { name: ..

# 1.5 자료형 // 1. Number Typelet num1 = 27;let num2 = 1.5;let num3 = -20;let inf = Infinity;let mInf = -Infinity;let nan = NaN;// 2. String Typelet myName = "이정환";let myLocation = "목동";let introduce = myName + myLocation;let introduceText = `${myName}은 ${myLocation}에 거주합니다`; // 백틱// 3. Boolean Typelet isSwitchOn = true;let isEmpty = false;// 4. Null Type (아무것도 없다)let empty = null;// 5. Undefined T..