전체 글142 Redux - immutable - Next tutorial(마무리) counter number 에 이어서 todolist를 만들었다. immutable을 쓰면서 데이터를 가공하는데 하루라는 시간이 흘렀다. 잘했는지 모르겠지만, 기능구현에는 이상이 없다. 폴더 구조는 다음과 같이 구성을 했다. containers에서 페이지별로 나눠서 따로 저장을 했다. 우선 redux 상태관리 순으로 시작을 했다. todolist에 쓰고 지우는 기능만 추가를 했다. 그래서 ADD와 DEL을 type에 추가를 했다. todolistAction.js 파일을 만들고 추가와 삭제 action 함수를 만들었다. 삭제를 할 때는 삭제한 data의 위치를 알 수 있는 값을 알고있어야 삭제가 되기 때문에 인자로 index값을 받아왔다. action과 reducer를 연결 시켜주는 dispatch를 만들.. 2021. 1. 3. Redux - immutable - Next tutorial(3) immutable.js에 대해 설명을 하면... List는 배열을 만드는 메소드이다. 이걸로 console로 찍어보면 실제로 Javascript에서 알고 있던 [1, 2, 3, 4]가 나오는것이 아니라 List 메소드에 대해서 나온다. 그래서 toJS()로 변환을 시켜줘야 한다. toJS()는 Javascript 자연적인 형태로 변환 시켜준다. 그래서 하단에 있는 사진을 보면 toJS()를 해준 것은 기존에 사용하던 배열을 볼 수 있다. 그래서 보통 React나 Redux에서 불변성을 지키기 위해서 push, shift 같은 메소드를 mutable한 메소드를 사용하지 말라고 하지만 immutable.js를 이용해서 사용이 가능하다. immutable.js를 조금 더 쉽게 설명하면 객체를 새로운 객체로 만.. 2021. 1. 2. Redux - immutable - Next tutorial(2) 기본적으로 Next를 활용하여 page를 구성하고 분기하였고, 중앙집권체제를 구성하려고 한다. Redux는 단방향흐름을 가지고 있기 때문에 순서대로 진행한다. actions 디렉토리, reducers 디렉토리, store 디렉토리를 구성하였다. actionType을 따로 빼놓은 이유는 변수로 활용하기 위함이고, 나중에 오타 실수를 줄일 수 있기에 따로 파일로 빼서 지정하였다. counter 기능은 증가 감소 대한 이벤트만 있을 것이기에 증가 감소 action type을 지정했다. 그리고 나서 action 함수를 작성했다. 증가일때 action으로 onIncremet를 감소일때 onDecrement 함수를 작성하여 export로 내보냈다. 그리고 나서 action을 받아 줄 dispatch가 필요하므로 r.. 2021. 1. 1. Redux - immutable - Next tutorial(1) Redux - immutable - Next tutorial을 하면서 우선 counter를 할 수 있는 페이지를 만들었다. 폴더 구성은 다음과 같이 하였다. - components 디렉토리는 페이지를 구성하고 있는 component를 만들도록 했다. - containers 디렉토리는 redux와 연결해서 상태관리를 하는 component 이다. - pages 디렉토리는 각 페이지를 나타낸다. - redux 디렉토리는 중앙집체 상태 관리를 할 수 있도록 redux에 필요하는 action, reducer, store를 만드는 곳이다. Next.js 에서 제공하는 Link component를 활용해서 page를 분기했다. Home 페이지 구조는 다음과 같이 만들었다. Head를 따로 뺄 수 있지만, 내용이 작.. 2021. 1. 1. 이전 1 ··· 11 12 13 14 15 16 17 ··· 36 다음 반응형
