킹바구니

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..

1. Internet 전 세계의 컴퓨터들이 자료 공유를 위해 서로 연결되어있는 것. 클라이언트와 서버로 구성되며 TCP/IP라는 기본 프로토콜을 통해 제공되고 있음. 2. WWW (World Wide Web) 인터넷에 연결된 사용자들이 서로 정보를 공유할 수 있는 공간. 웹브라우저를 통해 접속할 수 있음. 텍스트, 그림, 소리, 영상 등 정보를 하이퍼텍스트 방식으로 제공. ※ Hyper-text 문서 내부에 또 다른 문서로 연결되는 참조를 집어넣음으로써 웹 상에 존재하는 여러 문서끼리 서로 참조할 수 있는 기술. ※ Internet과 WWW의 차이점 혼용하여 쓰이지만 인터넷은 단순히 기기가 연결되어있는 것을 의미하고, WWW은 특정 주소로 이동하여 데이터를 공유할 수 있다는 것임. 인터넷을 사용하면서 이..

SASS 상위 버전이 SCSS 문법적으로 약간 다른게 있으며 보통은 SCSS씀. 1. & 부모 선택자 선택 li { &:last-child { padding: 10px; } } /*결과*/ li:last-child { padding: 10px; } .btn { &-small { padding: 1px; } } /*결과*/ .btn-small { padding: 1px; } 2. : 동일한 네임을 가진 css는 중첩해서 사용 가능 li { font: { size: 10px; color: #333; } } /*결과*/ li { font-size: 10px; font-color: #333; } 3. !global 변수는 스코프 안에서만 움직이기 때문에, 상단에 전역변수로 써주거나 아니면 !global 달아주기..

1. concat() 인자로 주어진 값이나 배열을 기존에 합쳐서 새로운 배열 반환. // array1.concat(array2, array3, ..., arrayX) var a = [1,2] var b = [3,4] var c = a.concat(b) var c // 1,2,3,4 2. every() 조건을 테스트해서 true, false 반환. // array.every(function(currentValue, index, arr), thisValue) var _a = [1,2,3,4] var chkNum = function chkNum(v) { return v < 5; }; _a.every(chkNum); // true; 3. fill() 시작 인덱스부터 끝 인덱스 전까지 원하는 값으로 채움. // ..