개발자가 되는 과정

1. JS Event Event 모든 element는 node를 상속하고 모든 node는 Event를 상속한다. 즉, 모든 엘리먼트는 eventTarget이다. 1. 자주 사용되는 이벤트 - mouse : click, mousemove, contextmenu - window : resize, scroll - form : submit, reset, change, focus, blur 다양한 이벤트 종류들 MDN event.preventDefault() : 이벤트가 가지고 있는 기본기능 취소 (자주 사용되는 예시 : submit의 reload되는 것을 방지함) 2. 3가지 event Methods EventTarget.addEventListener() : EventTarget에 특정 이벤트 처리기(handl..

React _ API를 사용하여 외부 데이터 받아오기 1. DI (Dependency Injection) DI란? 의존성 주입이라고 불리며, 의존하는 객체를 분리하여 주입한다. 기존에 a의 내부에 있는 b는 c,e 등에 관계 의존성을 가지고 있다. 하지만, 의존성주입을 사용하여 b를 a로 부터 분리하여 주입하면(의존관계 역전, 의존성의 분리) c,e는 a에 주입된 b와 관계성이 형성되므로 b자체 보다는 a와의 관계에 신경쓰면 된다. DI의 장점 (기능 단위로 분리된다) 테스트가 용이하다 코드의 재사용성을 높여준다 객체 간 결합도를 줄여준다 가독성이 좋아진다 활용 외부와 통신하는 API를 연결할 때, 그 역할만 수행하는 클래스를 생성하여 따로 관리가 가능하다. 따라서, 여러 API를 추가하거나, 수정시 분..

React - LifeCycle and Hooks 1. LifeCycle 리액트에서는 컴포넌트가 처음 나타날때 및 변경될 때마다, render를 다시 한다. render 되는 과정을 나타내는 것이 lifecycle이다. 가장 많이 사용하는 lifecycle의 단계 componentDidMount : 컴포넌트의 인스턴스(데이터)가 생성되어 DOM 상에 삽입되어 렌더링 된 후 : fetching, animation, subscribing(구독) componentDidUpdate : props 또는 state가 변경되어 다시 렌더링 된 후 : condition을 넣어주지 않으면 무한반복됨 componentWillUnmount :컴포넌트가 DOM 상에서 제거될 때 : unsubscribing(구독해제) life..

리액트를 사용하는 이유 UI를 생성하는데 있어 버그를 최소화하기 위함 UI의 구성요소를 component 요소로 쪼개어 각각이 논리적 역할을 하여 UI 디자인에 더 집중할 수 있게 함 주요개념 : Components and Props Components는 UI를 독립적이고, 재사용가능한 요소로 쪼갠 것 component는 import, export를 통해 연결 Class component (js 내용 참고) Function은 호이스팅이 되지만 Class는 호이스팅이 되지 않음 렌더할 내용을 render(){ ... } 내부 메서드를 통해 return 해줌 state, lifeCycle 관련 사용가능 this.props, this.state 등 this를 붙여 사용 constructor 내부에 super(..