react4 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. 리액트 atomic design패턴과 스토리북 활용하기(Typescript) 안녕하세요 휴몬 랩의 개발팀의 진(JIN)입니다. 오늘은 리액트를 공부하며 많은 디렉터리 구조와 패턴들이 있는데 그중 atomic design과 DDD(Design Driven Development)라는 디자인 주도 개발환경으로 atomic design을 더 분명하게 해 줄 'storybook'에 대해 알아보겠습니다. Atomic Design 회사에서 사용하는 기존 웹 프로젝트가 atomic design 디렉터리 구조로 되어 있었습니다. 보통 관련도가 높은 파일들로 묶어 페이지별로 디렉터리 구조를 구성하는 편이었는데, atomic design구조는 기본 페이지별로 나누는 것은 같지만 원자(atom) - 분자(molecule) - 유기체(orginism) - 템플릿(template) - 페이지(page)의.. 2020. 1. 16. 리액트 함수형 컴포넌트 날아오르다(feat.Hook) 안녕하세요! 휴몬랩 신입 개발자 진(JIN)입니다. 휴몬랩은 아두이노 메이커스 교육, 온라인 코딩 교육 '플로우 코딩'을 서비스하고 더 좋은 코딩 교육 생태계를 만들어 나가고 있는 EDU TECH 스타트업입니다! 휴몬랩이 궁금하다면 click 플로우 코딩이 궁금하다면 click 리알못인 저는 처음에 회사의 코드를 분석하며 당황 + 좌절 하기도 했지만 리액트를 공부하며 참 재밌는 패러다임이라는 것을 느끼기도 했습니다. 그 중 리액트의 Hook이란 개념을 정리해보고자 합니다 클래스 컴포넌트 - 함수형 컴포넌트 우선, 리액트의 컴포넌트는 두 가지로 나뉩니다. 클래스 컴포넌트(class component) 함수형 컴포넌트(functional component) 1. 클래스 컴포넌트 import React, { .. 2019. 12. 24. 이전 1 다음
