본문 바로가기

프론트엔드 공부/react

 (31)
react kakao login api 리액트 카카오 로그인 api 코드 tailwindcss사용한 간단한 로그인 로그아웃 카카오api 구현 입니다. 하단 index.html파일 javascript 키만 본인 것으로 변경하시면 잘 되리라 생각합니다. //KaKaoLogin.js import React from "react"; const { Kakao } = window; const KaKaoLogin = () => { //카카오로그인 function kakaoLogin() { Kakao.Auth.login({ success: function (response) { Kakao.API.request({ url: "/v2/user/me", success: function (response) { console.log(response); }, fail: function (error) ..
json-server-api 활용한 restful (get,post,put,delete,patch)/login구현 crud 1.기존 프론트 폴더 이외에 server-api폴더(db대용)를 생성하고 vsc에서 새로운 터미널을 열어준후 npm init으로 nodemodules및 package.json생성 (새로운 터미널열어주는이유: db 로컬 같이 열어주기 위해서) 2.db.json파일을 생성하고 내용물 넣어줌 3.axios, json-server npm으로 설치 후 터미널창을 각각 열어 서버와 db 생성 서버생성"node server.js" db생성 "npx json-server ./db.json --port 8000"(json-server 8000을 생성하고 db.json파일을 읽음) //db.json { "users": [ { "id": "1", "firstName": "bon", "lastName": "aoe", "ema..
urlParams , 쿼리 import React from 'react' import About from "./pages/About" import Home from "./pages/Home" import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'; const App = () => { return ( ) } export default App import React from 'react' const Home = (props) => { //쿼리는 라우트 컴포넌트에 props로 전달되는 location객체의 search 값에서 읽을수 있으며 //location 객체는 현재 앱의 주소를 전달한다. const searchParams = new URLSearchParam..
react localStorage 사용하여 데이터 로컬에 저장후 사용 localStorage로 데이터 저장하기 * localStorage, sessionStorage 차이 Local storage: 영구지속 되는 컴퓨터 임시 저장공간(텍스트만저장,5 mb) Session storage:휘발성이 있는 컴퓨터 임시 저장공간(브라우저끄면날아감,텍스트만저장,5 mb) *데이터 저장시 텍스트로만 저장가능함으로 JSON.stringify 사용, *데이터 불러올시 JSON.parse 사용 //moment패키지,metarialui,mock_data, className의 설정은 테일윈드 import React, { useState, useContext, useEffect } from "react"; import moment from "moment"; /*ui */ import ArrowB..
Contextapi 함수형, 상태값과 변수전달 //app.js [...] import PageContextProvider from "./component/provider/pagecontextprovider"; function App() { return ( [...] //provider폴더의 pagecontextprovider.js import React,{useState, useEffect, createContext} from 'react' export const PageContext = createContext(); const PageContextProvider = (props) => { const [user, setUser] = useState({ 'name':'harrypotter', }); const array2 = [1,2,3,4]; con..
contextapi 예제 1.기존 props 로 state 전송 //app.js import React, {Component} from 'react'; const Family = (props) =>{ return( ) } class Person extends Component{ render(){ return( he i;m {this.props.name} ) } } class App extends Component { render(){ return( i;m app ) } } export default App; 2.createContext 생성후 consumer 사용하여 하위 컴퍼넌트에 value 값 전달 import React, {Component} from 'react'; //1.createContext 생성 (react-dom..
axios로 외부 api, data.json 불러오기 + 로딩소스 추가 const Page1 = ({history, props}) => { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(()=>{ axios("https://fangmin26.github.io/data/personal.json") .then((res)=>{ setData(res.data) }) .catch((err)=>{ console.error("fetch error",err); setError(err) }) .finally(()=>{ //setLoading(false) setTimeout(function(){..
useState,useEffect 로 parrallex구현 https://codesandbox.io/s/magical-thompson-r5y42?file=/src/Parallax.js

티스토리툴바