바스키아

파라미터랑 쿼리는 통해서 주소를 통해 동적인 값을 읽어와야 할때...사용한다.. 우선 밑에 형식이다. Query는 주로 검색조건이용할때 많이 사용한다. 두형식으로 우선 예제를 만들어볼껀데 URL Parameter먼저 Profile.js를 만들어보자 import * as React from 'react'; const profileData = { beom :{ name : 'beom', description : "Front Engine ...MyInfo ...etc" }, homer : { name : '호머 심슨', description : '심슨가족 아빠 주인공' } } function Profile({ match }) { const { username } = match.params; const prof..

Sub Route 라우트 안에 라우트 만들기!! 라우트를 통해 컴포넌트를 열었는데 그안에 또 라우트를 이용해야해 이럴때....사용(사실 내가 당장 필요한부분이였음) import * as React from 'react'; import Profile from './Profile'; import {Route, Link} from 'react-router-dom'; function Profiles() { return ( 사용자목록 beom homer 사용자를 선택해주세요} /> ); } export default Profiles; exact 이그젝트 쓰는이유는 전글에 설명되어있고.. 유의할점은 이부분이다. 사용자를 선택해주세요} /> path로 라우트를 이동했을때 render ={ 하고 바로 렌더할 dom요소..

전글을 보고 이제 해보자 해보자!! npm i react-router-dom 터미널에서 이눔을 설치해준다. 전글에 이런글이 있었지 기억이 난다면 이놈을 호출해줄꺼야 index.js 에다가 감싸주고 import {BrowserRouter} from 'react-router-dom'; ReactDOM.render( , document.getElementById('root')); 그리고 라우트할 컴포넌트를 작성해보자 import React from 'react' function Home() { return ( 라우터 체인지 이곳은 라우터 체인지된 HOME 입니다. ) } export defaut Home; Home() 을 export 해주는거 잊지 말라구~ import React from 'react' fun..

es6에 등장한 class키워드는 함수를통해 만들었던걸 클래스를 통해 특정타입의 객체를 사용할수도 있다. 우선 es6의 class 키워드 예제를 보자 ( 자세한 es6는 따로 정리해놓겠다. ) class Cart { constructor(user) { this.user = user; this.store {}; } put(id, project) { this.store[id] = product; } get(id) { return this.store[id]; } } const cart1 = new Cart({name : 'john'}); const cart2 = new Cart({name : 'jay'}); 사질 자바 하던사람은 굉장히 반가울거 같다는 생각이 든다. 클래스 객체지향에 constructor 생성..

Enum 이 뭐냐고 찾아보면 열거형 이러고한다 열거형? 형을 쭉 나열한건가? 기본 구조를 봐보자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 enum StarbuksGrade{ WELCOME, GREEN, GOLD } function getDicount(v: StarbuksGrade): number { switch(v){ case StarbuksGrade.WELCOME: return 0; case StarbuksGrade.GREEN: return 5; case StarbuksGrade.GOLD: return 10; } } console.log(getDicount(StarbuksGrade.GREEN)); console.log(StarbuksGrade.GREEN); 열거된..

이번 글도 사실 딱히 크게 쓸 내용은 없어.... 전에 배운 타입을 함수에도 적용한다는거지.... 정말 간단한거부터 시작할께 function add(x: number, y: number) : number { return x + y; } const result =add(1, 2); function buildUserinfo(name : string, email: string){ return {name, email}; } const user = buildUserInfo(); add함수를 먼처보면 x 와 y 파라미터에 타입을 지정해주었다. 그리고 파라미터 옆에 : 으로 number타입으로 지정해주었는 --> 함수의 바디를보고 반환되는 값이 number다 라고 :number로 리턴타입을 위와같이 지정해주었다. 만..