[React/Redux] Reduser 작업하기

프로젝트에서 필요했던 react 관련 내용을 정리합니다 Redux : js App을 위한 state container (react, augular, jQuery, vanillaJS등의 framework와도 작동) : action에 반응하여 상태를 변경함 (UI 상태에 대한 함수 기술 framework, 즉 리액트와 잘 어울림) 1. React에서 Redux가 필요한 이유 react에서 Component와 Application은 각각 다음의 state를 가진다 Component: local state, Application: global state 프로젝트 규모가 커지며 Component의 수가 늘어나면 local state의 전달이 어렵다 data전달시 필요없는 data의 흐름이 생긴다 data전달이 잘..

• format_list_bulleted ETC
• · 2022. 1. 17.
• textsms

[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

[Git] 깃 명령어 정리

최신수정일 22.02.14 왜 명령어를 다시 정리하냐면. 실무와 팀프로젝트에서 본격적으로 깃을 통한 협업이 들어가는데 개인 레포지토리를 관리할 때랑은 알아야 할-자주 쓸 명령어가 따로있다. 따라서 경험상 필수적인 명령어 위주로 나 좋으라고 다시 정리한다. 지속적으로 추가 예정 진짜 완전 기본 명령어 명령어 설명 $ git clone [원격/로컬 경로] 작업할 레포지토리 이리와라, (origin이란 리모트 저장소 자동 등록) $ git add [파일경로] - [파일경로]에 해당하는 [변경파일]만 스테이징 $ git add . - 모든 [변경파일]을 스테이징 $ git commit -m "[메시지내용]" 커밋 생성, 커밋내용 확정 $ git push 커밋 전송 더 디테일한 기본 명령어 명령어 설명 $ git..

• format_list_bulleted ETC
• · 2022. 1. 11.
• 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