일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- generic
- app.post
- 리액트네이티브아이콘
- array
- reactnative error
- react
- Spring
- app:compiledebugkotlin
- err_connection_refused
- mainapplication.kt
- npm에러
- javascript
- 배열중복요소제거
- reactnative
- Filter
- materialicons
- 이진탐색
- 슬라이딩윈도우
- async
- TS
- 타입스크립트
- map
- 상속
- 스크롤이벤트
- Next.js
- set
- forwardref type
- 안드로이드빌드에러
- interface
- extends
- Today
- Total
목록분류 전체보기 (157)
rhanziy
오늘은 react-query 라이브러리를 설치했다. 더보기 서버 상태를 관리해주는 react-query 라이브러리 장점 1. 성공/실패/로딩 중 쉽게 파악 가능 2. 틈만나면 refetch 해줌 3. 실패 시 retry 해줌 4. state 공유 안해도 된다.(ajax코드 다시 쓰면 됨) 5. ajax 결과 캐싱 가능 => 실시간 데이터 전송이 필요한 페이지에서 주로 쓰인다. ( ex. 코인거래소) 사용법을 알아보자. 터미널 오픈 후 npm install react-query 그리고 index.js에서 설정해줘야 할 몇가지. import { QueryClient, QueryClientProvider } from 'react-query'; const queryClient = new QueryClient()..
저번 글에서 redux toolkit을 설치하고 store.js 파일에 공유할 state들을 모아놨다. 이제 useState처럼 state를 변경하는 방법. 좀 복잡하다 ㅋ let cart = createSlice({ name : 'cart', initialState : [ {id : 0, name : 'White and Black', count : 2}, {id : 2, name : 'Grey Yordan', count : 1} ] }) 장바구니에 담긴 아이템 data가 들어있다. 중복된 아이템이 추가되면 수량을 올리거나, 장바구니 아이템을 추가/삭제하는 기능을 만들어 state를 변경하고 싶다면 reducers를 이용해 기능을 추가하면 된다. let cart = createSlice({ name : ..
컴포넌트끼리는 state를 props 문법으로 공유할 수 있다. 하지만 공유할 state가 많다면,... 자식 컴포넌트가 많은 복잡한 구조라면....! redux를 설치해보자. 리액트와 리액트 돔 버전이 18.1.x 이상이여야 설치가 가능하니 package.json파일에 가서 버전 확인/수정해준다. 터미널 오픈 후 install. npm install @reduxjs/toolkit react-redux 그리고 index.js에서 필요한 셋팅 import { Provider } from "react-redux"; // Provider import import store from './store.js' // Provider로 을 감싸주면 된다. 속성은 store //그럼 이제 과 그 모든 자식컴포넌트들은 s..
서버 : 유저가 요청한 데이터를 보내주는 프로그램. get : 서버에서 데이터를 가져올 때 post : 데이터를 서버로 보낼 때 브라우저 주소창에 GET, POST 날리면 브라우저가 새로고침되는 단점이 있다. ajax란? 서버에 GET, POST 요청 시 새로고침 없이 데이터를 통신할 수 있게 도와주는 간단한 브라우저 기능. 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 사용법은 3가지가 있는데, 1. XMLHttpRequest 라는 옛날 문법사용 2. 자바스크립트 fetch() 3. axios 외부라이브러리 리액트에서 서버와 ajax 통신할 때 axios 라이브러리 설치&사용 법 // 터미널 오픈 후 install npm install axios ..
리액트를 사용하며 css 병행하는 것이 귀찮고 속도 향상에 관심이 있다면 styled components 라이브러리를 사용해보자. 설치방법 npm install styled-components 터미널에 위 코드를 치고 다운을 받는다. 그리고 다시 npm run. 적용할 js파일에서 import 후 사용할 수 있는데, css 코드를 `` 백틱 안에 짜면 됨. 컴포넌트기때문에 작명 시 앞자리는 대문자로 작성하자. import styled from 'styled-components'; let YellowBtn = styled.button` background: yellow; color: black; padding: 10px; ` let Btn = styled.button` background: ${ props..
1. css 클래스 네임 주고 background주기 2. html안에서 style속성으로 url 넣기 import bg from './bg.png' function App(){ return ( ) } 3. 하던대로 img 태그 src로 경로지정( 외부 이미지는 절대경로 그대로 작성) 상품명 상품정보 4. public 폴더에 파일 밀어넣고 이미지 경로 사용(import 안해도 된당) //권장되는 형식 하위 경로에 배포하면 파일을 못찾을 수도 있으니 홈페이지 URL 기재 권장!
var products = [ { id: 0, price: 70000, title: 'Blossom Dress' }, { id: 1, price: 50000, title: 'Springfield Shirt' }, { id: 2, price: 60000, title: 'Black Monastery' } ] // 데이터 형식 function addTemplet(data){ data.forEach((e)=>{ var card = ` ${e.title} 가격 : ${e.price} 구매 ` $('.row').append(card); }) } // 데이터에 맞게 카드형식으로 html append 우선 데이터를 카드 식으로 화면에 뿌려준다. $('.buy').click(function(e){ var title = ..
const button = $('.tab-button'); const content = $('.tab-content'); $('.list').click(function(e){ tabOpen(Number(e.target.dataset.id)); }); function tabOpen(i){ button.removeClass('orange'); button.eq(i).addClass('orange'); content.removeClass('show'); content.eq(i).addClass('show'); } tab버튼 구현하다가 맞닥뜨린 문제. li에 data-id ="0" 데이터 값을 부여해서 그에 맞는 컨텐츠를 보여주는 코드인데.. 제이쿼리랑 같이 쓰다보니 data값을 못가져오는 오류가 났다. tab..