본문 바로가기

Development/Front-end8

Typescript에서 Redux를 사용해보자 안녕하세요 휴몬랩 초보 개발자 차암새입니다. 이번 시간에는 Typescript 환경에서 Redux를 사용해보겠습니다. Redux는 React 상에서 state관리가 힘들 수 있는 부분을 보완하기 위해 만들어졌습니다. ※혹시라도 Redux에 대한 개념이 부족하신 분은 devlog-h.tistory.com/26를 참고해주세요 이 튜토리얼에서는 TODO리스트를 만들지만 기존의 다른 예제들과는 조금 다른 방식으로 만들어 볼 예정입니다. 바로 'typesafe-actions' 패키지를 활용한 방법입니다! 기존의 redux-saga 등을 활용하는 방식은 사용하다 보면 불편한 점이 많아 이 패키지를 이용하시는 것 또한 추천드립니다. 그럼 시작해보겠습니다. github.com/piotrwitek/typesafe-act.. 2020. 11. 6.
React에서 Redux가 왜 필요할까? 안녕하세요! 휴몬랩 초보 개발자 수달입니다. :) 리액트를 이용한 웹을 개발하다 보면, State 관리에서 빈번한 오류 발생과 현재의 값 확인이 매우 복잡한 경우가 존재합니다. props와 state를 사용하여 값이 이리저리 바뀌는 것을 보다가 흐름을 놓치게 되면 개발하던 컴퓨터를 덮은 채로 눕고 싶은 생각이 들곤 할겁니다. (저만 그랬나요?) ㅎㅎ; 이렇듯 복잡하고 흐름을 따라가기 힘든 state 관리에 Redux라는 라이브러리를 사용하라는 선배 개발자들의 많은 포스트들이 존재합니다. 하지만 더 좋으면서도 "어렵다" 라는 이야기를 항상 빼놓지 않는데요..! 그럼 우리는 어려운 Redux를 왜 사용해야 할까요? 그리고 왜 Redux가 편리한 도구라고 표현하는 것일까요?? 오늘은 "어렵다"라는 말과 "편리.. 2020. 10. 4.
Material UI 활용기 안녕하세요. 휴몬랩 개발자 진(JIN)입니다:) Material UI는 많이 쓰이는 React UI 컴포넌트 라이브러리 중 탑 3안에 계속 들어가는 라이브러리입니다. 저희도 Material UI를 역시 적극 활용해서 개발하고 있습니다. Material UI를 이용해 컴포넌트를 커스텀해서 재사용한 컴포넌트를 만들어 놓아 빠르게 UI 구현을 할 수 있다는 점에서 좋았습니다. 패키지 설치 npm i @material-ui/core Material UI는 core , utils , icons 같은 여러 개의 패키지들이 있는데 그중 핵심적인? 컴포넌트들을 제공하는 core를 설치하겠습니다. 그리고 core의 컴포넌트를 몇 가지 알아보겠습니다. 기타 여러 가지 컴포넌트는 도큐먼트를 참조하시면 더 다양한 UI 컴포넌.. 2020. 5. 8.
GraphQL 파헤치기2 - GraphQL client처리 안녕하세요 휴몬랩 프론트엔드 개발자 진(JIN)입니다. 글이 좀 늦어졌지만 GraphQL을 좀 더 알아보도록 하겠습니다! GraphQL을 사용하는 이유! RESTful 하던 기존의 HTTP 통신 방법과의 차이를 알아봤습니다. 그렇다면 이번에는 간단한 통신 방법을 알아보겠습니다. 이번에는 apollo라는 플랫폼을 사용하겠습니다. apollo는 GraphQL과 호환되는 상태 관리 플랫폼이고 GraphQL로 만들어진 API를 호출하기 위해 사용되는 라이브러리라고 보시면 좋겠습니다. 프론트엔드 개발자로 들어간 JIN... 회사에서 GraphQL로 만들어진 API 명세서가 있었습니다. 백엔드 개발자 분이 피 땀 흘려 만든 API에서 데이터를 받아 사용자에게 유용한 interactive 한 react 웹을 만들어야.. 2020. 4. 24.