import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); reportWebVitals();
자바스크립트 안에 내장되어있는 오브젝트 비동기적인 것을 수행 할 때 콜백 대신 유용하게 사용 state 상태 pending-> fulfilled or rejected producer producer 프로미스는 클래스 새로운 프로미스가 만들어질 때 전달한 excutor 바로 실행됨 const promise = new Promise((resolve, reject) => { setTimeout(() => { resolve('bomi'); },2000); }); resolve 기능을 정상적으로 수행해서 마지막으로 최종데이터를 전달 reject 기능을 수행하다 중간에 문제가 생기면 호출 consumer: then, catch, finally finally 성공과 실패를 떠나 무조건 호출 됨 promise.then..
interface User{ name:string; age:number; gender?: string; readonly birthYear: number; } let user : User ={ name:"xx", age:28, birthYear:1990, //처음 생성만 되고 변경은 불가 readonly라서 } optional 뒤에 ? 붙이면 됨 입력해도되고 안해도 되고 ~ interface User{ name:string; age:number; gender?: string; readonly birthYear: number; [grade:number] : string; // 여러가지 입력하고싶을때 optional기능까지 함께 } let user : User ={ name:"xx", age:28, birth..
타입추론 let age:number = 30; let isAdult:boolean = true ; let a:number[] ={1, 2, 3]; let a2:rray =[1, 2, 3]; 튜플 Tuple 인덱스별로 타입이 다를 때 사용 let b:[string, number] b = ["z", 1]; b = [ 1, "z"]; // 불가 void 아무것도 반환하지 않을 때 사용 function sayHello():void { console.log("hello"); } never 항상 에러를 반환하거나 영원히 끝나지않는 함수타입으로 사용 function showError():naver{ throw new Error(); } function infLoop():naver{ while(true) { //do ..
// Q1. make a string out of an array { const fruits = ["apple", "banana", "orange"]; const result = fruits.join(); } join (메소드) Array.join(separator?: string): string 배열의 모든 요소를 지정된 구분 기호 문자열로 구분하여 문자열에 추가 @param separator — 배열의 한 요소를 결과 문자열의 다음 요소와 구분하는 데 사용되는 문자열 생략하면 배열 요소가 쉼표로 구분 // Q2. make an array out of a string { const fruits = "🍎, 🥝, 🍌, 🍒"; const result = fruits.split(","); } split (메소..
transform element변형시 사용 요소의 회전, 크기조절, 기울이기, 이동효과를 부여하는 함수 제공 transform: transform 함수; 함수 설명 함수 인자 값 translate(x,y) 요소위치를 가로로x, 세로로y만큼 이동 css기본단위 translateX(n) 요소위치를 가로로 x만큼 이동 css기본단위 translateY(n) 요소위치를 세로로 y만큼 이동 css기본단위 sclae(x,y) 요소크기를 가로로 x배, 세로로 y배 확대또는 축소 0또는 양수 sclaeX(n) 요소크기를 가로로 x배 확대또는 축소 0또는 양수 sclaeY(n) 요소크기를 세로로 y배 확대또는 축소 0또는 양수 skew(x-angle,y-angle) 요소를 가로로 x각도만큼, 세로로 y각도 만큼 기울임 ..
useState - 컴포넌트의 상태 - 기본적으로 데이터가 저장되는 곳 - 변수 대신 쓰는 데이터 저장공간 - 문자, 숫자, array, object 다 저장가능 - 웹이 App처럼 동작하게 만들고 싶음 - state는 변경되면 HTML이 자동으로 재렌더링됨 - 자주 바뀌는 중요한 데이터 state로 사용 import {useState} from "react"; //리액트 내장함수 사용 const [state, setState] = useState("초기값"); //state: (=초기값) 데이터, setState: 데이터를 변경하는 함수 useEffect Mount: 화면에 첫 렌더링 Update: 다시 렌더링 Unmount: 화면에서 사라질때 useEffect( ( ) => { } ) 인자로 콜백함수..
JSX: Babel: jsx로 적은 코드를 브라우저가 이해할 수 있게 변환해줌 cosnt Button = { console.log("i'm clicked")}> Click me style 객체로 들어가기때문에 {{}} , ","쉼표로 마무리 , 카멜케이스 사용 const container = React.createElement("div", null, [Title, Button] ReactDOM.render(container, root); const Container = //컴포넌트의 첫 글자는 대문자여야함.