-
[Redux saga] 리덕스 사가에 대해서 (Redux toolkit과 같이 사용해보기)Frontend 2020. 4. 12. 12:17
요즘 회사에서 예전 레거시 코드를 리팩토링하는 과정에서 Redux/toolkit과 redux-saga를 처음으로 도입해보았다. 프로젝트 규모가 그리 크지 않아서 과연 복잡한 초기 세팅과 러닝 커브를 모두 극복할만큼 redux의 효과가 클 것인가에 대해서 계속 논의했고, 더 큰 프로젝트를 하기 전에 지금 규모의 프로젝트에서 한 번 도입을 해보고 괜찮다고 생각이 되면 앞으로도 계속 사용하자는 결론이 나왔다. 그리하여 도입한 redux-toolkit과 redux-saga는 생각보다 더더욱 만족스러운 결과를 만들어주었다. 일단 redux-saga를 도입하고 나서 좋아진 것으로는 아래와 같은 것들이 있다. 테스트 코드 쓰기 매우 편해졌다. 비동기 로직 흐름을 이해하기가 쉬워졌다. prop drilling이 줄었다..
-
[React] Typescript와 Redux hooks를 이용하여 간단한 TODO LIST 만들기Frontend 2020. 2. 23. 16:39
오늘은 Typescript, Redux hooks를 사용하여 간단한 React Todo List를 만들어보려고 한다. 예전에 connect라는 Redux 라이브러리의 Higher order component를 사용해 Redux 프로젝트를 몇 번 만들어봤었다. 그 때는 connect로 연결된 container component에서 비즈니스 로직 정의를 하고 presentational component에서 container로부터 전달받은 state를 렌더해주는 구조였다. 그러다보니 매 번 connect로 container와 component를 연결해주는 과정이 약간 번거로웠다. 게다가 action과 reducer를 매번 생성하는 것도 아주 귀찮은 일이었다. 그래서 오늘은 connect를 사용하는 방식보다 훨..
-
[React] React.js와 firebase를 사용하여 간단한 메모 앱 만들기[2] - 메모 저장 및 삭제하기Frontend 2019. 8. 30. 00:06
이제 메모 저장 / 삭제 이벤트도 추가해보자! constants/actionTypes.js export const ADD_NEW_MEMO_PENDING = 'ADD_NEW_MEMO_PENDING'; export const ADD_NEW_MEMO_SUCCESS = 'ADD_NEW_MEMO_SUCCESS'; export const ADD_NEW_MEMO_FAILURE = 'ADD_NEW_MEMO_FAILURE'; export const DEL_MEMO_PENDING = 'DEL_MEMO_PENDING'; export const DEL_MEMO_SUCCESS = 'DEL_MEMO_SUCCESS'; export const DEL_MEMO_FAILURE = 'DEL_MEMO_FAILURE'; 메모를 저장하고 삭제..
-
[React] React.js와 firebase를 사용하여 간단한 메모 앱 만들기[1] - 리스트 출력하기Frontend 2019. 8. 29. 22:25
바닐라코딩 2차 테스트가 끝났다! 예에~! 그동안 배웠던 내용, 특히 어려웠던 리액트 리덕스(Redux)를 중점적으로 공부하려고 간단한 메모 앱을 구현해보았다. 시험 하루 전날이랑 오늘이랑 해서 만드는데 2일 정도 걸렸던거 같다. 공부한거 복습용으로 급하게 만든거라 기능은 별로 없다. [기능] 페이지를 로딩하면 첫 화면에 메모 작성 버튼과 메모 리스트가 있다. 메모 작성 버튼을 클릭하면 메모를 작성할 수 있는 form이 나온다. 메모 작성 후 제출 버튼을 누르면 메모가 바로 저장된다. 첫 화면의 메모 리스트는 메모 제목과 내용, 메모를 저장한 날짜/시간이 표시된다. 메모는 삭제할 수 있어야 한다. 메모를 클릭하면 상세 페이지로 이동한다. 상세 페이지에서 다시 앱 로고를 클릭하면 리스트 화면으로 돌아온다...
-
[React] 리덕스 (Redux) 이해하기Frontend 2019. 8. 24. 19:19
10년 전까지만 해도 프론트엔드 개발의 트렌드는 MVC (Model - View - Controller) 패턴이었다. Model이란 어플리케이션의 데이터를 관리해주는 부분을 말한다. View란 어플리케이션이 사용자에게 어떻게 보여지는지에 대한 관리를 말한다. Controller는 Model의 자료와 View의 인터렉션을 총괄하는 어플리케이션 로직을 관리한다. 그러나 몇몇 사람들이 MVC가 대규모 어플리케이션 개발에는 관리하기 어렵다고 느끼기 시작했다. 프로젝트가 단순하다면 위 그림처럼 간단하게 표현될 수 있다. 그러나 프로젝트 규모가 커지면 데이터 자료의 양과 화면이 많아지면서 Model과 View가 급격히 늘어나고 그에 따라 각각의 모듈들이 어떤 식으로 연결되어있는지 파악하기가 매우 어려워지기 마련이다..