신입개발자_장민기

import "./App.css" /* Avatar */ function Avatar(props){ console.log(props); // {name: "홍길동", age: 20, addr: "서울"}; const {name, age, address = "제주"} = props; //기본값 return ( 이름: {name} 나이: {age} 주소: {address} ) } function Avatar2({name2 = "강감찬", age2, address2}){ /* 객체의 분해 할당 */ return ( 이름: {name2} 나이: {age2} 주소: {address2} ) } function Member({person}){ //JSON: props대신 {person}으로 받음 const {name..

import "./App.css" //import sample from "./assets/sample.png" // //공통으로 사용하는 변수 let title = "Menu"; let names = ["홍길동", "이순신", "강감찬"]; let attr = {href: "http://www.google.com", target: "_blank"}; const App1 = (props) => { console.log("App1", props); return App1입니다. } function App(){ return ( jsx 사용 1 - 기본 숫자는 중괄호로 출력, 계산 : {100 +1} Boolean값(true, false, null)은 직접 출력 안 됨 : {3 > 2} Boolean값(true,..

import "./App.css" function App1(){ //1. 일반 jsx 요소 반환 return Hello } function App2(){ //2. 일반 컴포넌트 요소 반환 return } function App3(){ //3. 일반 문자열 반환 return "Hello World" } function App4(){ //4. 배열 return ["A", "B"] } function App5(){ //5. JSON(사용 불가) -> String //jsx의 기본문법 {} 때문에 문자열 형태의 json 포맷으로 리턴해야 함 return "{a: 100, b: 200}" } function App6(){ //6. 여러 개 반환시 반드시 root 태그 필요 return ( Hello1 Hello2..

import "./App.css"; //일반 함수 function MyButton(){ return 버튼; } //arrow 함수 const MyButton2 = (props) => { return 람다 버튼 } function App(){ //1. function 생성 return ( App ) //2. return 생성 } export default App; //3. export default 함수명 람다 함수의 경우 const Btn2 = (props) => 버튼2 도 가능하다. !!!@@@컴포넌트 첫 글자는 반드시 대문자로 할 것@@@!!! 반면, const는 반드시 소문자로 해야 한다. Export하는 함수에서 입력하지 않았거나, 컴포넌트가 소문자면 함수명이 어두워진다.

App.js 기본 틀 function App(){ //1. function 생성 return ( Template ) //2. return 생성 } export default App; //3. export default 함수명 public 폴더와 src/assets폴더의 차이 public 폴더: 기본 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공 -> 빌드 프로세스에서 처리하지 않고, 일반적으로 사용할 수 있어야 하는 이미지 src/assets폴더 - 모든 형식의 파일은 대중에게 공개되지 않음(유저가 액세스할 수 없음) -> 대신 코드 파일에서 사용 가능(반드시 import로 사용) 컴포넌트 이름은 항상 대문자로 사용 - 소문자는 DOM으로 취급

1. Node, Vs 설치 3. 내 컴퓨터에 폴더 생성 4. cmd에서 cd C:\폴더명 으로 이동 5. npx create-react-app react_stu -> y 4. cd react_stu 리엑트 설치한 폴더로 이동 5. npm start 서버 가동

Foo.vue(라우터 생성) Foo Foo에서 라우팅 연습 FooChild1 FooChild2 export default { props:{ id:String } } router.js //Import import Vue from "vue"; import VueRouter from "vue-router"; //컴포넌트 자식창 import Bar from './components/Bar.vue'; import Foo from './components/Foo.vue'; import Baz from './components/Baz.vue'; import FooChild1 from './components/FooChild1.vue'; /* 수정 */ import FooChild2 from './components/..

Baz.vue Baz props: {{ id }} $route.params.id:{{ $route.params.id }} {{ a() }} : {{ value }} export default { props:{ id:String //수정 }, data: function(){ return { value: ""} }, methods:{ a: function(){ var test=""; test=this.$route.params.id; //수정 console.log(">>>>>>>", test); this.value=test; //수정 } } } App.vue App에서 라우팅 연습 Home login /params:{id=aaa} export default { } router.js //Import import..

Baz.vue Baz props: {{ username }} $route.query.username:{{ $route.query.username }} {{ a() }} : {{ value }} export default { props:{ username:String //props로 사용 안 됨 }, data: function(){ return { value: ""} }, methods:{ a: function(){ var test=""; test=this.$route.query.username; console.log(">>>>>>>", test); this.value=test; return test; } } } App.vue App에서 라우팅 연습 Home login/abcd /my?username=이순..

Bar.vue {{ pw }} export default { props:{ pw:String } } Baz.vue Baz {{ pw }} export default { props:{ pw:String } } Foo.vue Foo props-od:{{ id }} $route.params.id={{ $route.params.id }} export default { props:{ id:String } } Knu.vue Knu userid= {{ userid }} export default { props:{ userid:String } } NotFound.vue {{ mesg }} not found! export default { props:{ mesg:String } } App.vue App에서 라우팅 연습 ..