부트스트랩
-
나만의 홈페이지 만들기-05 [오픈API 호출하여 카드리스트디자인적용]React 2022. 9. 6. 20:31
자바스크립트는 API 데이터를 연동하기 위해서 주로 두개의 라이브러리를 이용한다. 하나는 Fetch API 그리고 다른하나는 Axios 이다. 앞에건 빌트인 라이브러리이고, Axios는 외부 라이브러리이다. 차이저은 잘설명되어 있는 링크를 참고한다. https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API React | axios란? (feat. Fetch API) # Intro 리액트는 효율적인 UI 구현을 위한 라이브러리이다. HTTP Client(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트)를 내장하고 있는 Angular와는 다르게, 리액트는 따로 내장 클래스가 존재 velog.io 공공데이터중에 테스트에 활용할만한 API를 탐색한..
-
나만의 홈페이지 만들기-04 [Bootstrap 카드리스트 만들기]React 2022. 9. 5. 18:20
리액트 부트스트랩 페이지에서 참고 https://react-bootstrap.github.io/components/cards/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io 카드 레이아웃 App.js 에 위의 샘플을 복사해서 이전에 만든 Navbar 바로 밑에 붙여넣기한다. import React from 'react'; import Container from 'react-bootstrap/Container'; import Navbar from 'react-bootstrap/Navbar'; import Card from 'react-bootstrap/Card'; import ..
-
나만의 홈페이지 만들기-03 [부트스트랩]React 2022. 8. 31. 16:11
부트스트랩 공식사이트 React-Bootstrap 설치 The best way to consume React-Bootstrap is via the npm package which you can install with npm (or yarn if you prefer). 아래 처럼 터미널에서 설치를 한다. npm install react-bootstrap bootstrap Navbar 넣기 index.js 부트스트랩 css import 하기 // Importing the Bootstrap CSS import 'bootstrap/dist/css/bootstrap.min.css'; app.js 에 container 와 navbar 컴포넌트 임포트 import React from 'react'; import Co..