data life

객체 1️⃣ 객체 생성 2️⃣ 프로퍼티 열거 3️⃣ 프로퍼티 조작 4️⃣ 프로퍼티 접근자 5️⃣ 인스턴스 6️⃣ 생성자 1️⃣ 객체 생성 - 싱글 리터럴 객체 const obj = { property : "value", method : function() { //객체가 함수 속성을 갖게되면 method라 불림 } } - 생성자 함수 function obj(name){ this.name = name; } >> new와 함께 쓰임 const NewObj = new obj('홍길동'); // NewObj { name : '홍길동' } - Object.create 메소드 이용 const NewObj = Object.create(프로토타입, 객체서술자); 📌 객체서술자란 다음과 같다 const NewObj = O..

✅ 문서 구조 HTML(Mark Up), MD Xlsx => MS 엑셀, 구글 스프레드시트 Docx => MS워드, 구글 문서 PDF => 수 많은 도구 뷰어 PPT => 수 많은 도구 뷰어 HWP => 한컴 ✅ Node, Tree html = 문서 문서를 조작하는 언어 = javascript how❓ => Document Object Model(DOM) 이때, DOM은 node들로 구성됨 node들은 트리형태로 구성되어 있음 ✅ DOM 속성 >> 속성이 무지하게 많기 때문에 다 외울필요는 없고 필요할 때 확인이 가능하다. ✅ DOM 선택 getElementById() getElementsByClassName() getElementsByTagName() getElements => HTML Collecti..

✅ 함수 선언 - 함수 선언문 function func() { } - 메서드 const obj = { prop : function() { } } - 생성자 함수 function Myobj() { } - 화살표 함수 (ES2015+, ES6) const arrowFunc = () => {} ✅ 함수 표현식 - 기명 함수 표현식 >> 중복, 호이스팅의 문제 해결 가능 const func = function func() { return '기명함수표현식'; } - 익명 함수 표현식 const func = function() { return '익명함수표현식'; } ✅ 매개변수(parameter)와 인자 다루기 function func(params){ params = params + 10 return params ..

값(value) 조작 가능한 표현 ex> 문자열, 문자, 숫자 등 ✅ 값(value)의 종류 원시 값 - Number - String - Boolean - Null - Undefined 참조 값 원시 값이란❓ - 단순 원시적인 값 또는 데이터 - 재할당하지 않은 처음의 값 ** 변수는 어떠한 공간을 갖는 것으로 임의의 메모리 주소를 할당받음 let myAge = 10; let myAge2 = myAge; myAge = 20; console.log("myAge :"+myAge); //20 console.log("myAge2 :"+myAge2); //10 Number 1. 숫자의 종류 - 정수 ex>10, 100,-10,-100,,, ☑️ Number.isInteger(num) : num이 정수인지 판별하는..

TypeScript에게 React component를 설명하는 방법 Prop Types는 prop이 있는지 없는지 확인해주지만 코드를 실행한 다음에야 확인이 가능하다. 코드 실행하기 전에 확인하기 위해 Prop Types를 이용하지 않고 prop들을 TypeScript로 보호해주도록 하겠다. TypeScript와 props interface interface를 이용하여 object 모양을 typescript에게 설명해주어 component의 props에 타입을 알려준다. interface Players { name: string; age: number; score: number; } const profile = (playerObj: Players) => { `${playerObj.name}. ${play..

TypeScript 대체 이게 뭐야? 자바스크립트야? 하시는 분들 예..맞습니다.. JavaScript를 기반으로 한 프로그래밍 언어인데요 타입스크립트는 마치 비법소스(라면스프)를 넣은 요리라고 생각하시면 이해하기 쉬울 듯 합니다. (오셨다..!) javascript와 거의 복붙한 수준으로 비슷하면서 새로운 기능만을 살짝 추가했기 때문에 사실상 추가한 기능 빼고는 문법도 똑같습니다. (이래도 안배울겨?) 그래서 javascript를 공부하시는 분들은 지식만 잘 가지고 있으면 이 아이도 잘 쓸 수 있다는 굉장한 사실!! TypeScript의 기능 타입스크립트의 절대적 기능은 바로 프로그래밍 언어가 작동하기 전 type을 확인해주는 것인데요 자바스크립트와 타입스크립트를 비교하면서 살펴보도록 하겠습니다. 자바..

1. 시간 변환 함수 생성 function Times() { const [times, setTimes] = useState(""); return ( 분 🔁 시 Reset ); } state를 활용하기 위해 일단 시간 변환 함수를 만들어주었다. 구성은 다음과 같다. 분(minutes) input 교체 버튼 시(hours) input 리셋 버튼 2. 이벤트 함수 생성 및 연결 const onChange = (event) => { setTimes(event.target.value); }; onChange의 이벤트 함수를 생성하여 변경된 값을 저장해주는 setTimes에 입력값을 받아 저장해주도록 하고 value값을 가져오도록 Times함수 input에 연결해준다. 위와 마찬가지로 state를 이용하여 교체버튼..

React란? SPA (Single Page Application) 일반적으로는 최초에 서버로부터 HTML을 받고 페이지의 변경이 필요하다면 다시 서버에 요청하여 HTML을 전달받음 이 과정에서 페이지를 처음부터 다시 불러옴(reload) 반대로 SPA의 경우, 최초 서버로부터 HTML을 받고 페이지의 변경이 필요하다면 변경이 필요한 부분만 JSON으로 전달받음 이 과정에서 페이지에서 변경된 부분만 계산하여 다시 그리게 됨! 이를 위해서, React가 쓰이는데 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다. 이때, JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경을 제공하는 JSX가 있다. 이는 HTML과 유사하여 개발자들에게 유용하다! 또한, UI를 구성..

Canvas javascript를 통해 그래픽을 그리는데 사용하는 HTML 요소 그래프 그리기 사진 결합 간단한 애니메이션 제작 기본 size 300픽셀 × 150픽셀(너비 × 높이) >> 사용자 지정 크기는 HTML height및 width속성을 사용하여 정의 가능 CanvasRenderingContext2D = 🖌️ const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); .fillRect() : 채워진 사각형 그리기 .fillRect(x, y, width, height) or ctx.rect(x, y, width, height); ctx.fill(); .strokeRect() : 윤곽선이 있는 사각형 ..

forEach() :배열을 순회하면서 인자로 전달한 함수를 호출하는 반복문 arr.forEach(func(value, index, array)) value : 현재 순회 중인 요소 index : 현재 순회 중인 요소의 index array : 배열 객체 1. 함수(function) 인자 function myFunc(item) { console.log(item); } const array = ['a', 'b', 'c', 'd']; array.forEach(myFunc); > a > b > c > d 2. 람다(lambda) 인자 array.forEach((item) => { console.log(item); }); > a > b > c > d 3. value, index를 인자 array.forEach((..