기록하는 노트

한곳에 작성할 경우 분리하여 작성할 경우 import 불러오는 코드를 추가 작성한다. Content.js 파일 생성 Header.js 파일 생성

예제1 웹페이지에 랜덤 텍스트 뿌리기 새로고침을 누를 때마다 랜덤하게 출력이 된다. 결과화면 1 결과화면 2 결과화면 3 예제 2 에서는 완벽한 ES6문법을 지원하지 않는다. /* 복잡한 화면 디자인은 변수로 선언해서 부착시킬것 웹상에서는 ' ', " ",` ` 은 사용하지 말것. */ 예제3

create-react-app myapp2 로 새로운 프로젝트 생성 cd myapp2 yarn start 로 엔진구동 확인 불필요한 파일 제거작업 1. public 폴더에 index.html만 남기고 삭제 2. src 폴더에 components 폴더 생성, App.js를 components폴더로 이동 3. index.js 경로 수정 import App from './components/App'; 4. App.js 함수 삭제하고 클래스로 작성하기위해 설정 rcc tab or enter yart start 서버구동 확인 서버구동 종료하고 myback 폴더 생성하고 myapp2폴더안의 내용전부를 복사 creat-app을 하지 않고 복사해서 사용하는 방법을 사용하기 위해서 이러한 작업을 했다. JSX 문법 1...

Reactjs code snippets 설치 test.js 파일 생성 후 클래스 rcc 함수 rsc

open in brower 설치 리액트 연습 마우스 우클릭 -> Open In Default Browser

HTML Snippets 설치 user -> .vscode -> extensions -> abusaidm.html-snippets -> snippets 폴더를 vscode에서 불러오기 템플릿 작성 { "ww":{ "prefix":"ww", "body":[ "", "", "", "", "\t", "\t", "", "" ], "description":"우리웹 HTML 템플릿", "scope":"text.html" } } 저장 종료 후 vscode 재시작 ww 입력 후 tab or enter

vscode 터미널에서 1. npm install -g yarn로 yarn 프로그램 설치 2. npm install -g create-react-app => 자동으로 구조형성 3. create-react-app 프로젝트명 설치 완료화면 yarn start Starts the development server. yarn build Bundles the app into static files for production. yarn test Starts the test runner. yarn eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do thi..

export /* 9. lib 자주 사용, 반복적인 구문(함수), 상수, 클래스도 불러다 사용이 가능 */ // 1. 함수, 상수, 클래스명 앞에 매번 export 키워를 사용 -> import /* export const pi=Math.PI //3.141592~ =>import //export는 접근허용자 역할을 한다. export function square(x){ //10.main.ts파일에서 불러다 사용하고 싶다. -> export를 사용해야 한다. return x+x } console.log(square(10)) export class Person3{ name:string // ES6에서는 멤버변수 -> 생성자를 통해서 초기화 constructor(name){ this.name=name } } ..

/* 7. class */ class Person{ //자바에서 생성자 => 클래스명과 동일 => Person(){} //1. 타입스크립트에서 생성자 => constructor() or constructor("") //2. 생성자는 절대로 한개이상 생성X constructor(name,age){ this.name=name //동적으로 멤버변수선언 //name 빨간줄 (에러) this.age=age //age 빨간줄 (에러) } } class Person1{ name1 age1 constructor(name1,age1){ this.name1=name1 //에러발생하지 않는다. this.age1=age1 } } class Person2{ //name //age address //접근지정자 public을 부여..

/* arrow.ts 화살표 함수 => 자바의 람다함수(->) 기능상 똑같다. 형식) var or let or const 변수명=function(매개변수명:자료형){처리구문} */ let po = function(x:number) { console.log("x=>"+x); return x * x; } console.log(po(10)); /* 형식2) const 변수명=(매개변수1, 매개변수2,...)=>{처리 구문} 매개변수 한개면 () 생략 가능, 함수의 내용이 한문장이상 { } 처리 매개변수의 자료형을 쓰지 않으면 any(어떠한 자료형도 ok) -> 권장하지 않는다. 반드시 자료형을 쓰는 것이 좋다. */ const po2 = x => x * x; console.log(po2(20)); //tsc ..