기본 콘텐츠로 건너뛰기

[ 리덕스(Redux)에 대해 알아보자! ] - Redux 초급

[ 리덕스(Redux)에 대해 알아보자! ] - Redux 초급

안녕하세요.

프렛입니다.

오늘은 Redux에 대해 알아보겠습니다.

자, Redux는 기본적으로 JavaScript application들의 state(상태)를 관리하는 방법입니다.

Redux => Javascript application들의 state(상태)를 관리하는 방법 * Javascript이지, React에만 종속되어있는 것이 아닙니다. *

Redux는 React와 별개입니다.

Redux는 Angular에서도 쓸 수 있고, Vue.js에서도 쓸 수 있고,

Vanilla Javascript(framework가 없는 pure한 JS)에서도 쓸 수 있고,

원하는 한 모든 Javascript application에서 모두 쓸 수 있다는 말이죠!

하지만,

Redux는 사람들이 React와 많이 사용을 하므로써, 매우 유명해졌기 때문에,

React에만 쓸 수 있는 라이브러리라고 착각하는 경우가 많죠!

뭐, 덕분에 그래서 Redux가 많이 유명해지긴 했지만요,

그러나, Redux는 앞서 말씀드린 것과 같이,

React에만 의존하는 라이브러리가 아닙니다.

이 Redux에 대한 글에서는 첫번째로,

Redux를 normal한 Javascript application에서 우리 힘으로 vanilla javascript로 application을 만드는 방법을 알아보겠습니다.

그래서 이 글에서는,

React를 예제로 다루지 않으며,

Redux를 Vinilla Javascript와 사용하는 법에 대해서 알아보겠습니다.

그리고 난 후, Redux를 React와 함께 사용하는 방법에 대해 알아보겠습니다.

많은 사람들이 Redux를 배울때,

보통 사람들이 배우라고 해서 배우거나, 그냥 많이들어봐서 배우곤 합니다.

사실, 아주 적은 사람들이 Redux가 정확히 무슨 문제를 해결하는지 알고 배우죠.

그래서 저도 그렇고,

이 글을 보시는 분들도 그렇고

Redux가 왜 만들어졌으며, Redux를 사용하면 좋은 이점들에 대해 경험해보도록 해요.

처음으로,

application을 Redux없이 실행해보고,

그리고 Redux를 그 아이디어에 더해보는 방식으로 진행해보도록 하겠습니다.

그래서, Redux가 어떻게 우리가 만드려는 것을 향상시키는지 보도록 하겠 습니다.

( Redux가 왜 만들어졌고, 왜 Redux를 사용해야 되는지,

그리고 Redux가 application을 어떻게 향상시키는지 우리 함께 이해해보도록 합시다. )

시작하기 위해서는,

google chrome(browser), github(version control), node.js

가 필요합니다.

다음 글에서 다시 만나요,

from http://well-kiim.tistory.com/45 by ccl(A) rewrite - 2020-03-13 18:20:28

댓글

이 블로그의 인기 게시물

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기

[aws] deploy Angular app with s3 | AWS S3로 angular 앱 배포하기 angular project를 빌드한다 ng build --prod 그러면 dist 폴더가 생긴다. dist 폴더 안에 있는 아이들을 사용한다. 아마존 s3 콘솔로 이동 https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-2 새로운 Bucket 을 생성한다(Create bucket). 버킷 이름은 고유하게 짓는다. 버킷 생성후 properties tab > static website hosting을 클릭한다. index document는 index.html은 쓴다. properties > static website hosting Permission tab 에서 권한을 수정한다. overview tab 에서 필요한 파일 업로드 dist 폴더 안에 있는 파일들을 업로드 한다. bucket policy 설정 properties > static website hosting > endpoint 클릭하면 서버에 올라간 앱을 확인 할 수 있다 일단 angular 앱을 올리긴 했는데.. 이걸로는 아무것도 할 수 었다. django로 만든 서버를 올리고 database를 연결하고 그것을 지금 이 angular 앱과 연결해야한다. 아직 어떻게 해야 할지는 모르겠음 계속 삽질 중. 그래도 angular app 하나 올라갔는데 재밌네 from http://paigeblog.tistory.com/18 by ccl(A) rewrite - 2020-03-25 16:20:22

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a...

[Debugging] AngularJS2 - Can't bind to 'ngModel' since it isn't a... - 좋아요 하이 .. !! Angular2 로 개발을 하다가 아래와 같은 에러를 만났다. 흠 .. 이게 뭘까 열심히 구글링을 해봤다. 간단한 내용이다. 모듈을 추가해주기만 하면 된다. app.module.ts를 열어보자. 여기에다가 FormsModule 과 ReactiveFormsModule을 추가해주면 문제가 해결된다 ! 다들 즐거운 코딩하자. from http://devkingdom.tistory.com/106 by ccl(A) rewrite - 2020-03-18 00:54:15

Angular Lazy-loading-ngmodules 사용해보기

Angular Lazy-loading-ngmodules 사용해보기 재미있는 프레임워크공부/Angular 2+ Lazy-loading-ngmodules를 사용하는 이유 SPA(Single Page Application)의 단점인 초기 구동 속도를 Angular로 피해갈 수는 없다. 프로젝트가 커지면 커질 수록 더 초기 구동 속도가 느려질 것이다. 그래서 이번 시간에는 초기 구동 시 전체 모듈을 불러오지 않고 관련한 모듈 페이지 로딩 시 불러올 수 있게 구글에서 만들어 놓은 Lazy-loading-ngmodules에 대해 알아보자. Lazy-loading-ngmodules를 먼저 알기 전 Angular route 기능에 대해 이해하고 들어갔으면 좋겠다. 자 그럼 이제 시작해보자. 1. app-routing (root)를 위한 app-routing.module.ts 를 만들어 보자 만약 새로운 프로젝트를 시작한다면 아래의 명령어를 치면 module을 자동적으로 생성해준다. ng new (프로젝트 이름) --routing 기존에 프로젝트에 적용하려고 한다면 app-routing.module.ts를 만들고 그 안에 아래의 내용들을 집어 넣는다. import { NgModule } from '@angular/core' ; import { Routes, RouterModule } from '@angular/router' ; const routes : Routes = []; @ NgModule ({ imports: [RouterModule. forRoot (routes)], exports: [RouterModule] }) export class AppRoutingModule { } CLI을 이용하면 자동적으로 AppModule에 import 되지만 직접 생성하였기 때문에 AppRountingModule을 app.module.ts에 import 해준다. 2. 이제 서브 라우팅을 생성하기 위해 새로운 ...