[React] 라이브러리/모듈/함수 정리 (update:22.01.17)

React로 진행한 프로젝트 내에서 공부가 필요했던 라이브러리를 정리합니다. React 라이브러리/모듈/함수 정리 모듈명 설명 참고주소 pender 1. 프로미스 기반 액션들을 관리하기 위한 미들웨어와 도구가 포함된 라이브러리 2. redux-promise-middleware와 유사함 3. payload에 프로미스가 있으면 이 프로미스가 시작하기 전, 완료, 실패 했을 때 뒤에 PENDING, SUCCESS, FAILURE접미사를 붙여줌 4. 요청들을 관리하기위한 reduser와 요청관련 액션들을 처리하기 위한 액션 핸들러 함수들을 생성해주는 도구가 있음 https://redux-advanced.vlpt.us/2/04.html pender의 type 속성 pender에 type이 주어지면 type에 접미..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 1. 17.
• textsms

[React] 5: 라우터, 싱글페이지 앱 구축, TodoList-App제작

React에 대한 개인학습을 기록합니다. 체크리스트 ☑ TITLE ✔ 연습용 레포 생성 ✔ 리액트 개요 확인 ✔ JSX다루기 ✔ 리액트 컴포넌트 ✔ 리액트 스타일링 ✔ 컴포넌트 복잡하게 다루기 ✔ 속성 전달 ✔ JSX 복잡하게 다루기 ✔ 상태 다루기, 카운터 설정 ✔ 데이터를 UI로 불러오기 ✔ 이벤트 다루기 ✔ 컴포넌트 생명주기 (생명주기 메소드) ✔ DOM 엘리먼트 접근하기 ✔ 라우터를 통한 싱글 페이지 앱 구축 ✔ Todo list 앱 제작 ✔ 리액트 개발 환경 구성 13. 싱글페이지 앱 제작하기 SPA에선 완전히 새로운 페이지가 로딩될 일이 없다. 동일한 페이지 안에서 인라인으로 뷰가 로딩된다 13.1. SPA(Single page app)의 기대사항 주소 표시줄에 보이는 URL은 항상 현재 보고..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 1. 9.
• textsms

[React] 4: 이벤트, 생명주기, DOM

React에 대한 개인학습을 기록합니다. 체크리스트 ☑ TITLE ✔ 연습용 레포 생성 ✔ 리액트 개요 확인 ✔ JSX다루기 ✔ 리액트 컴포넌트 ✔ 리액트 스타일링 ✔ 컴포넌트 복잡하게 다루기 ✔ 속성 전달 ✔ JSX 복잡하게 다루기 ✔ 상태 다루기, 카운터 설정 ✔ 데이터를 UI로 불러오기 ✔ 이벤트 다루기 ✔ 컴포넌트 생명주기 (생명주기 메소드) ✔ DOM 엘리먼트 접근하기 라우터를 통한 싱글 페이지 앱 구축 Todo list 앱 제작 리액트 개발 환경 구성 10. 이벤트 : 모든 제스처나 상호작용 촉발을 가능하게 하는 접합체 10.1. 예제시작하기 10.1.1 시작 파일 10.2. 이벤트 속성 이벤트는 이벤트 핸들러의 인자로 전달됨 이벤트 인자에는 종류에 따른 한 뭉탱이 속성들이 존재 일반적 DOM..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 1. 9.
• textsms

[React] 3: 속성과 JSX, 상태 다루기, 카운터 설정, 데이터 불러오기

React에 대한 개인학습을 기록합니다. 체크리스트 ☑ TITLE ✔ 연습용 레포 생성 ✔ 리액트 개요 확인 ✔ JSX다루기 ✔ 리액트 컴포넌트 ✔ 리액트 스타일링 ✔ 컴포넌트 복잡하게 다루기 ✔ 속성 전달 ✔ JSX 복잡하게 다루기 ✔ 상태 다루기, 카운터 설정 ✔ 데이터를 UI로 불러오기 이벤트 다루기 컴포넌트 생명주기 (생명주기 메소드) DOM 엘리먼트 접근하기 라우터를 통한 싱글 페이지 앱 구축 Todo list 앱 제작 리액트 개발 환경 구성 6. 속성다루기 6.1. 나쁜, 짜증나는 방법 하나 목적지로 향하는 경로에 있는 모든 컴포넌트들기 각 속성에 접근하고 재정의 해 전달하는 것. 6.2. 해결책: 스프레드 연산자 var items = ["1", "2", "3"]; // 배열 선언 및 초기화 ..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 1. 6.
• textsms

[React] 2: 컴포넌트 스타일링, 컴포넌트를 보다 복잡하게 다루어보기

React에 대한 개인학습을 기록합니다. 체크리스트 ☑ TITLE ✔ 연습용 레포 생성 ✔ 리액트 개요 확인 ✔ JSX다루기 ✔ 리액트 컴포넌트 ✔ 리액트 스타일링 ✔ 컴포넌트 복잡하게 다루기 속성 전달 JSX 복잡하게 다루기 상태 다루기, 카운터 설정 데이터를 UI로 불러오기 이벤트 다루기 컴포넌트 생명주기 (생명주기 메소드) DOM 엘리먼트 접근하기 라우터를 통한 싱글 페이지 앱 구축 Todo list 앱 제작 리액트 개발 환경 구성 4. Rreact 스타일링 4.1. 개요 4.1.1. CSS(cascading Style Sheets)에 대하여 콘텐츠와 프레젠테이션 사이를 잘 분리할 수 있음 셀렉터(selector)문법을 통해 스타일 적용과 건너뛸 엘리먼트를 유연하게 선택하도록함 4.1.2. 리액트가..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 1. 5.
• textsms

[React] 1: JSX, 리액트 컴포넌트

React에 대한 개인학습을 기록합니다. 체크리스트 ☑ TITLE ✔ 연습용 레포 생성 ✔ 리액트 개요 확인 ✔ JSX다루기 ✔ 리액트 컴포넌트 리액트 스타일링 컴포넌트 복잡하게 다루기 속성 전달 JSX 복잡하게 다루기 상태 다루기, 카운터 설정 데이터를 UI로 불러오기 이벤트 다루기 컴포넌트 생명주기 (생명주기 메소드) DOM 엘리먼트 접근하기 라우터를 통한 싱글 페이지 앱 구축 Todo list 앱 제작 리액트 개발 환경 구성 1. 리액트 개요 1.1. React 등장 이전, UI 제작 경향 1.1.1. 기존의 멀티 페이지 앱- 여러 개의 개별 페이지로 구성됨 앱의 상태관리에 매우 좋음 쿠키를 통한 사용자 데이터 저장과 서버 측 매커니즘(그것도 약간)을 제외하면 신경 쓸 게 없음 1.1.2. 최근 싱..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 1. 5.
• textsms