본문 바로가기
반응형

Frontend/React
30

[React] 포켓몬도감 만들기2 ## 08. API를 통해 포켓몬 데이터 가져오기 ### Axios란 무엇인가? * Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. * 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게 하기위해 Ajax와 더불어 사용한다. Client Poke API 서버 (fetch()) (fetch => response => json) ### Axios 사용방법 * axios 모듈설치 `npm i axios` ```js const [pokemons, setPokemons] = useState([]); const url = 'https://pokeapi.co/api/v2/pokemon/?limit=100&offset=0'; useEffect(() => { .. 2023. 12. 8.
[React] 포켓몬도감 만들기1 02. Vite을 이용한 리액트 생성 npm init vite npm install axios react-router-dom npm i -D autoprefixer postcss tailwind-scrollbar tailwindcss vite프로젝트는 dependency의 패키지들이 설치되어있지 않은 상태이기 때문에 한번 npm install을 해줘야함! 03. Vite이란? Vite는 💡 즉각적인 서버 시작 네이티브 ESM을 이용해 번들링 없이 온디맨드로 파일을 제공할 수 있어요! ⚡️ 번개처럼 빠른 HMR 앱 크기에 상관없이 Hot Module Replacement(HMR)는 언제나 빠르게 동작해요. 🛠️ 풍부한 기능 추가적인 모듈의 설치 없이 TypeScript, JSX, CSS 등을 사용할 수 있.. 2023. 12. 8.
[emotion] 이모션을 styled-component처럼 사용하기(@emotion/styled) emotion 설치 npm i @emotion/react @emotion/styled styles 파일 만들기 User.tsx페이지에 사용할 User.styles.ts파일을 만들었다. import는 꼭 @emotion/styled로 해주어야한다. @emotion/react로하면 styled문법이 적용안된다. 아래는 테스트용 컴포넌트이다. import styled from '@emotion/styled'; export const TopBox = styled.div` margin-right: 25px; `; 컴포넌트 import하여 사용 TopBox라는 컴포넌트를 사용했다. import React from 'react' import { TopBox } from './Users.styles'; const Us.. 2023. 9. 5.
[React] React Component Styling React Component Styling 01. Style Loaders style-loader, css-loader가 .css나 .scss를 컴파일링해서 빌드함 eject 설정 웹팩설정을 꺼내서 설정을 하기위해 npm run eject 한번해야한다. 커밋하기 eject는 아직 git에 커밋되지 않은 변화가 있다면 진행되지 않아서 먼저 커밋해줘야한다. git add . git commit -m "commit before eject config/webpack.config.js 설정 config/webpack.config.js 열어본다. 임포트 절대경로 설정방법 기존에 상대경로 임포트를 절대경로로 사용하기위해 설정할 수 있는 방법이다. @import '../../../styles/utils'.. 2023. 8. 25.
react component event handling camelCase로만 사용할 수 있음 onClick, onMouseEnter 이벤트에 연결된 자바스크립트 코드는 함수임 이벤트 = {함수}와 같이 씀 실제 DOM요소들에만 사용 가능 리액트 컴포넌트에 사용하면, 그냥 props로 전달함 1. function Component function Component() { return ( { console.log("clicked!"); }} > 클릭 ); } 2. class Component class Component extends React.Component { state = { count: 0, }; render () { return ( {this.state.count} { this.setState((state) => ({ ...state, count: s.. 2021. 10. 12.
리액트 컴포넌트 Props와 State 1. function component의 props와 defaultProps function Component(props) { return {props.message}이것은 함수로 만든 컴포넌트 입니다. } ReactDOM.render(, document.querySelector("#root")); Component.defaultProps = { message: "기본값", } 2. class component의 props와 defaultProps class Component extends React.Component { render() { return ( {this.props.message}이것은 클래스로 만든 컴포넌트 입니다. ) } static defaultProps = { message: "기본값.. 2021. 10. 12.
반응형

최근댓글

최근글

© Copyright 2023 jngmnj

티스토리툴바