전체 글

일단 예제부터 볼겨 import React, { Component } from 'react'; class App extends Component { state = { arr : ['멍멍','어흥','냥냥','깎깍'] } render() { console.log(`render`,this.state.arr); const list = this.state.arr.map((v,k)=> this.setState({ arr: this.state.arr.slice(0,k) .concat(this.state.arr .slice(k+1,this.state.arr.length)) }) }} key={k}>{v} ) return ( App.js {list} {//이거는 배열에 더해주기 onDoubleClick this.set..

아니 잘되다가 내가 디버깅창 몇개 만져따고 저러는거야? react에서 디버깅과 관련하여 디버그 콘솔을 돌리다가 생긴 에러이다 프로그램 실행에서 경로를 찾을수 없다는 문제같은데... 생각보다 예민쓰;; 암튼 짜증나서 뭐 이것 저것 찾다가.. launch.json을 켜보자 저기 위에 프로그램 실행이 있다 { // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요. // 기존 특성에 대한 설명을 보려면 가리킵니다. // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요. "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name":..

ojdbc8, ojdbcc14, ojdbc6 등등 ojdbc13 : jdk1.3 ojdbc14 : jdk1.4 ojdbc5 : jdk1.5 ojdbc6 : jdk1.6 jdbc Driver설정을 할때 현재 자신이 사용하는 jdk버전에 맞는 ojdbc.jar를 사용해야 한다. 보통 오라클 10은 ojdbc14.jar를 사용하고 11g는 ojdbc.jar로 사용한다고 한다. 만약 jdk버전이 더 높다거나 할 경우에 가장 최신버전을 사용하면 된다. 즉, ojbdc의 숫자는 PC에 설치된 JDK버전과 관계가 있다.

map()은 다음과 같이 사용한다 let ar = [10,20,30,40]//이거능 기본 console.log(ar); //결과 배열 : 적당하게 가공하여 얻은 let br =ar.map((n)=>{ console.log(n); return n*10 }) console.log(br);//[ 100, 200, 300, 400 ] 배열을 순차적으로 순회하면서 어떠한 것을 수행한다. arr.map(callback, [thisarg]) 일단 map에 줘야할 인수는 위와 같다. let cr =ar.map((n,k)=>{//k는 index번호 console.log(n); return n*k }) console.log(cr); //[ 0, 20, 60, 120 ] let dr = [ {a : 10,b:20} , { ..

사용자에게 주의나 줘보자 class App extends Component { f1 =()=>{ alert(`경고창`)//띄워짐 } f2 = ()=>{ console.log( prompt(`입력ㄱㄱ`,`this is default`)//return이 있다. ); } f3 = ()=>{ window.confirm(`confirm`) //리액트에서는 window. 붙여야함 //submit하겠냐? return값이 있다 } ...... 다양한 주의창 onClick안에 익명함수를 선언해서 사용해도 된다. render() { return ( f1 f2 f3 { alert(`gd`) }}>button ); } 주의창의 활용 class App extends Component { f1 =()=>{ alert(`경고창`)..

보호되어 있는 글입니다.

class App extends Component { state ={ num:10 } constructor (){ super()//이것도 상속받은 생성자는 무조건 해라 this.f2 = this.f2.bind(this)//이렇게 해야 함수를 사용할수 있다. } f1 = ()=>{ console.log(`f1 call`); console.log(this.state.num); } f2 = function (){ console.log(`f2 call`); //console.log(this.state.num);//이건 터져 //살찐 애로우만 가능쓰 //살찐 애로우를 사용하면 자동으로 바인딩 된다 } .... f2에서 state를 바인딩을 시켜줘야 사용가능쓰 이거보면 render()안에서 함수사용 b=20//함수..

class App extends Component { render() { return ( App.js App {/*이걸 상속으로 볼수 있는가?*/} ); } } 1. props 2. state : 컴포넌트 내부에서 사용되는 변수! react는 전체를 통틀어 저 두개 가지고 장난치는 거당~ 3. event : 함수 콜 import React, { Component } from 'react'; class App extends Component { n1 = 10; //그냥 필드이름만 주면 됨 state = { n2 : 20 } f1 = ()=>{ console.log(`f1 call`); } render() { return ( App.js ); } } class Bpp extends Component { re..

보호되어 있는 글입니다.

경로를 찾아보자 파일 구조는 다음과 같다. App.js에서 sub com0을 데려오고 com0을 부모로 둔 com1에 같은 부모를 둔 com2를 데려올 것이다. 걍 상위 컴포넌트를 부모라고 표현해따. import React, { Component } from 'react'; import Com0 from './sub/com0' class App extends Component { render() { return ( App.js ); } } export default App; App.js는 com0을 불렀다 import React, { Component } from 'react'; class Com2 extends Component { render() { return ( com2 ); } } export ..

리액트에서는 folder를 import시킬 수도 있다. 여기서 반드시 지켜주어야 할 약속된 파일이 있다. 아무거나 폴더를 하나 만들고 app.js같은 아무 컴포넌트에서 import Sub1 from './sub1' 위와 같이 떨렁 부르면 에러가 걸린다. 이 에러를 잡기 위해서는 반드시 index.js파일이 필요하다. 아마 해당 폴더 안에 index.js를 만들어주면 바로 에러가 풀린다. 무조건 이름이 index.js인 파일이 있어야 한다. 얘를 끌어오려면 폴더명 자체가 태그가 된다. 위의 코드로 예를 들면 원하는 곳에 이렇게 두면 그 폴더의 index.js파일에 있는 컴포넌트가 딸려온다. 여기서 보듯 class의 이름은 바꾸어줘도 된다 근데 파일명은 index.js여야한다. 이 index.js가 하는 역..

App.js는 class이기 때문에 전역 함수를 사용할 수 있다. function f1 (){ //전역 함수 console.log(`f1 call`); } class App extends Component { render() { f1() return ( APP다요 ); } } 뭐 이렇게? 사용하면 된다 근디 다른 파일에 있는 함수를 가져와보자 /* fpp.js */ export function fun2(){ console.log(`f3 call`); } export function fun3(){ //얘는 앞으로 끌어다가 쓸 것이당 console.log(`f3 call`); } /* App.js */ import React, { Component } from 'react'; import Bpp, { Cpp..

/* App.js */ import React, { Component } from 'react'; import Bpp, { Cpp } from './bpp' class App extends Component { render() { return ( APP다요 ); } } export default App; /* Bpp.js */ import React, { Component } from 'react'; class Bpp extends Component { render() { return ( BPP인니다 ); } } class Cpp extends Component { render() { return ( CPP인니다 ); } } export default Bpp; 이렇게 하면 에러가 퐝퐝터진다 밑에꺼 같은!..

다시 한번 더 정리 하즈아 영역을 살펴보까 class App extends Component { //function render() { //javascript code return (//jsx language 져는 APP인대여 ㅇㅅㅇ!!!! ); } } 클래스 내부면 변수와 함수를 선언 할 수 있다. render에서는 javascript code를 사용할 수 있다. return뒤에서는 jsx language를 사용할수있다. 뻑뻒뻑 class Bpp extends Component { render() { console.log(this.props.name); this.props.age = 5 //props의 갱신 안됨 return ( {this.props.age}쨜 ㅇ 3ㅇ {this.props.name}이..

import import React, { Component, Fragment } from 'react'; from 'react'라는 부분에서 default export 해주는 React를 데려온다. 'react'에서 단 하나의 default export해주는 애는 데려왔으니 그 안에 다른 class를 데려오고 싶은 경우에는 어떻게 해야할까? 그럴땐 옆에 쓰여진 것 처럼 { } 스코프를 사용하면 된다. 사용시 주의점은 { } 스코프 안에 있는 것을 불러오고 싶을 때 반드시 export를 시켜줘야한다. /* App,js */ import React, { Component, Fragment } from 'react'; import './App.css' import Bpp, { Test } from './Com..

class 내부에서 함수를 만들고 함수 불러오기 class App extends Component { //함수 만드는 방법 1 f1 (){ console.log(`f1`); } //함수 만드는 방법 2 f2 = function (){ console.log(`f2`); } //함수 만드는 방법 3 f3 = ()=>{ console.log(`f3`); } //함수 안됨 ? -> function +f2 or f3이렇게 하면 안된다 render() {//그린다 render는 함수! return ( 보땅1 보땅2 보땅3 {/* 보땅3 이렇게 부르면 아예 이 페이지가 로드될때 함수가 call 되어버린다 */} ); } }

주석쓰 걍 단축키쓰셈 class App extends Component { render() { return ( 냥냥2 {/* ghihihihi */} ); } } export default App; Fragment import React, { Component, Fragment } from 'react'; : 아웃 라인 잡기 div를 여러겹 쓰다보면 코드가 안으로 파고파고 들어가는 경우가 생긴다. Fragment태그는 html-elements에서 보이지 않는다. 보통 다른 Component를 소환할때 사용된다. class App extends Component { render() { //javascript code area start @ console.log(`asdfasdfasdfasdf`);//브라우..

1. node install 이건머.. 알아서들 Node.js 설치하기 설치하기만 연속이고요^^7 Node.js는 구글(V8)에서 개발한 고성능 자바스크립트 엔진으로 빌드된 Server side 개발용 소프트웨어 플랫폼이다. server side : 네트워크의 한 방식인 client-server 구조에서 server.. ryeom2.tistory.com 여기서 설치 하세요 2. VS code(IDE) install 이것도뭐.. 알아서들... VSCode ; Visual Studio Code 설치하기 IntelliJ및 WebStorm을 설치하려고 했지만 Intellij 만료가 6개월 남았다. 과연 장기적으로 오래사용 할 것인가에 대해 고민을 하다가 아닐 것이라 판단되었다. 비용문제가 컷기 때문이다. 고민을..

일단 객체를 리턴해주는 함수를 만들어보자 function makeObject(name,kor,eng){ return { name:name, kor:kor, eng:eng, getTotal:function(){ return this.kor+this.eng }, outPut:function(){ console.log(this.name,this.kor,this.eng,this.getTotal()) } } } 이렇게 makeObject라는 함수를 만들고 const arr = [] arr.push(makeObject('dog',67,5)) arr.push(makeObject('cat',23,6)) arr.push(makeObject('tut',86,4)) arr.push(makeObject('miu',34,1))..

■ 함수의 오버로딩이 안된다. function fun1(){ console.log("1"); } function fun1(a){ console.log("2"); } function fun1(a,b){ console.log("3"); } //가장 마지막에있는것만 살아남는다. 위에잇는 함수 무시 fun1() fun1(10) fun1(10,20) ■ 함수의 매개변수에 디폴트 값을 설정할 수 있다. function fun1(a,b){ console.log(a,b) } fun1() //undefined undefined default call fun1(10) //10 undefined fun1(10,20) //10 20 fun1(10,20,30) //10 20 기본적으로 잘못된 코드이지만 문법적으로 문제없는 것 ..