jpg의 끄적끄적

1. create 기능(글 추가 기능) create버튼을 클릭했을 때 글을 작성하는 화면이 나오도록 구현해보자. main.html 결과화면 CSS를 클릭하교 delete 버튼을 눌렀을 때 잘 삭제되는 것을 확인할 수 있다. 강의영상 - https://youtu.be/2s6s4IHzGSs

1. store 생성 우리가 redux를 사용하기 위해서 제일 첫 번째를 store를 만들어야 하는 동시에 reducer를 생성해야 했다. 그리고 결과화면 HTML을 클릭했을 때와 CSS를 클릭했을 때 본문의 내용이 잘 바뀌는 것을 볼 수 있다. 그렇다면 배웠던 것을 복습삼아 왜 바뀌는지 생각해보자. 우리는 action을 통해 dispatch에 값을 전달하고 reducer가 state값을 갱신해 dispatch가 subscribe하고 있는 함수들을 호출해주기 때문에 그에 따라 render가 동작해 새로운 state값을 참조하여 UI를 새로 그리기 때문이다. 강의영상 - https://youtu.be/zMTqWoe25aU

이제 웹페이지를 직접 만들어 보자. 1. 정적인 웹페이지 만들기(main화면) 먼저 start칸 웹페이지부터 만들자. main.html WEB Hello, WEB! HTML CSS create HTML HTML is ... 결과화면 2. 부품화 이제 각각의 주요한 덩어리들을 일종의 부품으로 만들어보자. WEB Hello, WEB! 만약 이 부분이 1억줄이라고 생각해보자. 우리의 웹페이지는 너무 복잡해서 한 눈에 들어오지 않을 것이다. 따라서 우리는 저렇게 부분부분에 이름을 붙이기만 하면 나중에 웹브라우저를 전달될 때 훨씬 정돈된 코드를 만들 수 있을 것이다. main.html 결과화면은 위에서 보여준 것과 같지만 코드는 훨씬 정돈되어 보기 편하고 나중에 코드를 재활용하기 쉬워졌다. 강의 영상 - http..

redux 대부 툴 설치 방법 https://github.com/zalmoxisus/redux-devtools-extension 위에 있는 깃허브로 들어가 내리다보면 크롬버전으로 설치할 수 있는 것이 나온다. Chrome Web Store를 클릭하여 들어가 확장기능을 설치한다. 설치하고 내리다보면 Basic store가 있다. 연두색 부분에서 +기호를 빼고 복사하여 red함수 위에 createStore한 함수 안에 붙여넣기 해준다. 홈페이지로 가 개발자도구를 클릭하면 redux가 생성된 것을 볼 수 있다. redux 대부 툴 기능 fire버튼을 각각 클릭해보자. 버튼을 누를 때마다 바뀌는 state값을 보여준다. 따라서 redux 대부 툴이라는 것은 redux에서 store에게 전달된 action들을 버..

이전시간에 우리는 action이 일어났을 때 그것을 dispatch에 통해 store에 전달하면 store가 우리가 작성한 reducer를 호출해 최종적인 state값을 결정한다는 것을 배웠다. 그러면 이제 state값이 바뀌면 UI도 바뀌어야 하는데 이때 render를 호출해야 한다. 즉, state이 바뀔 때마다 render가 통보 받아 그때마다 state값을 가져와 화면에 그려야 한다. with-redux.html 위 코드에서 UI를 그려주는 red함수는 실행할 때마다 state값을 가져와 그에 따라 자신의 color값을 결정해준다. 따라서 언제든지 호출해도 되는 함수이다. 위 코드는 red();를 통해 강제로 호출하였는데, 이것을 state값이 바뀔 때마다(dispatch를 할 때마다) red 함..

이번에는 state의 값을 변경하는 방법에 대해 알아보자. state를 변경하기 위해서는 action이라는 것을 만들고 dispatch에게 제출하면 dispatch가 reducer라는 것을 호출한다. 그때 이전의 state 값과 action의 값을 동시에 준다. 그러면 우리가 짤 reducer 함수가 그것을 분석해 state의 최종적인 값을 return 해준다. with-redux.html 위에서 작성한 코드를 통해 처음에 설명한 dispatch가 reducer 함수를 호출하고, 이전의 state값과 action 값을 동시에 주는 것을 확인해보자. 홈페이지에서 개발자도구 - console로 가서 fire 버튼을 클릭하면 이전의 state 값인 yellow와 action 값인 type값이 나타나는 것을 확..

검색엔진에 redux cdn을 검색하여 홈페이지에 들어가면 redux를 서버에 설치하지 않고, 그냥 복사하여 사용할 수 있는 페이지가 나온다. 여기서 맨 아래 주소를 카피한다. 그리고 public 폴더에 with-redux.html 파일을 만들고 다음과 같이 주소를 넣어준다. 그리고 without-redux.html에서 작성한 부분을 복붙해주고 red만 남기고 지워준다. 이제 red부분을 redux에 의해 동작하도록 변경할 것이다. redux를 이용한다는 것은 store를 만들어 state의 상태를 바꾸는 것이 redux의 핵심이다. 따라서 첫 번째로 해야할 것은 store를 만들어 state가 생성하고, reducer라는 함수를 만들어 store에 주입하는 것이 첫 번째로 할 일이다. state는 st..

redux의 필요성을 느껴보기 위해서 먼저 redux 없이 애플리케이션을 만들어보자. 새로운 폴더 redux를 만들어 react 환경을 구축하고, public 폴더에 without-redux.html를 만들어 다음과 같이 코드를 작성하였다. without-redux.html 결과화면 - red의 fire버튼을 눌렀을 경우 - green의 fire버튼을 눌렀을 경우 - blue의 fire 버튼을 눌렀을 경우 document.querySelector('#component_red').style.backgroundColor = 'red'; document.querySelector('#component_green').style.backgroundColor = 'red'; document.querySelector(..

redux 지도를 보며 redux에 대해 알아보자. store / state redux의 핵심은 store이다. store에는 정보가 저장된다. store 안에는 실제 정보가 저장되어 있는 state가 있다. 이때 중요한 것은 우리는 state에 직접 접속하는 것이 불가능하다. var store = Redux.createStore(reducer); redux에 createStore하게 되면 store가 생성된다. reducer store를 만들 때 가장 먼저 해야 할 것은 reducer라는 함수를 만들어 공급해야 한다. function reducer(oldState, action){ ... } var store = Redux.createStore(reducer); ㅁstore를 생성할 때 꼭 줘야하는 인..