Redux

Redux

Redux

| 공개

 

 

 

수업소개

예측 가능한 애플리케이션의 상태 저장소인 Redux를 다루는 수업입니다. 이 수업에서는 순수한 웹기술인 HTML, JavaScript와 Redux만을 이용해서 웹애플리케이션을 만들어 볼 것입니다. 

 

이 수업은 아래와 같은 내용을 다루고 있습니다. 

  • Redux의 동작 방법
  • Redux를 사용하는 이유
  • Redux를 이용해서 할 수 있는 일들
    • 시간 여행 디버깅
    • 로깅

아래 내용은 다루고 있지 않습니다. 

  • Redux 미들웨어
  • React-redux 

 

 

 

수업대상

리덕스를 이용해서 더 단순한 코드로 더 복잡한 애플리케이션을 만들고 싶은 분에게 추천합니다. 참고로 자바스크립트 초급자에게는 필요하지 않은 도구입니다. 초심자라면 Redux가 무엇인지 정도만 아시고, 나중에 필요할 때 사용하시는 것을 추천 드립니다. 

 

 

 

예제

아래와 같은 애플리케이션을 Redux로 제작해보는 것입니다. 

https://egoing.github.io/redux-tutorial-example/main.html

소스코드

 

 

 

수업을 보는 다른 방법

생활코딩 Redux Youtube 재생목록

 

 

 

수업에 참여조건

이 수업을 듣기 위해서는 아래와 같은 선행 지식이 필요합니다. 

전체 지식의 맥락은 아래 지식 지도 서말을 참고해주세요.

 

 

 

전체 재생시간

총 18개의 영상으로 이루어진 2시간 16분 분량의 수업입니다. 

 

 

 

수업의 저작권 정책

이 수업은 CCL 라이선스 BY를 따르고 있습니다. 이 수업의 출처를 표시해주신다면 컨텐츠의 수정을 할 수 있고, 상업적인 용도로도 사용할 수 있습니다. 상업적인 용도로 사용하는 경우는 거래 관계가 없다는 것을 인지 가능하도록 표시해주셔야 합니다. 

 

 

 

컨설팅 / 교육 문의

git과 관련된 컨설팅/교육 문의는 로 연락 주세요. 기술 관련된 질문은 이메일과 같은 사적인 방법 보다는 댓글이나, 커뮤니티를 이용해주시면 모두에게 더 좋은 결과를 얻을 수 있습니다. 

 

 

 

 

댓글

댓글 본문
  1. aivyss
    [기술스택]
    Java -> Spring / JSP
    Python -> Django
    Javascript -> jQuery ->Node -> React -> React_Router -> Redux
    Oracle DB, MySQL

    redux 시작합니다.
    답글
  2. jeisyoon
    2021.06.06 Redux - Start
    답글
  3. 한규문
    강의 정말 감사합니다. 잘들었습니다.

    title, desc 작성 후 제출 submit 버튼 클릭 시 selected_id 넘버가 변경되는 부분이 빠져있네요 ㅎㅎ.
    (글 생성후 read 행위를 하지 않고 바로 삭제후 글다시 생성 시 content div에 undefined 출력 => default 2번삭제대고 나서 selected_id에 값이 없게됨.)

    reducer의 action.type === 'CREATE' 부분에서 selected_id를 newMaxId로 변경시키는 코드 추가해 해결하였습니다 ^ㅡ^

    else if(action.type === 'CREATE') {
    var newMaxId = state.max_id + 1;
    var newContents = state.contents.concat();
    newContents.push({id:newMaxId, title:action.title, desc:action.desc})
    newState = Object.assign({}, state, {
    max_id: newMaxId,
    selected_id: newMaxId, // 여기!!
    contents:newContents,
    mode:'read',
    })

    명강의 감사합니다 ~!
    답글
  4. 별뿌리
    Redux를 완강?하고서 글을 남깁니다.

    이번 Redux 강의 후 느낀 것은 Redux의 역활은
    data(=state)의 전역성?과, dispatch,subscribe를 통한 Observer pattern 이 아닌가 생각 됩니다.
    바쁘시겠지만, 제가 틀렸으면, 아니라고 댓글 부탁드립니다. ^^;;


    더하여, 요즘, 인프런에서 선생님의 여러 강의를 듣고 있습니다.

    PC(Window)에서만 개발을 해오다가, Network, Mobile로 이동하고 싶어서,
    Javascript, React/Native, Redux, CSS 등 을 공부 하려 했으나,
    여러 사정(본인이 게을러서.. 머리도 안좋고 ... )으로 잘 이루지 못하였었습니다.

    그런데, 선생님의 강의 덕분에, 위 목록을 조금 이해 하고, 사용 할 수 있을 정도는 된 것 같습니다.
    선생님의 명강의에 감사드립니다.




    한가지 궁굼 한 것이 있습니다.
    Redux에서 List 에 항목 추가 시, Traceability 를 위해서,
    복제된 새 Object 를 reducer에서 제공(리턴) 한다는 것은 그렇수 있다고 이해 되었었습니다.

    그런데, 만약, State로 관린 되는 데이터 중 List 가 있고, List의 항목이 엄청 많은 상태에서,
    1개 항목 추가를 위해서, List를 새로 만들어서, 관리 한다는 것은 조금 비효울 적인 것이 아닌가? 하는 생각 이 듭니다.

    아직 테스트 해본 상태 는 아닙니다. 나중에 테스트 하면, 다시 한번 댓글 남겨 보도록 하겠습니다.


    한가지 더 말씀드리면,
    React에서 인가, function().bind(this) 부분에 대해서,

    저의 생각을 조심스럽게 말씀 드려보고 싶습니다.
    정보를 찾아 본 것은 아니지만(제가 찾아봐도 뭔소리 인지 모르겠지만요 ㅠㅠ)
    그동안 해온 감각? 적으로 보면, ( 서론이 길었습니다.... 죄송합니다.)

    function은 class의 멤버 함수가 아닌 다음에야, this라는 것을 사용 할 수 없다고 알고있습니다.
    기본 적으로 전역 자원이기 때문입니다.
    그래도, js 에서는 function 이 객체화되어 (메모리에서)관리 되므로,
    관련 function.props? 같은 곳에 bind함수를 통해서, 전달 받은 this를 보관하여, 사용 하는 것이 아닌가 생각 됩니다.

    아주 아주 조심스럽게 글을 올려 봅니다.

    긴글 읽어 주셔서 감사드리며,
    저는 계속 선생님의 다른 강의를 열심이 공부하도록 하겠습니다.
    선생님의 공개 강의 큰 그림에 다시 한번 감사드리며, 글을 마칩니다.

    B.E.S.T 로 감사드립니다.
    답글
  5. kripke
    redux에 관한 유투브 강의를 몇개 들어보았는데, store, reducer 등 전반적인 개념을 그림을 통해 먼저 이해시켜주는 강의는 처음이었습니다. 보통 redux 러닝 커브가 높다고 하는데, 제 입장에서는 이고잉님 처럼 새개념들에 대한 전반적인 이해를 시켜주지 않아서 그렇다고 생각합니다. 그래서 이 강의가 무척 알차고, 배우는데 시간을 단축시켜주는 좋은 강의 였습니다. 감사합니다.
    답글 수정 삭제
  6. 호롤
    webn 목록에 없어서 찾기 어렵습니다. 수정가능하신지요?
    답글 수정 삭제
  7. egoing
    감사합니다!
    대화보기
      답글
    • egoing
      후기 부탁해요 ^^
      대화보기
        답글
      • egoing
        수정했습니다. 고맙습니다 :)
        대화보기
          답글
        • kneeprayer
           예제 링크가, 깨져있네요.
          https://egoing.github.io......tml
          이걸로 바꿔주셔야 하는게 아닌가 합니다.
          답글
        • 키리모찌
          정말 감사합니다!
          답글
        • jo920208@gmail.com
          리덕스를 공부하고 있는데 이고잉님은 어떻게 가르칠지 정말 기대되서 왔습니다. 감사합니다
          답글 수정 삭제
        graphittie 자세히 보기