기록저장소

[6] 카운터 앱

//App.jsx import { useState } from 'react'; import Viewer from './components/Viewer'; import Controller from './components/Controller'; import './App.css' function App() { //viewer와 controller가 형제관계이므로 부모인 app에서 useState const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); } return ( Simple counter ) } export default App//Viewer.jsx const Viewer = ({..

실습 준비하기확장프로그램 설치- ESLint : 실행전 VS Code에서 미리 오류를 보여줌- eslint 옵션 설정rules: { ... "no-unused-vars": "off", //사용하지않는 변수를 오류로 알려줌 off "react/prop-types": "off", //리액트를 더욱 안전하게 사용하도록 하는 옵션 off},  React 컴포넌트- 두가지 컴포넌트 생성 방법(+ class는 잘 사용하지 않음)function Header(){ return( HI );};const Header2 = () => { return( HI2 );}; - 화면에 렌더링하기부모컴포넌트(root컴포넌트) App, 자식컴포넌트 Header, Header2function Ap..

React.js 소개1. 컴포넌트 기반 UI 표현 2. 화면 업데이트 구현이 쉬움 (선언형 프로그래밍, 컴포넌트)3. 화면 업데이트 처리가 빠름 : Virtual DOM (가상 DOM) 이용  React App 생성Vite : 기본 설정이 적용된 React App 생성 가능//vite 설치npm create vite@latest//package정보 기반 라이브러리 설치npm i//react 실행npm run dev//http://localhost:5173 에서 실행 가능 React App 구동원리 https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard  [2024] 한입 크기로 잘라 먹는 리액트(Rea..

Node.js웹브라우저가 아닌 곳에서도  JS를 실행시킬 수 있는 실행환경(구동기)2009년 출시, 웹서버/ 모바일웹/ 데스크톱앱 등을 만들 수 있게됨 Node.js 설치하기https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org npm (node package manager) 까지 잘 설치됐는지 확인node -vnpm -v Node.js 사용하기패키지 : Node.js에서 사용하는 프로그램 단위npm initpackage.json 생성됨 //node에서 실행시키고자하는 파일을 터미널에 입력node index.js..

Truthy & Falsy1. Falsy한 값 : undefined, null, 0, -0, NaN, "", 0n2.Truthy 한 값 : 7가지 Falsy 한 값들 제외한 나머지 모든 값function printName(person) { //if(person === undefined || person === null) //복잡한 조건문대신 falsy활용 if (!person) { console.log("person의 값이 없음"); return; } console.log(person.name);}let person = { name: "이정환" };printName(person); 단락 평가function printName(person) { const name = person && ..

한입리액트 완강후 수강예정https://smore.im/form/gIl1v0ftOn 사전등록 이벤트 | 한입 크기로 잘라먹는 Next.js사전등록자 전원 50% 할인 쿠폰 제공, 30명 추첨 100% 할인 쿠폰 제공 중smore.im

VSCode  확장자 추천1. prettier : 코드 정렬2. 파일 확장자별 아이콘 설정3. 오류 안내4. 수정사항 즉시 반영  변수와 상수1. 변수let age;age = 30;2. 상수const birth = "1997.01.07";3. 변수 명명규칙(네이밍 규칙)3-1. $, _ 제외한 기호는 사용할 수 없다.let $_name;3-2. 숫자로 시작할 수 없다.let name1;let $2name;3-3. 예약어를 사용할 수 없다.let if = a; (x)let const = 1; (x)4. 변수 명명 가이드let salesCount = 1;let refundCount = 1;let totalSalesCount = salesCount - refundCount; 자료형1. 숫자형  2. 문자형  ..