킹바구니

👾한번 해봄 시리즈👾 =할건 따로있는데 한번 손대고싶어서 일단 찍어먹어보는 시리즈 ------------------------------ 1. 터미널에서 설치 npm install expo-cli --global 그 동안에 안드로이드/아이폰에서 expo go 앱을 설치해둠. 2. 터미널에서 실행 expo init my-app 만약 빨간색 글씨로 expo : 이 스크립트를 실행할 수 없으므로... 가 나온다면 아래 링크대로 하면 바로 됨 jy-tblog.tistory.com/8 3. 터미널에서 폴더 바꿔주고 시작 cd my-app npm start npm start 눌렀는때 에러뜨면서 안되서 식겁했는데 폴더 경로 안바꿔서 그랬음^ㅗ^ 시작하면 터미널에 큐알코드가 뜨고 웹페이지도 하나 열림! 4. 메트로에서..

let red = { fruits: 'apple' }; let yellow = { fruits: 'banana' }; const say = function() { console.log(`${this.fruits} is good!`); }; // 각각의 object가 하나의 say를 쓰고 싶다면? 1. call say.call(red) // apple is good!; say.call(yellow) // banana is good!; 이렇게 쿨하게 가져다가 쓸 수 있다. 1-1) 만약 function에 인자가 있다면 let red = { fruits: 'apple' }; const say = function(country) { console.log(`${this.fruits}(from ${country})..

자바스크립트에서 this는 그 상황마다 가리키는 값이 다름. 1. window 2. 자기 자신 3. 앞에 붙은 object 4. ??? 이렇게 크게 3가지로 나뉨 1. 일반적인(global scope) 상황에서 this는 window를 가리킴. this.room = 'window table'; // 콘솔창에 this만 쳐도 자동으로 window가 출력. 2. object안에서 this는 자기 자신을 가리킴. this.table = 'window table'; let myRoom = { table: 'my table', }; console.log(this.table) // window table console.log(myRoom.table) // my table console.log(this.myRoom...

props 컴포넌트 사이에서 데이터를 주고받을 수 있게 하는 것. // App.js function App() { const name = 'hobs'; const enrolled = 'yes'; return ( // Paper.js 컴포넌트에게 // 변수 name을 student라는 props로, // 변수 enrolled를 class라는 props로 넘겨줌. ); } // Paper.js function Paper(props) { return ( {props.student} // 'hobs' 출력 {props.class} // 'yes' 출력 ); } 상위 컴포넌트인 App.js가 하위 컴포넌트인 Paper.js에게 데이터를 전달해주고 있음. props는 이렇게 하위 컴포넌트로만 전달이 가능함. 1. ..

1. var와 let의 차이점 var: 예전 자바스크립트에서 사용되던 변수. let: ES6 자바스크립트부터 사용할 수 있는 변수. var 특징 1) 호이스팅이 됨. console.log(v); // undefined console.log(l); // l is not defined var v = 'var'; let l = 'let'; 2) 함수형 스코프를 가지고 있음. function aa() { if(true) { var v = 'var'; let l = 'let'; }; console.log(v); // 'var' console.log(l); // l is not defined }; aa(); var는 함수 내에서 최상단으로 올라가 선언됨. let은 생성된 그곳(if문) 안에서만 활동 가능함. 그래서..

var a = 1; function aa() { a = 2; console.log(a); // 2 } aa(); console.log(a); // 2 aa() 함수 안에서 a = 2는 밖에있던 var a = 1과 동일한 친구로, 1이였던 a를 2로 바꿨기때문에 함수가 끝나더라도 a를 호출하면 2로 나옴. var a = 1; function aa() { var a = 2; console.log(a); // 2 } aa(); console.log(a); // 1 aa() 함수 안에서 var a = 2는 밖에있던 var a = 1과 다른 친구로, aa() 함수 안에서는 a를 호출하면 2로 나오겠지만, aa() 함수가 끝나면 사라져서 원래 a = 1가 나옴. var a = 1; function aa(thing)..

1. array를 object로 빠르게 만들기 var arr = ['mon', 'tue', 'wed']; var obj = {...arr}; // {0: "mon", 1: "tue", 2: "wed"} 2. 두개 이상 array를 병합하기(concat, push말고) var arr1 = [1, 2, {name: 'jj'}]; var arr2 = [3, 4, [5, 6]]; var mergeArr = [...arr1, ...arr2]; // [1, 2, {name: 'jj'}, 3, 4, [5, 6]] 3. map()쓰지 않고 특정 value만 꺼내기 var students = [ {name: 'hobs', age: 33}, {name: 'marry', age: 54}, {name: 'jacob', age..

👾한번 해봄 시리즈👾 =할건 따로있는데 한번 손대고싶어서 일단 찍어먹어보는 시리즈 ------------------------------ 나도 드디어 배워본다.. 리액트.. 🤣🤣🤣 1. 웹앱 기존 웹은 데이터가 바뀌면 새로고침을 해야 반영이 되는데, 앱은 그렇지 않음. 형태는 웹인데 앱처럼 스무스하게 데이터가 새로고침없이 반영이 되는 페이지들을 웹앱이라고 함. 이런 웹앱을 지원하는 것이 바로 리액트, 앵귤러, 뷰임. 2. 설치 node.js 공식 홈페이지에 가서 current 버전을 깐다. 그리고 사용하는 에디터 터미널에서 npx create-react-app myapp 이라고 입력하면 자동 설치됨. (mpapp 부분은 아무꺼나 입력해줘도 되는데, 대문자는 안먹힘) 그리고 cd /myapp으로 경로를 변..

👾한번 해봄 시리즈👾 =할건 따로있는데 한번 손대고싶어서 일단 찍어먹어보는 시리즈 ------------------------------ 1. node.js notification 브라우저 밖에서 javascript를 사용할 수 있게 해주는 런타임 환경. 즉 web이라는 환경에서 벗어나 이제 컴퓨터 자체 파일에 접속하거나, 이를 읽고 쓰거나, 데이터베이스에 접속하거나 하는 등의 액션이 가능함. 그러다보니 기존 브라우저에서 하던 명령들이 안먹힐때가 있음. 예를들어 웹api인 alert는 예를들어 브라우저에서 실행시키면 경고창이 잘 뜨겠지만, node.js에서 실행시키면 에러가 발생함(이젠 환경이 브라우저가 아니니까). 장점 - javascript 하나만 알면 서버도 건들 수 있음 - 성능이 좋음(v8 엔진..

var num = 1; var num2 = num; num = 2; console.log(num2) // 1 🤨? var room = { table: 1 }; var room2 = room; room.table = 2; console.log(room2.table) // 2; 🤨?? 둘의 차이점은 첫번째는 원시값(primitive)이고 다른쪽은 참조값(reference)라는 것. 원시값 primitive value/type 은 메모리에서 스택 stack이라는 공간에 값을 저장하게 됨. 스택에서는 비교적 짧은 데이터들을 저장하고 빨리 불러오며, '스택'이라는 이름답게 데이터가 하나하나 위로 쌓이게 됨. var num = 1일때, 스택에 1이라는 값을 제일 아래 칸에 저장함. 그 후 var num2 = num..