리액트32 [React] 머티리얼UI (Material-UI)란 무엇? | 리액트 기반의 UI Framework, Component Library [React] 개발자가 바라본 WEB 디자인 시스템 | Design and Style Guide, Component Library or UI Kit [React] 개발자가 바라본 머티리얼 디자인(Material Design) | 스큐어모피즘, 플랫, 머티리얼이란 무엇? [React 리액트 (실무)]라는 카테고리를 만들고 뜬금없이 디자인 관련된 글을 장황하게 두 번이나 올린 이유는, 바로 오늘 소개하는 머티리얼 UI를 꺼내보기 위한 떡밥 준비였습니다. '머티리얼이 뭐여~ 먹는거여~?' 하시는 분들은 위에 있는 링크 한 번씩 보시고, 이번에는 머티리얼 UI 사용법보다 일단 이게 뭐하는 물건인지 개념 설명부터 들어가겠습니다. 지난 글에서 설명했듯이 2014년 구글이 머티리얼 디자인 시스템을 발표하고 웹 앱 개.. 2021. 5. 28. [React] 개발자가 바라본 WEB 디자인 시스템 | Design and Style Guide, Component Library or UI Kit '리액트 관련 글에 왜 갑자기 디자인?'이라고 생각하실 수도 있지만, 앞으로 다룰 리액트 실무 관련 포스팅은 이번 내용을 이해하지 못하면 많은 어려움이 따를 수 있습니다. 특히 웹 앱 관련 개발자, 거기서도 프런트엔드 개발자라면 더욱더 디자인 시스템을 이해할 필요가 있습니다. 이미 많은 기업들이 도입했으며 도입하고 있습니다. 그럼 개념부터 ㄱㄱ~ 디자인 시스템이라고 검색하면 가장 많이 나오는 이미지가 아닐까 생각합니다. 그중에서도 개발자인 제 입장에서 가장 그나마 이해하기 쉬운 개념도였습니다. 그럼 설명에 앞서 저는 UI/UX 디자이너가 아닌 평범한 개발자이며, 디자이너의 관점이 아닌 개발자 관점에서 글을 작성한다는 점 양해 부탁드립니다. (한마디로 아트나 디자인을 모르는 공대 갬성) 글로벌 IT 삼대장.. 2021. 5. 18. [React] 라우터(Router), 스위치(Switch), 링크(Link), 리다이렉트(Redirect)를 이용한 페이지 이동 이때까지의 예제 및 실습에서는 페이지(URL) 이동이 없었습니다. 그래서 이번에는 페이지 이동 관련 기능들을 모아서 정리하겠습니다. 일단 리액트의 페이지 이동은 기존 서버 사이드 랜더링 기술과 개념이 조금 다릅니다. 쉽게 말씀드리면 리액트는 서버가 아닌 클라이언트에서 웹 문서를 생성합니다. 이를 SPA(Single Page Application)라고도 합니다. 그럼 이론은 너무 어려우니(무책임) 바로 실습 가겠습니다. URL을 다루기 때문에 스토리북이 아닌 App.js에 직접 넣겠습니다. 먼저 명령 프롬프트에서 리액트 라우터를 추가합니다. > yarn add react-router-dom // ..\test_project\src\App.js import React, { Component } from "r.. 2020. 10. 28. [React] 리덕스(redux) 기능으로 데이터 관리하기 ⑤ 커넥트 지난 리덕스 세 번째 포스팅에서 코드 분리를 했습니다. 크게 액션과 리듀서로 나눴는데, 이번에는 커넥트(connect)를 사용하여 화면(view) 컴포넌트와 데이터(container) 컴포넌트로 분리해보겠습니다. 쉽게 말씀드리면 화면에 뿌려주는 재사용 가능한 컴포넌트에 리덕스 스토어 데이터를 연결하는 것입니다. 지난 시간에 했던 소스코드에서 분리하겠습니다. 2020/10/27 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ④ 해시맵 먼저 views폴더 안에 화면 컴포넌트를 만들겠습니다. 유저 데이터인 id, pass, name 그리고 수정 버튼입니다. // ..\test_project\src\components\views\UserDataView.jsx imp.. 2020. 10. 27. [React] 리덕스(redux) 기능으로 데이터 관리하기 ④ 해시맵 이때까지 네 번에 걸쳐 리덕스 관련 포스팅을 했습니다. 기초, 디버깅, 코드 분리까지 어느 정도 리덕스 기능을 사용할 수 있지만, 문제는 어떤 데이터를 담아서 어떻게 사용하는 야입니다. 그래서 이번에는 key값과 object를 사용한 해시맵 구조를 담아보겠습니다. id, pass, name 정도의 유저 데이터를 관리하는 예시로 진행하겠습니다. 먼저 액션 추가 ㄱㄱ~ 2020/10/16 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 2020/10/22 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ② 디버깅 2020/10/23 - [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데.. 2020. 10. 27. [React] 리덕스(redux) 기능으로 데이터 관리하기 ③ 코드 분리 리덕스 첫 기초 포스팅에서는 개념을 파악하기 위해 모든 기능을 하나의 소스 코드에 넣었습니다. 즉 액션 정의, 리듀서 설정, 스토어 생성 등의 코드가 모두 한 곳에 있었습니다. 또한 하나의 리듀서를 사용하여 스토어 저장소도 나눠져 있지 않았습니다. 그래서 이번에는 코드를 분리하고 복수의 리듀서를 사용해 보겠습니다. 시간을 절약하기 위해 지난 시간에 했던 카운드 업 로직에 로그인 정보를 저장하는 정도의 기능을 추가하겠습니다. 아래 링크를 참고하세요~! [Web프론트엔드/리액트] - [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 먼저 액션을 분리해보겠습니다. src/components 폴더 안에 actions 폴더를 만들고 이하 두 개의 소스를 추가합니다. // ..\test_proje.. 2020. 10. 23. [React] 리덕스(redux) 기능으로 데이터 관리하기 ② 디버깅 리덕스 관련 두 번째 포스팅입니다. 지난 시간에는 리덕스의 간략한 개념과 사용 방법을 알아봤었는데, 리덕스를 사용하면 통합적인 데이터 관리가 가능하다고 했습니다. 하지만 단지 데이터 관리 기능만이라면 이렇게 주목받거나 어려운 기능은 아니었을 것입니다. 그래서 오늘은 정말 강력한 기능인 리덕스 디버깅을 배워보도록 하겠습니다. 크롬 브라우저를 기준으로 설명드리겠습니다. 먼저 리덕스 크롬 확장 도구를 설치하기 위해 구글에 검색으로 'chrome redux devtools' 를 찾거나, 아니면 chrome 웹 스토어에서 'Redux DevTools' 를 검색해 설치합니다. 설치가 완료되면 명령 프롬프트에서 리덕스 개발자 확장 라이브러리를 추가합니다. > yarn add redux-devtools-extensio.. 2020. 10. 22. [React] 리덕스(redux) 기능으로 데이터 관리하기 ① 기초 지난 시간에는 컨텍스트(context) 기능으로 데이터 관리하는 법을 배웠습니다. 컨텍스트가 작은 편의점 같은 존재라면 리덕스는 대형마트 같은 느낌입니다. 즉 리덕스는 강력한 기능만큼 복잡하고 까다로운 절차를 거쳐야 사용 가능합니다. 하지만 리덕스를 사용하면 통합적인 데이터 관리가 가능하기 때문에 꼭 알고 가야 하는 기능입니다. 그럼 설치부터 ㄱㄱ 명령 프롬프트에서 리덕스 관련 라이브러리 설치 > yarn add redux react-redux 첫 시간인 만큼 가볍게 접근해 보겠습니다. 컨텍스트가 공급자(provider)와 소비자(consumer) 개념으로 나뉘었다면 리덕스는 스토어(store), 리듀서(reducer), 액션(action)이 있습니다. 쉽게 설명하자면 스토어는 데이터 저장소이고 리듀서는.. 2020. 10. 16. [React] 하이오더(HoC) 기능으로 컴포넌트 확장하기 ② 2020/10/09 - [Web프론트엔드/리액트] - [React] 하이오더(HoC) 기능으로 컴포넌트 확장하기 ① 바로 지난 시간에 하이오더 컴포넌트(HoC)의 개념과 그것을 이용해 컴포넌트를 확장할 수 있다고 배웠습니다. 그래서 오늘은 실습으로 컴포넌트에 툴팁 기능을 붙여서 확장해보겠습니다. 스타일이 적용되어 있지 않은 Input 컴포넌트와 이미 withStyles()로 확장되어 있는 Button 컴포넌트 두 가지 예시로 진행하겠습니다. 먼저 HoC 작성 ㄱㄱ! // ..\test_project\src\components\withTooltip.jsx import React from "react"; import withStyles, { css } from "../styles/withStyles"; ex.. 2020. 10. 12. 이전 1 2 3 4 다음
