고오급 개발자가 되는길

1. 객체 복사 - Object.assign({},배열) - {...배열} 2. for문 활용 - 중간에 내용을 바꾸어서 return할 수도 있다. 3. reduce 활용 - reduce 함수를 이용하여 배열을 순환 후 Object로 변경 - array.reduce(누산기, 현재값, 현재 인덱스, {초기값} ) 참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce https://codingcoding.tistory.com/1244 Array.prototype.reduce() - JavaScript | MDN reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함..

자바스크립트에서 Object를 선언하는 방법 중 value 값으로 함수* 를 넣을 수 있다. * 함수 => Object (객체) 안에서 생성된 함수여서 메소드라 부를수도 있을듯 하다. (관점 차이인가..) 1. Javascript 함수 선언 - 해당 fullName key 값의 value로 함수를 지정하여 사용할 수 있다. 2. 화살표 함수 선언 - ES6 버전의 화살표 함수로 value 값에 함수를 선언 할 수 있다. - 화살표 함수로 선언 시 해당 함수의 this는 window 객체를 바라봄으로 내부에 있는 변수 사용 시 객체명.key 값을 사용해야한다. 참조 : https://www.w3schools.com/js/js_object_methods.asp JavaScript Methods JavaScr..

벨로퍼트 블로그 정리 리덕스 모듈 - 특정 기능을 구현하기 위하여 필요한 액션과, 액션 생성함수와, 초기값, 리듀서 함수가 들어있는 파일 src/store/modules/counter.js ```javascript // 1. 액션 타입 정의하기 const CHANGE_COLOR = "counter/CHANGE_COLOR"; const INCREMENT = "counter/INCREMENT"; const DECREMENT= "counter/DECREMENT"; // 액션 이름을 지을 떄 문자열의 앞 부분에 모듈 이름을 넣는데 이는 다른 모듈 작성 시 다른 액션과 충돌되지 않게 하기 위함 // 2.액션 생성함수 정의 export const changeColor = color = > ({ type : CHAN..

1.Provider - Component에서 Redux를 사용하기위해 제공해주는 컴포넌트 ```javascript import {Provider} from 'react-redux' ``` connect([..options]) - 컴포넌트를 REDUX에 연결하는 또다른 함수를 반환 - connect()(Counter) -> store에 연결 된 새로운 컴포넌트 클래스가 반환됨 -> 옵션이 없으면 this.props.store로 접근 가능 ex) connection ( [mapStateToProps], [mapDispatchToProps], [mergeProps], [options] // {[pure=true],[withRef = false]} )

React 상태관리 1. Context - 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 의 컴포넌트에 있는 state,prop의 정보를 컴포넌트를 거치지 않고 에게 바로 전달 해줄 수 있다 주의) context 사용시 컴포넌트를 재사용하기 어려워질 수 있다. 사용법 const MyContext = React.createContext(defaultValue) or import {createContext} from 'react' const MyContext = createContext(defaultValue) // defaultValue는 트리 안에서 적절한 Provider를 찾지 못했을 때만 쓰이는 값 사용할값 : { name : "LEE" age : 2..

React Hooks란? - function(함수)형 컴포넌트에서 사용할 수 없었던 라이프 사이클 및 state 형태를 사용하게 해주는 JS 라이브러리 1. useState - 함수형 컴포넌트에 state를 추가할 수 있다 - 선언된 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지한다. • 사용법 const [state,setState] = 1. useState('초기값') // 배열 구조 분해 형식으로 선언 2. useState(() => {const initialState = 함수(props) return initialState }) setState("state 값을 변경할 값") // class 컴포넌트에서 this.setState 형식과 동일 //비동기식으로 선언시 두번째 인자에서 실행할 ..

RestFull 1)Axios axios는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행합니다. 내부적으로 AXIOS는 직접적으로 XMLHttpRequest 를 다루지 않고 “AJAX 호출”을 할 수 있습니다. axios("API 주소") { method : "GET,POST,PUT,DELETE" setTime : 4000 (로딩시간) } .then( res => { // 정보의 값이 들어가 있다 this.setState({ state 값 : res.data }) }) .catch(err => { this.setState({ errMsg : err 머시기 }) } 2)Fetch

컴포넌트 생명주기 (Component Life Cycle) - 컴포넌트가 생성되고 소멸되기까지의 생명 주기를 컴포넌트 라이프 사이클이라 한다 - 2020/03/01 기준 16.12 Version 1.Mounting 컴포넌트 실행시 처음 화면을 보여주는 단계 1-1) constructor() - 컴포넌트 생성 시 처음 실행되는 이벤트 - 주로 기본 State 및 초기 변수를 설정 - 이벤트 안에 super(props) 선언 1-2) getDerivedStateFromProps(prevProps, prevState) - props,state 값이 변할 때 마다 적용 후 렌더링 해주는 이벤트 1-3) render() - 실제 화면에 컴포넌트를 보여주는 이벤트 1-4) componentDidMount() - 렌..

React 란? - ES6를 사용하는 자바스크립트 기반 라이브러리 - DOM과 Virtual DOM을 비교하여 전체를 비교하는 것이 아니라 바뀐 값만 화면을 렌더링 하여 화면 호출 속도 향상 - 각 Component로 화면을 구성한다 - 화면 구성 시 화면 태그를 반드시 열고 닫아야 한다 Ex) ~~ ~~ ~~ - 화면 태그를 열고 닫지 않으려면 라이브러리 사용 ~~ ~~ ~~ 1. Component - UI를 구성하는 기본 단위 - 화면 전체가 될 수도 있고 기능 단위로 Component를 구성할 수 있다. 1-1) Class 형 컴포넌트 - 일반적으로 생성되는 컴포넌트 Ex) class 컴포넌트명 extends Component { props,state,route,axios,lifecycle 등등 }..