개인 공부 정리 4

리액트 정리 3(24/06/25)

리덕스란 무엇일까?개념리덕스란? 자바스크립트 애플리케이션에서 상태 관리를 단순하게 해주는 라이브러리- 컴포넌트간 상태 공유가 간편해짐- 리액트 및 그 외의 자바스크립트 프레임워크나 라이브러리와도 사용가능 리덕스의 핵심 개념스토어 : 애플리케이션의 상태가 저장되는 곳으로 상태를 읽거나 업데이트하는 방법을 제공액션 : 상태에 어떤 변화가 필요할 때 발생하는 이벤트, 자바스크립트 객체로 type필드를 가짐리듀서 : 액션이 발생했을 때 상태 변경 함수 이전상태와 액션을 인자로 받아 새로운 상태 반환디스패치 : 액션을 스토어에 전달하는 함수(store.dispatch(action)과 같은 형식으로 사용)구독 : 상태가 변경될 때마다 특정 함수를 실행하도록 하는 메서드(store.subscribe(listener)..

리액트 정리 2(24/06/25)

비동기처리 다루기1.  비동기 처리란?비동기 처리를 하는 이유?동기(Synchronous)란 요청과 응답을 받는 시기가 일치한다는 것- 요청을 처리하는 속도는 작업마다 모두 다를 수 있기 때문에 비동기(Asynchronous)가 필요함비동기란?비동기(Asynchronous) 작업을 기다리고 있지 말고 그 동안 처리할 수 있는 일을 해놓는 것을 의미함 * 요청한 내용을 언젠가 응답해 주겠다고 약속(Promise)를 해놓은 상태에서 그럼 다른 일을 먼저 하자는 것. JS에서 비동기작업을 하는 방법?비동기작업의 방법들다양한 방법이 있지만 이번에 설명 할 3가지 방법은- Callback (함수)- Promise (객체)- async / await (키워드)다음과 깉이 있다. 1. 콜백함수- 콜백함수란? 나중(특..

리액트 정리 1(24/05/03)

리액트에 관해서리액트는 다양한 곳에서 사용을 하는 만큼 기업에서도 자주 사용하는기술 중 하나이다.리액트와 비슷한 라이브러리는 Vue, Svelte, Preact, SolidJS 등이 있다.그래서 이제부터 소개 하는 내용은 리액트에 관한 내용의 정리이다.리액트의 특징- 컴포넌트 기반의 UI 자바스크립트 라이브러리- SPA(Single Page Application)를 쉽고 빠르게 만들수 있도록 해주는 도구※ MPA는 페이지를 여러개 만들어야 하지만 SPA는 페이지는 하나 콘텐츠 여러개로 만든다. 리액트 18에서 달라진점상태 업데이트(setState)를 하나로 통합해서 배치처리를 하고 리렌더링을 진행함리렌더링 관련 성능 개선자동 배치를 수행하여 마지막에 한 번만 렌더링 가능하게 함새로운 훅을 지원함수형 컴포..

리액트에서 코드 가독성을 높이는 방법

왜 이런 주제로 공부 하였는가?리액트를 공부를 하는데 내 코드에 밑의 3가지 문제가 느껴졌다.1. 최근에 리액트를 배우면서 코드가 더럽다고 느껴졌다.2. 같은 내용이 반복되어 오히려 읽기 어려웠다.3. 가독성이 떨어져 내가 왜 이런 코드를 만들었는지 헷갈렸다. 이것을 보니 앞으로 현장에서도 실습 할 기회가 있을텐데 다른 사람들과협업을 하는 순간에도 이런 코드라면 협업하기 힘들 것이라 생각해 공부하였다. 그래서 코드 가독성을 높이는 방법은?내가 생각한 중요한 키워드나는 이 주제로 공부를 하기 위하여 검색을변수명, JS, 들여쓰기, 중복된 코드, 정리 등의 키워드를 활용하여 검색을 하였다.가독성을 높이는 방법변수명변수명을 작성하면 나는 기본적으로 a, b, c 같은 간단한 이름을 쓰던지name1, name2..