개발자가 되는 과정

JS의 메소드와 기능들 자바스크립트를 공부하면서 헷갈리거나 자주 사용하는 메서드, 새롭게 알게된 메서드, 기능 등을 정리해보았습니다. 배열 1. 배열에서 실행 const fruits = ["🥑", "🍉"]; //forEach : 배열의 항목을 순환하며 처리 fruits.forEach((fruit) => console.log(fruit)); // find : 조건 만족하는 첫번째 항목 리턴 const result = students.find((student) => student.score === 90); // some : 배열안에서 조건 통과여부 boolean 으로 반환 const result = students.some((student) => student.score < 50); // every : 배열..

Redux에 대하여 Redux란 ? 리덕스란 상태관리 라이브러리이다. 글로벌 상태관리를 할 때 효과적이며, 애플리케이션에서 상태를 보다 효율적으로 관리할 수 있게 도와준다. 리덕스 라이브러리를 설치하여 JS에서 사용할 수도 있고, 리액트 등의 도구와 함께 사용할 수도 있다. 앱이 지니고 있는 상태와 로직이 들어있는 스토어를 통해서 원하는 상태와 함수를 직접 주입하여 관리한다. 컴포넌트 끼리 상태와 로직을 주고 받는 것이 아니라 좀 더 전역적으로 분리되어 관리하는 개념이다. 다양한 로직에 따라 상태변화를 반영해야 하는 상황에서 상태를 한 스토어에서 관리하고 반영할 수 있는 장점을 가지고 있다. 상태에 변화를 일으키기 위해서는 액션(Action)을 스토어에 전달한다. 스토어는 초기에 생성해준다. 리듀서, 액..

React 성능 개선 방법 1. 리액트의 작동과 Shallow Comparison React에서의 작동 React에서는 업데이트 될 때마다 렌더링을 진행하고, VDOM에서 필요한 요소만 확인하여 실제 DOM에는 필요한 것들만 렌더한다. 그래서 업데이트 될 때마다 리액트는 렌더링이 진행되도 html 전체가 렌더링 되는 것이 아니라 필요 부분만 렌더링 되기 때문에 개선된 성능으로 렌더링되어 화면에 나타나는 것이다. 하지만, 업데이트 시 클래스형 컴포넌트 내부의 render메서드나 함수 컴포넌트등은 호출이 계속된다. 이것은 shallow comparison(얕은비교)를 시용하여 성능을 좀 더 개선할 수 있다. shallow comparison를 활용하면 object의 최상위 데이터(props나 state)가 ..

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..