본문 바로가기

분류 전체보기

 (95)
Today I am
Component 이벤트 만들기 1) subject의 링크 클릭시 이벤트가 실행되게 하기 header에 직접 클릭 이벤트를 넣고 header를 다시 subject componenet로 패키징할 것 ( bind, setState 사용) ◎우선 빠른이해를 돕기 위해 단순화하여 sub파일을 주석으로 하고 내부 내용을 바깥으로 옮겼다. ↓ - setState함수 사용 - bind함수 사용 - bind (this)를 넣어서 강제로 this를 주입해서 this를 공유할 수 있게 해줌. bind 함수 예시) let obj = {name:'egoing'}; function bindTest(){ console.log(this.name); } bindTest(); //undefined let bindTest2 = bindTest.bind(obj); bi..
props / state props / state props - 사용자가 component를 사용하는 입장에서 중요한 것 - component 의 기본적인 동작을 바꾸고 싶을 때 props - component 사용자에게 중요한 정보 - component를 사용하는 외부의 props state - props의 값에 따라서 내부의 구현에 필요한 데이터가 state다 - component 내부적으로 사용되는 것들 - 실제로 구현하는 내부 - state - 실제로 component를 구현할 때 좀 더 복합적으로, 다양하게 일을 하는 component를 만들때 필요한 필수적요소인 - state 리액트에서는 props의 값이나 state값이 바뀌면 render가 다시 호출되면서 화면이 다시 그려진다 1. App이라는 component에 ..
2048 | ZeroCho 💫 JavaScript | 2048 게임 1. 4*4 테이블 만들기 const 테이블 = document.querySelector("#table"); const 데이터 = []; function 초기화(){ const fragment = document.createDocumentFragment(); [1,2,3,4].forEach(function(열){ let 열데이터 = []; 데이터.push(열데이터); const tr = document.createElement("tr"); [1,2,3,4].forEach(function(행){ 열데이터.push(0); const td = document.createElement("td"); tr.appendChild(td); }); fragment.appendCh..
Component 제작 ⭐ 1. component 만들기 - 보통 HTML 코드 작성 시 web world wide web! html css javaScript html html is HyperText Markup language. ↓ - class 내부로 넣어서 component 생성 import React, { Component } from 'react'; import './App.css'; class Subject extends Component{ render(){ return( web world wide web! ); } } class TOC extends Component{ render(){ return( html css javaScript ) } } class Content extends Component{ rend..
call by value, 생성자 1. call by value, call by reference, call by sharing let obj = {a:1,b:2}; let obj2 =Object.assign({}, obj); obj2 //{a: 1, b: 2} //a: 1b: 2__proto__: Object //1단계깊은복사 JSON.parse(JSON.stringify(obj)) //{a: 1, b: 2}a: 1b: 2__proto__: Object //완전한 깊은복사, 성능이 안좋다, 프로토타입을 복사할 수 없다 function 함수(매개변수){ 매개변수 = 10; console.log(매개변수); } let 인자 = 5; 함수(인자); console.log(인자); //10 //5 - 원시 값은 복사가 돼서 매개변수에 들어간다...
React 개발환경 구축하기 component의 장점 1. 가독성 2. 재사용성 - component 화 3. 유지보수 공부전략 코딩 -> 실행 -> deploy 공식문서에 익숙해지기 📝 개발환경 원래 리액트 앱을 처음 실행하기 위해서는 webpack이나 babel같은 것을 설정하기 위해 많은 시간이 걸렸다. babel = 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바스크립트 문법을 구형 브라우저에서도 사용할 수 있도록 변환시켜준다. webpack = 웹사이트들이 커질수록 라이브러리, 프레임워크를 사용하면서 복잡하게 됐는데 이를 번들 시켜줘서 묶어준다, 많은 모듈을 합해서 간단하게 만들어준다. but, 이제는 create-react-app command로 바로 시작할 수 있다. npm = Node.js로 만들..
팩토리 패턴, 프로토타입 🔷 팩토리 패턴 function 카드공장 (name, att, hp){ return{ name:name, att:att, hp:hp, type:'카드', attack:function(){}, defend:function(){}, }; } let card = 카드공장('토끼',10,10); card //{name: "토끼", att: 10, hp: 10, type: "카드", attack: ƒ, …} //att: 10 //attack: ƒ () //defend: ƒ () //hp: 10 //name: "토끼" //type: "카드" //__proto__: Object let card2 = 카드공장('거북이',20,20); card2 //{name: "거북이", att: 20, hp: 20, type: "카..
참조와 복사의 차이, 사용법 📝 참조와 복사 복사(깊은복사) let 복사 = "복사하기"; let 값 = 복사; 값 = "컴퓨터"; //"컴퓨터" 복사 //"복사하기" - 원시 값인 문자, 숫자, 불린은 복사가 된다. - 값만 복사되고 이전 변수에 영향을 주지 않는다. 참조 (얉은복사) let 참조 = { 참조하기 : "참조중" }; let 값 = 참조; 값.참조하기 = "컴퓨터" //"컴퓨터" 값 //{참조하기: "컴퓨터"} 참조 //{참조하기: "컴퓨터"} - 객체, 배열은 대입하면 참조 관계가 된다. - 값, 이전 변수에 영향을 미친다. +) 참조관계가 되는 객체 or 배열을 복사만 하고 싶다면? let obj1 = {a:1,b:2}; let obj2 = {} Object.keys(obj1).forEach(function(ke..

티스토리툴바