Development/Front-end8 리액트 - 리덕스(Redux) 쉽게 이해하기 (with Typescript) 안녕하세요. 휴몬랩 소프트웨어 개발자 진(JIN)입니다. 리액트를 이용해 개발하다 보면 컴포넌트(조각들)를 만들어 쪼개어 만들다 보면 많은 계층구조가 생기게 되고 state(상태)를 관리하는 게 참 쉽지가 않았습니다. 리덕스 관련 예제는 도큐먼트와 많은 훌륭한 분들이 잘 정리하셨겠지만 좀 풀어서 쉽게 리덕스에 대해 좀 쉽게 접근해보자! 해서 정리하게 되었습니다:) Redux? 우리는 리액트의 state 관리하는 것과 UI와의 일관성 유지하는 게 중요하다는 것을 알고? 있습니다. (중요합니다ㅎ) 하지만 웹 애플리케이션은 훨씬 복잡해지고 많은 계층구조가 생기면(부모-자식-손자-증손자...) state관리는 정말 힘들어집니다. 각 계층은 자신이 가지는 기능을 해야하고 그 기능 수행을 위해 어떤 관계에서는 st.. 2020. 3. 19. GraphQL 파헤치기(1) 휴몬랩 개발자 진(JIN)입니다. 휴몬랩의 FlowCoding beta버전은 GraphQL을 도입해서 사용하고 있습니다. GraphQL을 도입하면서 어려웠던 개념들을 풀어서 정리해보려고 합니다. GraphQL은 페이스북에서 개발한 REST보다 효율적이고 강력하고 유연한 대안을 제공하는 새로운 API 표준입니다. GraphQL은 클라이언트가 API에 필요한 데이터를 정확하게 지정해서 요구해서 필요한 데이터만 받을 수 있습니다. 따라서 GraphQL은 질의어(Query Language)로 서버 - 클라이언트 간의 통신 스펙. 즉 '명세서'라는 것입니다. 우리가 DB에 SQL로 쿼리를 날려 필요한 데이터를 가져오거나 DB를 수정, 삭제하는 등 업데이트를 하는 것을 생각하는 것처럼 GraphQL도 마찬가지로 가.. 2020. 2. 7. 리액트 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 2 다음
