React 프로젝트 생성, 프로토 타입대로 레이아웃 디자인

안녕하세요, 

오늘은 지금까지 배웠던 리액트를 기반으로 프로젝트를 하나 개인 연습으로 생성하여 프로토타입을 기반으로

홈페이지 구조와 기능들을 만들어 보려고합니다.

 

자, 차근히 진행하도록 하겠습니다.

​

1. 프로젝트 생성

새로운 파일하나를 만들고

1) Ctrl + shift + ` 를 눌러 npx create-react-app test(원하는 파일명으로 설치)

2) npm 대신에 쓸 수 있는 소프트웨어, yarn 을 구글에 검색 yarn

https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable

 

Yarn

Fast, reliable, and secure dependency management.

classic.yarnpkg.com

노란 현광색으로 표시된 코드들을 터미널에 입력하여 설치

 

잘 설치되어졌나 확인하려면 yarn --version 입력해보기.

잘 설치되어져있군.

이렇게 나오면 정상적으로 설치되어진 것이며 어떤 버전인지 볼 수 있다.

​

브러우저를 열어서 열려지나확인 하려면 yarn start 도 가능 npm run start도 가능하다.

그 다음, Bootstrap을 이용해 기본적인 페이지 구조를 만드려고하는데 Bootstrap 이용해도 괜찮지만

그냥 bootStrap말고 리액트를 위한 react bootStrap를 사용하자

https://react-bootstrap.github.io/getting-started/introduction

 

React-Bootstrap

The most popular front-end framework, rebuilt for React.

react-bootstrap.github.io

또는 yarn add react-bootstrap bootstrap 입력

그리고 페이지를 쭉 내려보면 CSS밑에있는 코드들도 나오는데, index.html에 넣어줘야한다.

(index.html 안에 <meta> 태그 바로 밑에 복붙하여 놓기)

잘 나오나 확인을 하기 위해 bootstrap가서

요게 좋겠다하는 css를 찾고 복사 후 브라우저창을 열면

후후 이렇게 잘 나오는 걸 볼 수 있습니다. 그럼 이제 본격적으로 레이아웃 디자인을 해봅시다.

​

React BootStrap으로 레이아웃 디자인하기

🍖 리액트에서 BootStrap으로 디자인하기 위해서는 꼭 복붙할 때마다

상단에 컴포넌트 명 import를 해와야합니다.

이것만 기억하고 있다면 레이아웃을 재미나게 할 수 있다구요! 이거 뽀인트입니다.

​

이렇게 우선 만들어보자,

위에는 navbar, 밑에 아이콘불러오고, 검색창Form을 만들어보도록하기

​

1. React BootStrap페이지에 들어가서 내가 꺼내고 싶은 navbar를 입력하여 맘에 드는 것 하나골라 copy하고 App.js에 붙여넣기를 한다.

2. 그 후 <Navbar>를 가져와 넣으려는 문구입력

3. 상단에 내가 붙여넣은 컴포넌트를 위상단에 '저, <navbar>사용할게요' 라고 import하여 알려줘야합니다.

import { 내가 사용하려는 컴포넌트 } from 'react-bootstrap';

다른 컴포넌트들도 불러와서 원하는 내용을 React-Bootstrap에 가져와서 붙이고 상단에 import만 해주면 원하는 레이아웃 화면들이 나옵니다.

​

위치 설정과 폰트 크기, 색깔은 style작업이니 저번시간에 배운 ClassName을 이용하여 각 태그를 알려주는 ClassName 이름을 짓고 App.css에다가 그 태그에 관한 이름을 꺼내어 스타일 속성 값을 선언해주면 됩니다.

이렇게 프로젝트안에서 제작하고 있는 프로토타입을 보며 레이아웃디자인을 해보았습니다.

 

프로젝트? 프로토타입? 그건 제가 지금 팀과 함께하고있는 프로젝트에서 기획자가 작업하고 있는 프로토타입을 보며

진행하고 있습니다. 그 프로잭트는 이건데요, 

기획부터 개발과정까지 오픈, IT관련 정보를 공유하자는 목적으로 네이버 블로깅도 운영하고 있으니

 

관심있으신 분들이 있으시다면 살짝쿵 방문해주시면 감사하겠습니다. 

보드살롱 : 네이버 블로그

 

​

그럼 지금까지 만든 UI를 가지고 state로 저장한 데이터를 하나씩 UI에 띄우는 방법, Link를 통해 위 UI순서대로 클릭하면 넘어가는 방법등을 만들어볼 예정입니다. 안녕!

​