습관제작소

Conponent 화면을 이루는 부분 웹 페이지의 부분을 쪼는것 것 HTML을 리턴하는 함수 부모 컨퍼런트는 여러명의 자식 컨퍼런트를 가질 수 있다. (Ui 그리고 프젝 시작해보자) 데이터는 최상단 컴포넌트 인 App에서 관리한다. 모듈(module) : JavaScript 파일 각각을 모듈이라고 부른다 다른 모듈을 쓰고 싶으면 import 해야된다. 다른 모듈에서 쓰게 마들고 싶으면 export 해야한다. 외부에서 만들어 import 하기 Menu.tsx export default function Menu() { return ( 짜장면 짬뽕 탕수육 ); } App.tsx // import "./styles.css"; : 상대 경로 import "/src/styles.css"; // 절대 경로 impor..

React frontend library frontend client : 사용자 눈에 보이는 화면 : 브라우저 backend server 눈에 보이지 않지만 앱이 작동하기 위해 꼭 필요한 부분 단어정리 (쉽게 설명해보자~) library : 미리 만들어 놓은 코드 framework : 미리 만들어 놓은 시스템 API : 미리 만들어 놓은 중개자 개발 환경 : CODESANDBOX import "./styles.css"; export default function App() { return ( 백성연 배워보자 리엑트 ); } HTML 시작!! 참고 사이트 W3Schools : HTML, CSS ,jvascript 튜토리얼 사이트 MDN : 모질라 재단에서 운영하는 웹 표준을 정리해 놓은 사이트 index...

interface 내가 만든 타입 interface Info{ name : string, age : number } const myInfo={ name : '백성연', age : 28 }; const sayHello = (person : Info):string =>{ return `안녕, ${person.name}. 나이는 ${person.age}, 전화번호는 ${person.phon}`; }; console.log(sayHello(myInfo)); interface는 JavaScript엔 없고, TypeScipt에만 있는 개념이다. interface는 개발자가 직접 만든 타입이다. 함수의 인자로 객체를 쓸때는, 반드시 객체를 interface로 정의 해야 한다. interface Cal{..

화살표 함수 // 화살표 함수 (arrow function) const sayHello = (name: string, age: number)=>{ return `안녕, ${name}, 아니는 ${age}`; } // const sayHello = (name: string, age: number)=>return `안녕, ${name}, 아니는 ${age}`; // JS에선, TS에[선 다른 메이저 언어들, c, c++, c#, 등 완전히 다르게 // 함수가 곧 변수, 데이터, 타입 const a =sayHello('백성연', 28); console.log(a); const adder = (x:number) => (y:number) => x+y; // const add5=(y:number) =..