수민정의 기술블로그

var formData = new FormData(document.getElementById('폼 아이디'));

props 는 값을 변경할 수 없으나 state 는 값을 바꾸는 작업에 사용된다. state 는 하나의 객체로서 값을 저장하고 변경한다. 반드시 생성자에서 state 를 초기화 해야함 state 를 변경시킬 때에는 setState 함수를 사용해야함.(리엑트 엔진 구동이 됨) setState 는 비동기식으로 호출됨 import React, { Component } from 'react'; class StateExample extends Component { constructor(props) { super(props); this.state = { loading: true, formData: 'no data', }; this.handleData = this.handleData.bind(this); setTim..

자료형 선언은 'props-types' 를 import 해 사용한다. 이름은 PropsType이다. import React from 'react'; import PropsType from 'prop-types'; // prop-type 임포트 해야함 class PropsComponent extends React.Component { render() { return {this.props.name}; } } // PropsComponent 의 prototype 에 props 에대한 자료형 선언 PropsComponent.PropsType = { name: PropsType.string, }; // 상수선언 export default PropsComponent; 단방향 데이터 흐름에서 상위 에서 데이터를 내려..

콜백 지옥의 해결 객체 resolve : 성공 콜백 then 메서드로 호출 reject : 실패 콜백 catch 메서드로 호출 메서드 호출시 인자전달 가능 function sayHello(name) { //resolve 실행완료 reject 실행실패 return new Promise( (resolve, reject) => { setTimeout( () => { console.log(`내 이름은 ${name} 이야.`); resolve(`${name}`); reject(`Error`); }, 2000 ); } ); } sayHello('soomin') .then((name) => {// 실행 완료시 호출 console.log(`그래 안녕 ${name}`) }) .catch(() => { console.lo..

Exception. SyntaxError : 문법 등의 파싱에러 TypeError : 사용불가능한 변수사용 ReferenceError : 허용되지않는 참조 RangeError : 허용 숫자 범위 초과 EvalError : eval() 의 잘못된 사용 URIError : encodeURI , decodeURI 의 잘못된 사용 사용자 정의에러 등 try - catch -finally name : 에러명 message : 에러메시지 stack : 스택트레이스 Error(string) : 사용자 정의 에러. try{ throw new Error("사용자 정의 에러 발생");//사용자 정의 에러 던짐 }catch(e){ console.log(e.name); // 에러 명만 출력 console.log(e.messa..

JS 에서 모듈이란 새로운 JS 파일에서 해당 속성을 가져오기 위해 사용한다. 모듈 번들러인 Babel 없이 사용할 수 없는 듯 하다. 자바 스크립트의 모듈의 키워드 export : 내보냄을 의미한다. import : export 된 대상을 불러와 사용함을 의미한다. Export export {sayHello, name}; // 객체로 만들어 한꺼번에 export 한다. export let name = '수민'; // 해당 상수를 import 해서 사용가능 export const sayHello = (name) => console.log(`내이름은 ${name} 이야.`); // 해당 함수객체를 import 해서 사용가능 export let numbers = [1,3,5,7,9]; //해당 배열 객체를 ..

자바스크립트는 프로토 타입 기반의 언어이므로 Class 기반 언어가 아니였다. 근본은 객체지향 프로그래밍에 있다(OOP) 하나의 시스템은 속성, 동작 으로 나뉜다. 이의 시스템들이 모여 또 하나의 거대한 시스템을 이룬다. 상태는 필드 동작은 메서드 상속 으로서 다형성을 구현한다. 클래스는 객체의 설계도로 객체에 대한 정의를 나타낸다. 프로그래밍 에서 모든 것들은 객체(하나의 시스템) 으로 만들어진다. 자바 스크립트는 어떻게 정의하나. 대부분이 자바의 문법과 동일하다. 생성자는 constructor 를 사용한다. 필드선언에 변수선언 키워드를 사용하지 않는다. 메서드 재정의는 부모클래스의 시그니쳐를 그대로 덮어 씌운다. class Shape1 { static create(x,y) {return new Sha..

전개연산자는 ... 을 사용하며, 객체나 배열을 복사하여 값을 추가할 때 사용한다. 객체의 전개연산 //spread // 객체와 배열의 배부, 함수의 인자에서 사용. // 이거받고 이거 추가해 :) //거대한 객체에서 값을 추가하고 싶을때 사용한다. const student = { "name" : '김구름' } const univStudent = { ...student, "major" : '컴퓨터 공학과' } const univvvStudent = { ...student, ...univStudent, "class":'B' } console.log(student, univStudent, univvvStudent); //{ name: '김구름' } { name: '김구름', major: '컴퓨터 공학과' }..

객체나 배열의 값으로 변수를 할당하거나 필요한 값을 추출하고 싶을때 사용. : 으로 키 값을 변수에 할당하고 있다. 나머지 값에 대한 변수를 지정하면 나머지값을 가진 배열이나 객체를 할당한다. 존재하지 않는 인덱스나 키에 대한 값을 할당할 수 있다. const song = {"author":'비', "date":'2020-05-31',"title":'깡',"body":'화려한 조명이 나를 감싸네에'}; const {author, date , title ,body} = song; console.log(author, date, title, body); // 다른 변수에 할당 const {author:author1, date:date1 , title:title1 ,body:body1} = song; conso..

선언 예약어는 변수로 사용하지 않음 약어는 모두 대문자나 소문자로 사용 파일이름은 소문자 변수, 함수, 파라미터, 객체이름, 패키지이름은 CamelCase 클래스, 생성자이름은 PascalCase 들여쓰기 들여쓰기는 스페이스바 2번으로 한다. 변수 기본적으로 const 사용 변수 값에 변경이 있을 경우에만 let을 쓴다. 함수 함수의 이름이 필요할때는 const로 선언한다. 함수식은 => 화살표 함수 사용. 본문이 하나의 식으로 종결될 경우 {} return 생략 중괄호 if-else , try-catch-finally 의 블록이 비었을 경우에만 한줄로 작성 배열 배열로부터 복수개의 값을 할당 받을때는 destructuring 사용 배열을 복사할때는 spread 연산자 사용 새로운 값 할당시 push 사..