ksw_devlog

해외축구 리그경기 승부예측 사이트를 만들기로 하였다 우선 Header, Footer 컴포넌트를 만드는 역할을 맡았다. 배트맨 로고를 누르면 메인페이지를 라우팅해주고 커뮤니티 부분을 누르면 커뮤니티 페이지를 라우팅해주도록 만들었다. import React from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Header from "../redux/components/Header/Header"; import Footer from "../redux/components/Footer/Footer"; import "./router.css"; const Router = () => { return ( ); }; expo..

Redux store에 state 보관하는 법 저번시간에 만들어둔 store.js 파일 열어서 이렇게 코드짜면 state 하나 만들 수 있습니다. step 1. createSlice( ) 로 state 만들고 step 2. configureStore( ) 안에 등록하면 됩니다. import { configureStore, createSlice } from '@reduxjs/toolkit' let user = createSlice({ name : 'user', initialState : 'kim' }) export default configureStore({ reducer: { user : user.reducer } }) 1. createSlice( ) 상단에서 import 해온 다음에 { name : '..

(전역) 상태 관리 라이브러리 redux middleware - redux-saga - redux-thunk - redux observable 서버 상태 관리 라이브러리 - react query react-query로 ajax 요청하는 법 그냥 ajax 요청해도 되는데 react-query를 써서 ajax 요청을 날리면 더 편리한 기능을 제공합니다. function App(){ let result = useQuery('작명', ()=> axios.get('https://codingapple1.github.io/userdata.json') .then((a)=>{ return a.data }) ) } useQuery 라는걸 상단에서 import 해온 뒤에 useQuery()로 ajax 요청을 감싸면 됩니다...

[서버] 유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램 서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야한다. 1. 어떤 데이터인지 (URL 형식으로) 2. 어떤 방법으로 요청할지 (GET or POST) 데이터를 가져올 때는 보통 GET 데이터를 서버로 보낼 때는 POST GET/POST 요청 -> 브라우저가 새로고침이 되는 단점이 있음 AJAX : 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능 요청방법 1. XMLHttpRequest라는 옛날 문법 쓰기 2. fetch() 라는 최신 문법 쓰기 3. axios 같은 외부 라이브러리 쓰기 // 3번이 가장 편함 터미널 열어서 npm install axios im..

[Redux] Redux의 state 변경하는 법 - state 수정해주는 함수 만들고 - 원할 때 그 함수 실행해달라고 store.js에 요청 1. state 수정해주는 함수 만들기 let user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(state){ return 'john ' + state } } }) 2. 만든 함수 export 해주기 export let { changeName } = user.actions -> 오른쪽 자료를 변수로 빼는 문법 3. 만든 함수 import해서 사용, dispatch(state변경함수()) import { changeName } from "../store"; let di..

페이지 여러개 만들고 싶으면 : URL파라미터 사용 유저가 URL파라미터에 입력한거 가져오려면 useParams() (참고) URL 파라미터 만들 때 - 여러 개 가능 let YellowBtn = styled.button` background: ${ props => props.bg }; color : black; padding : 10px; ` 버튼 버튼 참고1) 간단한 프로그래밍 가능 참고2) 기존 스타일 복사가 let YellowBtn = styled.button` background: ${ props => props.bg }; color : ${ props => props.bg == 'blue' ? 'white' : 'black'}; padding : 10px; ` let NewBtn = style..

리액트 이미지 태그안에 소스 수정

./경로 import './App.css' --- public 폴더 이용하기 html에서 public폴더 이미지 사용할 땐 그냥/이미지경로 ex) /logo192.png 권장방식 : 다른 파일에 있던 자료 가져오려면 impor / export 문법 사용 다른 파일에 있던 변수 가져오려면 -> 1. 변수를 export하고 (가져오려는 파일에서) / 변수 여러개 하려면 -> export {변수1, 변수2} 2. import 하면 끝 / 변수 여러개 하려면 -> import {변수1, 변수2} from '경로' ex) (data.jsx) let a = 10; export default a; (App.jsx) import 작명 from './data.jsx'; ---- 함수, 컴포넌트도 export가능