본문 바로가기

Dev

 (40)
타입스크립트 Typescript 인터페이스 typescript type Score = 'A' | 'B' | 'C' | 'F'; interface User { name : string; age : number; gender? : string; // ?를 붙이면 있어도 되고 없어도 됨 readonly birthYear : number; // 읽기 전용 수정 불가 [grade:number] : string; // 여러개를 스트링 타입으로 받을수 있음 //[grade:number] : Score; // Score의 범위 안에 있는것만 입력이 가능 } let user : User = { name : 'xx', age : 30, birthYear : 2000, 1 : 'A', //[grade:number] : string; 2 : 'A', //[grade:..
타입스크립트 Typescript 기본 타입 let age:number = 30; let isAdult:boolean = true; let a:number[] = [1,2,3]; let a2:Array = [1,2,3]; let week1:string[] = ['mon','tue','wed']; let week2:Array = ['mon','tue','wed']; //생략 가능 typescript가 기본적으로 잡아줌 let age = 30; let isAdult = true; let a = [1,2,3]; let a2 = [1,2,3]; let week1 = ['mon','tue','wed']; let week2 = ['mon','tue','wed']; // 튜플 (Tuple) let b:[string, number]; b = ['z', 1] //..
제네릭(Generic) 이란 ? 제네릭은 클래스 내부에서 사용할 데이터 타입을 외부에서 지정하는 기법. class Person { public T info; } Person p1 = new Person(); public T info => public String info; 로 됨. 왜? 사용하는가 코드의 중복을 방지하고 타입의 안전성 확보를 위해 메소드 단위 제네릭 class Person { public void printInfo(U info) { System.out.println(info); } } public class GenericDemo { public static void main(String[] args) { Person p1 = new Person(); p1.printInfo("테스트 !"); p1.printInfo(1);..
리액트 react create 예제 function Article(props) { return {props.title} {props.body} } function Header(props) { return { event.preventDefault(); // 기본 동작 방지 props.onChangeMod(); }}>{props.title} } function Nav(props) { const lis = []; for(let i = 0; i {t.title} ); } return {lis} } function Create(props) { return Create { event.preventDefault(); const title = event.target.title.value; const body = event.target.body.va..
리액트 react state prop 과 state의 공통점은 각각의 값이 변경되면 새로운 return 값을 만들어 ui를 바꿈 차이점은 prop은 컴포넌트를 사용하는 외부자를 위한것 state는 컴포넌트를 만드는 내부자를 위한것 function App() { const mode = 'WELCOME'; const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'javascript', body:'javascript is ...'} ] let content = null; if(mode === 'WELCOME') { content = }else if (mode === 'READ') { conten..
리액트 react 이벤트(event) function Header(props) { return {props.title} } 결과 축약형 어로우 펑션 { alert('Header'); }}> function Header(props) { return { event.preventDefault(); // 기본 동작 방지 props.onChangeMod(); }}>{props.title} } 태그가 복수일때 const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'javascript', body:'javascript is ...'} ] { alert(id); }}> function Nav(props) { c..
리액트 react 속성(props) 속성은 props를 사용 function Header(props) { console.log('props', props, props.title); return {props.title} } function Article(props) { return {props.title} {props.body} } prop을 이용한 출력 방법 function App() { return ( ); } 결과 li 같이 복수의 경우 function App() { const topics = [ {id:1, title:'html', body:'html is ...'}, {id:2, title:'css', body:'css is ...'}, {id:3, title:'javascript', body:'javascript is ...'} ..
리액트 react 컴포넌트 만들기 컴포넌트(사용자 정의 태그)는 첫 시작은 대문자 컴포넌트 정의 function Header() { return WEB } function Nav() { return html css js } function Article() { return Welcome Hello, WEB } 컴포넌트 사용법 function App() { return ( ); }
리액트 react 소스 수정 방법, 배포 1. 소스 수정 방법 create-react-app 기본 구조 src > index.js 기본 입구 파일 index.js 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( ); // If you want to start measuring performance in your app, pass a function // to lo..
리액트 react 개발환경 기본 세팅 1. node.js 환경이 필요 -> node.js 설치 LTS -> 안정화 버전 | Current -> 현재버전 1-1. WINDOW 환경 설치 확인 win+r -> cmd -> node -v, npm -v (버전이 나올시 node.js와 npm이 정상적으로 설치된것) 1-2. MAC 환경 세팅 설치 확인 spotlight search -> terminal -> node -v, npm -v (버전이 나올시 node.js와 npm이 정상적으로 설치된것) 2. create react app 설치 2-1. npm을 이용한 설치 cmd, terminal 실행 npm install -g create-react-app 권한이 없어서 실패할 경우 에러 -> eacces sudo npm install -g creat..

티스토리툴바