amind

객체 - 원시형과 달리 데이터를 담을 수 있습니다. - 키로 구분된 데이터 집합이나 복잡한 개체를 저장할 수 있습니다. - 중괄호{ } 를 이용해 만들수 있으며, 중괄호 안에는 '키' 와 '값' 쌍으로 구성된 프로퍼티를 여러개 넣을 수 있습니다. - '키':문자형 , '값':자료형 이 허용됩니다 객체의 생성 방법 let obj = new Object(); // '객체 생성자' 문법 let obj = {}; // '객체 리터럴' 문법, {} 방식으로 생성하는것이 더 좋습니다. 리터럴과 프로퍼티 - 프로퍼티 키는 프로퍼티 '이름' 혹은 '식별자' 라고 부릅니다. let obj = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30..

Modern JavaScript 카테고리의 글 입니다. - 최신 JavaScript의 기술을 지향하고 글을 작성하지만 시간이 지나면 Modern 하지 않을수 있습니다. 1. JavaScript - JS로 작성한 프로그램을 script라고 부릅니다. - 웹페이지 HTML안에 작성할 수 있으며, 웹페이지가 불러올 때 스크립트가 실행이 됩니다. - JS는 서버에서도 실행이 가능합니다. 2. 엄격모드 - use strict 라는 지시자를 사용해서 엄격모드를 활성화 시키도록 하였습니다. - ES5에서 새롭게 기능이 추가, 기존 기능의 일부가 변경되어서 하위 호환성 문제가 발생합니다.이때 엄격모드를 활성화 시킬때만 이 변경사항이 활성화 되도록 하였습니다. - 스크립트 최상단이 아닌 함수 본문 앞에서도 사용이 가능..

* useRef로 특정 DOM 선택하기 - 특정 엘리먼트의 크기를 가져오든지, 스크롤바 위치 설정, 포커스 설정 등의 다양한 상황에서 DOM을 직접 선택해야하는 상황이 발생합니다. - 이때 필요한것이 ref를 사용합니다. - 함수형 컴포넌트에서 ref 사용시 useRef HOOK 함수를 사용 - reset 버튼을 클릭할 경우 input 에 focus가 맞춰지도록 ref를 사용하였습니다. import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); const { name..

* useState - React 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었습니다. - React 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. - 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} +1 -1 ); }..

* react의 전 개념이 아니라 작성자가 필요한 부분만 정리를 하였습니다. * React Virtual DOM - 기존의 프레임워크에서는 JS의 특정 값이 바뀌면 DOM의 속성이 바뀌도록 연결을 해주어서, 업데이트 하는 작업을 간소화 하는 방식이었습니다. - React의 경우에는 업데이트가 아니라 전부 날리고 새로 보여준다는 아이디어에서 개발이 시작되었습니다. 하지만 전부 날리고 새로 보여줄 경우에는 속도가 굉장히 느릴 것 입니다. 그렇기 때문에 브라우저에 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로서 그냥 JS객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것 보다 속도가 훨씬 빠릅니다. * defaultProps 로 기본값 설정 - 컴포넌트에 props를 ..

* JavaScript 비동기 처리 - 동기적 작업: 하나의 작업이 끝날 때까지 기다리는 동안 다른 작업은 중지상태가 되므로 다른 작업을 진행할 수 없습니다. 먼저 진행된 작업이 끝난 후 다음 예정된 작업이 진행가능합니다. - 비동기적 작업: 하나의 작업이 먼저 진행된다 하더라도 동시에 여러 가지 작업을 처리가 가능하므로 대기상태에서 다른 함수도 호출이 가능합니다. function work() { setTimeout(() => { const start = Date.now(); for (let i = 0; i < 1000000000; i++) {} const end = Date.now(); console.log(end - start + 'ms'); }, 0); } console.log('작업 시작!'); ..

* 기본 파라미터 사용법 function calculateCircleArea(r) { return Math.PI * r * r; } const area = calculateCircleArea(); console.log(area); // NaN - 이렇게 사용을 하면 Not a Number, undefined 가 나와버립니다. // function 사용 function calculateCircleArea(r = 1) { return Math.PI * r * r; } const area = calculateCircleArea(); console.log(area); // 3.141592653589793 // arrow function 사용 const calculateCircleArea = (r=1) => Ma..

* 변수 사용 - 기존 JS qustnsms var, let, const 를 사용하였습니다. - 모던 JS에서는 let, const를 사용하는것을 권장하며, var 사용은 지양하는것을 권장한다고 합니다. * JS 객체 비구조화 할당 - 객체 비구조화 할당 문법을 사용하면 코드를 더욱 짧고 보기 좋게 작성 할 수 있습니다. const ironMan = { name: '토니 스타크', actor: '로버트 다우니 주니어', alias: '아이언맨' }; const captainAmerica = { name: '스티븐 로저스', actor: '크리스 에반스', alias: '캡틴 아메리카' }; function print(hero) { const { alias, name, actor } = hero; cons..

JS 변수 1. let: 블록 유효 범위 변수를 선언 할 수 있습니다 // myLetVariable는 여기에서 보이지 *않습니다* for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) { // myLetVariable는 여기에서 유효합니다 } // myLetVariable는 여기에서 보이지 *않습니다* 2. const: 값이 변경되지 않는 변수를 선언 할 수 있게 합니다. const Pi = 3.14; // 변수 Pi 설정 Pi = 1; // 상수로 설정된 변수는 변경 할 수 없기 때문에 애러 발생. 3. var: 가장 일반적인 변수 선언 키워드, 변수가 선언 된 함수 블록에서 사용 할 수 있습니다. // myVarVariable는 여기에서 사..

class : template에 속함 [- ES6에서 추가 -] object: 클래스에 데이터를 넣어서 사용하는것. // class 선언 방식 class Person{ constructor(name, age){ this.name = name; this.age = age; } speak(){ console.log(`${this.name}: hello!`); } } //object create const userName = new Person("userName1", 20); console.log(userName.name); console.log(userName.age); userName.speak(); ==> class, object 사용예제 // Getter & Setter class User{ const..