react18 [React] 개발자가 바라본 WEB 디자인 시스템 | Design and Style Guide, Component Library or UI Kit '리액트 관련 글에 왜 갑자기 디자인?'이라고 생각하실 수도 있지만, 앞으로 다룰 리액트 실무 관련 포스팅은 이번 내용을 이해하지 못하면 많은 어려움이 따를 수 있습니다. 특히 웹 앱 관련 개발자, 거기서도 프런트엔드 개발자라면 더욱더 디자인 시스템을 이해할 필요가 있습니다. 이미 많은 기업들이 도입했으며 도입하고 있습니다. 그럼 개념부터 ㄱㄱ~ 디자인 시스템이라고 검색하면 가장 많이 나오는 이미지가 아닐까 생각합니다. 그중에서도 개발자인 제 입장에서 가장 그나마 이해하기 쉬운 개념도였습니다. 그럼 설명에 앞서 저는 UI/UX 디자이너가 아닌 평범한 개발자이며, 디자이너의 관점이 아닌 개발자 관점에서 글을 작성한다는 점 양해 부탁드립니다. (한마디로 아트나 디자인을 모르는 공대 갬성) 글로벌 IT 삼대장.. 2021. 5. 18. [React] 컴포넌트에 스타일을 적용해보자 ④ media 속성 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자 2020/10/06 - [Web프론트엔드/리액트] - [React] 스토리북에 다양한 확장 도구(Addon) 추가 2020/10/07 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ① Text 2020/10/08 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ② Button 2020.. 2020. 10. 8. [React] 컴포넌트에 스타일을 적용해보자 ③ Checkbox 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자 2020/10/06 - [Web프론트엔드/리액트] - [React] 스토리북에 다양한 확장 도구(Addon) 추가 2020/10/07 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ① Text 2020/10/08 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ② Button 스타일 .. 2020. 10. 8. [React] 컴포넌트에 스타일을 적용해보자 ② Button 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자 2020/10/06 - [Web프론트엔드/리액트] - [React] 스토리북에 다양한 확장 도구(Addon) 추가 2020/10/07 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ① Text 지난 시간에 이어서 이번에는 버튼 컴포넌트에 스타일을 적용해보겠습니다. Button이라고 전에 만들었던 Text와 크게 다.. 2020. 10. 8. [React] 컴포넌트에 스타일을 적용해보자 ① Text 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자 2020/10/06 - [Web프론트엔드/리액트] - [React] 스토리북에 다양한 확장 도구(Addon) 추가 지금까지의 포스팅은 컴포넌트의 스타일보다는 기능에 중점을 둔 글이었습니다. 그래서 스타일 관련 글을 다루기 위해, 테스트 도구인 스토리북을 추가하기도 했었습니다. 앞으로 다룰 스타일은 기존 css나 scss가 아닌 직접 컴포넌트에 붙.. 2020. 10. 7. [React] 스토리북에 다양한 확장 도구(Addon) 추가 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자 지난 시간에는 스토리북 설치와 실행을 해보았습니다. 이번에는 스토리북에 자주 사용하는 확장 도구 JSX, actions 두 가지를 추가해보겠습니다. 이 두 가지 말고도 다양한 Addon이 있으니 공식 사이트를 확인 바랍니다. 1. addon-jsx 첫 번째로 스토리북 화면에서 바로 JSX코드를 확인할 수 있는 확장 도구입니다. 먼저 프롬프트 창에.. 2020. 10. 6. [React] 테스트 도구인 스토리북(storybook)을 사용해보자 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트 이때까지의 포스팅은 스타일이 적용되지 않은 기본적인 컴포넌트 형태였습니다. 그래서 바로 지난 포스팅인 Input 컴포넌트를 기반으로 스타일을 적용해볼 예정입니다. 하지만 그전에 컴포넌트의 디자인과 기능 등을 시각적으로 편리하게 확인할 수 있는 스토리북을 설치하고 사용해 보겠습니다. 먼저 명령 프롬프트에서 아래와 같이 입력합니다. 마지막은 버전인데 미지정시 최신 버전입니다. > yarn add --dev @storybook/react@5.3.0 그럼 자동으로 인스톨이 .. 2020. 10. 6. [React] 재활용 가능한 기본적인 Input 컴포넌트 2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등) 이때까지의 포스팅은 리액트의 가장 기초적인 내용이었다면, 지금부터는 그 내용을 토대로 좀 더 활용 가능한 것들을 다루도록 하겠습니다. 그래서 오늘은 가볍게 지난 시간에 다루었던 아이디, 비번 입력 Input 컴포넌트를 재활용 가능하도록 뼈대만 남기는 작업을 해보도록 하겠습니다. 그럼 Input.jsx 만들어보시죠! // ..\test_project\src\components\Input.jsx import React, { PureComponent } from "react"; import PropTypes from "prop-types"; class Input extends Pu.. 2020. 10. 6. [React] 컴포넌트의 Lifecycle 생명주기 함수 - 실습 2020/09/24 - [Web프런트엔드/리액트] - [React] 컴포넌트의 Lifecycle 생명주기 함수 - 이론 [React] 컴포넌트의 Lifecycle 생명주기 함수 - 이론 생명주기란 단어가 딱딱할 수 있지만, 쉽게 인간으로 말씀드리면 태어나서 죽을 때까지의 기간입니다. 즉 컴포넌트가 생성되고 소멸될 때까지의 과정으로써, 크게 생성 -> 갱신 -> 소멸 3단계를 jiguin-hankun.tistory.com 이번 글을 읽기 전에 꼭 이론 편을 보고 오시길 추천드리며, 될 수 있으면 이론 화면을 같이 보시는 것이 더욱 좋습니다. 그럼 실습에 들어갈 텐데 이번 코드는 좀 복잡할 수 있어, 실행 화면을 먼저 보여드리고 설명 후에 진행하겠습니다. 이번 실습은 일부로 잘 못된 코드도 넣었고 콘솔 로그.. 2020. 9. 24. 이전 1 2 다음
