React

리액트에 부트스트랩 적용하기!!

1. 부트스트랩 모듈 다운로드 하기

npm install react-bootstrap bootstrap

2. index.js에 아래 코드 추가

import 'bootstrap/dist/css/bootstrap.css';

3. 아래 링크에서 원하는 ui 가져오고(복사), app.js나 새로운 js파일에 붙여 넣기!

나는 부트스트랩 코드를 그래도 사용하고 싶었기 때문에 bar.js에 OffcanvasExample 컴포넌트를 새로 만들었다.
https://react-bootstrap.github.io/docs/components/navbar#offcanvas

(위에는 bar.js에 코드 복붙한 사진)

4. App.js에 컴포넌트 가져오기 (태그 형태로! import 필수!)

(결과)

진행중인 프로젝트에 부트스트랩을 사용할 일이 생겨서 공부 해보았다.

알아두면 좋을 탬플릿 사이트

https://startbootstrap.com/
https://bootstrapthemes.co/items/free-bootstrap-templates/
...

figma 사용법

<단축키>

ctrl+shift+g : 프레임 => 스크롤 할때,,
ctrl+g : 그룹화

<이것저것 배운 것들>

프레임으로 두면 사각형 박스 만큼 스크롤 창으로 뜬다..

디자인은 한 컴포넌트(아이템)들에 관한 편집창이고, 프로토타입은 런했을 때 이벤트(?) 편집창이다.
프로토타입 편집창은 이따가 자세하게 배울 예정이다.

일단, 디자인 편집창에서는 아이템의 너비와 길이, 둥근 모서리 등등.. 편집 가능, stroke는 모서리를 조절 할 수 있다.

effexts는 그림자, 효과 등 표현가능하고,
export는 그림이나 아이콘 코딩할 때 쓸 수 있게 사진으로 받을 수 있다.
(꿀팁 : export 필요한 컴포넌트는 컴포넌트 이름 앞에 * 등의 표시 해주면 편리하다.)


프토토타입 창에서는 각종 이벤트를 편집 가능하다. 런 했을 때, 스크롤이나 클릭을 통한 페이지 이동도 가능하다! fixed로 상단바 고정도 가능,,

css

레이아웃 부분이 너어무 헷갈려서 조금 공부 해보았다.

App.scss

App.js

정말 더러운 코드지만 그래도 .. 웹 페이지 비슷하게 만들어 냈당

참고:
https://studiomeal.com/archives/197 (flex)
https://www.daleseo.com/css-position/ (포지션)