주니어개발자성공하자

👉 장점 로직을 재사용할수 있다 관리가 용이하다 함수안에 다른 함수를 호출하여 새로운 hook을 만들수있다. 기존 class component는 여러단계의 상속으로 이루어져 복잡성과 오류가능성을 증가시켰다. function component는 클래스 컴포넌트가 가지고있는 기능들을 모두 사용할수있고 복잡성과 재사용성의 단점들을 해결했다

👉 의미 리액트의 컴포넌트 트리에서 데이터를 하위 컴포넌트로 전달하기위해 필요한 과정 👉 단점 예를들어 우리가 app.js에서 데이터를 하위컴포넌트까지 쭉 전달하면 데이터가 변경되었을때 하나하나 고쳐야하는 불편함이 발생 👉 해결방안 전역상태관리 라이브러리(redux,mobx...)를 사용하여 데이터가 필요한 컴포넌트에서 직접 데이터를 불러와 사용

👉 이유 state는 불변성을 유지해야 합니다. 컴포넌트는 setState를 비교하여 업데이트가 필요한 경우에만 render함수를 호출하는데 state를 직접 변경하게 되면 render함수를 호출하지 않아 상태가 변경이 되었다 하더라도 렌더링이 일어나지 않을 수 있습니다.

👉 재조정 (Reconciliation)이란? React는 실제 DOM을 직접 제어하지 않고 중간에 virtual DOM을 두어 virtual DOM이 변경이 되었을때 실제 DOM을 갱신하도록 설계되어있습니다. 👉 virtual DOM을 갱신하는 방법 setState() 메소드를 호출 전역 상태 관리 라이브러리 ( redux,mobx ... ) store 데이터가 변경 위 두가지의 행동이 일어났을때 최상위 컴포넌트의 render() 함수를 호출해서 렌더링이 일어납니다

👉 개념 React는 UI를 구축하기 위한 프론트엔드 라이브러리입니다. 주로 SPA를 작성하는데 사용합니다 👉 장점 virtual DOM을 사용하여 어플리케이션의 성능을 향상 CSR이 가능 다른 프레임워크와도 같이 사용이 가능 컴포넌트의 가독성을 높이고 유지보수가 쉽습니다 👉 컴포넌트란? 레고블럭처럼 기능들을 작은단위로 만들어 그것을 조립하는 것처럼 개발하는 방법 캡슐화, 재사용성, 확장성, 결합성과 같은 이점이 있다.

👉 바벨이란? 모든 브라우저가 최신 자바스크립트 문법을 이해하지 못해서 바벨이 브라우저가 이해할 수 있도록 변환해준다 파싱 - 변환 - 출력 단계로 빌드를 진행한다. 코드를 읽고 추상 구문트리로 변환, 변경하여 나온 결과물을 출력한다. 바벨은 파싱, 출력을 담당하고, 변환은 플러그인이 담당한다. 바벨 플러그인은 바벨이 어떤 코드를 어떻게 변환할지에 대한 규칙을 나타낸다. 👉 폴리필이란? 최신 ECMAScript 환경을 만들기 위해 코드가 실행되는 환경에 존재하는 않는 빌트인, 메서드 등을 추가하는 역할 바벨을 ES6+를 ES5로 변환할수있는것만 변환하는데 Promise같이 변환할 수 없는 경우 에러가 발생한다. 이런 경우 폴리필을 통해 해결할 수 있다. 👉 Node.js이란? 자바스크립트가 구동되는 환경..

👉 동기와 비동기 동기 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 모든 일이 순차적으로 실행된다. 비동기 요청을 보낸 순서와 상관없이 또 다른 동작이 요청하고 이루어지는 방식이다. 모든 일이 병렬적으로 실행된다. 👉 Callback과 Promise, Async & Await Callback 나중에 호출할 함수이다. 함수를 중첩적으로 사용하게 되면 콜백 헬이 발생하여 가독성이 떨어진다. Promise 동작 후에 어떤 종류의 결과가 반환됨을 약속해주는 Object이다. ES6부터 콜백의 단점을 보완했다. 실행이 성공하면 resolve를 반환, 실패하면 reject를 반환하여 결과를 알려준다. then과 catch를 사용하여 접근이 가능하다. Async & Await 기존 비동기 처리..

👉 이벤트 버블링 - Event Bubbling 특정 요소에서 이벤트가 발생했을 때 이벤트가 더 상위 요소들로 전달되어 가는 특성 자식에서 부모로 전파 👉 이벤트 캡쳐링 - Event Captureing 특정 요소에서 이벤트가 발생했을 때 이벤트가 하위 요소들로 전달되어 가는 특성 부모에서 자식으로 전파 이벤트 버블링과 이벤트 캡쳐링은 반대의 개념이다. 👉 이벤트 위임 - Event Delegation 하위 요소에서 이벤트를 관리하지 않고, 상위 요소에서 하위 요소의 이벤트를 관리하는 방식

👉 로컬 스토리지, 세션 스토리지, 쿠키 로컬 스토리지와 세션 스토리지는 HTML5에 추가된 저장소로 key - value 형태로 구성되어 있고, 차이점은 영구성에 있다. 로컬 스토리지는 사용자가 지우지 않는 한 데이터가 브라우저에 영구적으로 남아 있지만, 세션 스토리지는 세션을 종료하면 데이터가 삭제된다. 로컬 스토리지, 세션 스토리지 이전에 저장소 역할을 했던 것이 쿠키이다. 쿠키는 만료기한이 존재하는 key - value형태이다. 👉 로컬 스토리지 & 세션 스토리지 값으로는 문자열, 숫자, 불린 등을 저장할 수 있지만 모두 문자열로 저장된다. 사용법은 둘다 아래와 같다. localStorage를 sessionStorage로 변경하면 된다. localStorage.setItem(키, 값) // 저장 ..

리덕스란? Javascript 상태관리 라이브러리이다. 리덕스의 기본 개념 : 세가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳에서 호출한다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다 2. State is read-only 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다 리덕스에서도 액션이라는 객체를 통해서만 상태 변경이 가능하다 3. Changes are made with pure functions 변경은 순수함수로만 가능하다 리듀서와 연관되는 개념이다. Store - Action - Reducer Store 란? 상태과 관리되는 오직 하나의 공간이다. 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 필요한 상태를 담는다 컴포..