본문 바로가기
반응형

React
17

[React] 포켓몬도감 만들기3 15. AutoComplete 기능 생성하기 검색을 했을때 그에 관련된 검색어를 가져올 수 있게 서버에서 포켓몬 이름을 전달해주면 좋지만 그런 API는 없다. 따라서 이 기능을 구현하려면 프론트엔드에서 먼저 모든 포켓몬의 데이터를 가지고 있어야 한다. 현재는 포켓몬 데이터 limit을 20으로 설정하고있기 때문에 소스 코드의 수정이 필요하다. refactoring function App() { // 모든 포켓몬 데이터를 가지고 있는 State const [allPokemons, setAllPokemons] = useState([]); // 실제로 리스트로 보여주는 포켓몬 데이터를 가지고 있는 State const [displayedPokemons, setDisplayedPokemons] = useStat.. 2023. 12. 8.
[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.
반응형

최근댓글

최근글

© Copyright 2023 jngmnj

티스토리툴바