리액트의 프레임워크 게슈탈트

프론트엔드의 프레임워크

빠르게 개발하기 위해서는 프레임워크를 사용하는 것이 아주 좋습니다. 프론트엔드 개발 쪽의 프레임워크들은 디자인적으로 어느정도 완성된 것들을 제공해준다는 특성이 있습니다. 즉 예쁜 텍스트 창을 미리 만들어 놓고 제가 몇몇의 세부사항은 넣으면 그 세부사항에 맞게 예쁜 텍스트 창을 제공해주는 것입니다. 그리고 반응형 웹 애플리케이션도 또한 쉽게 만들 수 있도록 해줍니다. 프론트엔드 개발 쪽의 프레임워크는 레이아웃을 잡는 기능도 제공해주기 때문입니다. 가장 많이 사용하면서 유명한 프론트엔드 쪽의 프레임워크는 트위터의 부트스트랩이 있습니다.

리액트의 프레임워크 게슈탈트

게슈탈트는 핀터레스트에서 만든 프레임워크입니다. 핀터레스트의 깔끔한 디자인을 담은 UI를 이용할 수 있다는 점이 매우 좋습니다.

게슈탈트 깃허브 바로가기 

게슈탈트 사이트 바로가기

사이트를 둘러보시면 여러 형태가 예쁜 UI들이 만들어져 있습니다. 우리가 할 것들은 간단히 말하면 이미지를 바꾸거나 색깔을 바꾸거나 하는 것들 뿐이죠

게슈탈트 이용하기

게슈탈트를 이용하는 방법은 간단합니다. create-react-app 등을 통해서 리액트를 실행할 환경을 만든 다음에 게슈탈트를 추가하면 됩니다. 

npm i gestalt --save 나 yarn add gestalt 를 커맨드라인에서 입력해주세요.

그리고 게슈탈트가 필요한 파일에서 게슈탈트를 import하면 됩니다.

import { Box, Heading } from 'gestalt';

import 'gestalt/dist/gestalt.css';

우리가 필요할 것 같은 것들만 import로 가져오면 됩니다. 저는 일단 Box와 Headin을 가져왔습니다.

잘 작동하는지 테스트하기 위해 일단 간단한 헤더를 입력해봤습니다.

에러없이 잘 작동되는 것을 확인할 수 있습니다.

게슈탈트만 있으면 따로 css 작업을 할 필요없이 간편하고 빠르게 만들 수 있습니다. 다음 포스팅부터는 게슈탈트를 이용해서 함께 간단한 싱글페이지를 만들어보도록 하겠습니다.

같이 만들 사이트 보러가기

 

귀여운 동물들이 나오는 페이지입니다.

다음포스팅에서 함께 만들 페이지 사진입니다.

프레임워크의 간편함에 같이 빠져봐요!