home
자바
home

day7 (21.06.26)

day07.zip
3391.5KB
yarn add styled-components
yarn add sass
yarn add axios
yarn add react-icons
yarn start
-------------------------
검색
icons
스타일
-------------------------------
yarn add node-sass 또는 yarn add sass
---------------------------
styled-components
yarn add styled-components 또는 npm install styled-components
React 프로젝트에서 styled-components 모듈에서 styled를 불러온 후,
HTML 요소 이름을 추가한 다음 백틱(`) 기호로 감싼 영역에 CSS 코드를 작성하면
CSS 스타일이 반영된 React 컴포넌트를 만들어 낼 수 있음
형식)
import styled from 'styled-components'
const StyledH2 = styled.h2`
color: #06f;
font-size: 14px;
`
그리고 styled.h2는 다음과 같이 변경해도 동일하게 작동
const StyledH2 = styled('h2')`
color: #06f;
font-size: 14px;
`
------------------------------------------
styled-components css 자동완성기능 설치
---------------------------------------------
리액트에서의 Ajax 요청방법 - axios , fetch()
axios 는 yarn add axios 설치
fetch 는 자바스크립트에서 지원해줌
구별
js파일 -> import AAA from './경로/파일명'
-------------------------
export default [
{
id: 1,
name: '홍길동',
age: 20,
addr:'서울'
}
]
--------------------------
json파일 -> 내부에서 불러오기 import AAA from './경로/파일명.json'
-------------------------
[
{
"id": 1,
"name": "홍길동",
"age": 20,
"addr":"서울"
}
]
서버에 올려진 json 파일 가져오기 - axios, fecth
////////////////////////////
---------------------------------
json 제공사이트