프론트엔드 공부 (134) 썸네일형 리스트형 [react] label htmlFor React 와 JSX 는 링크와 등을 제외하면 거의 속성 사용이 가능하다. form 속성의 label 속성 활용시 label htmlFor 로 작성한다. [react] 페이지 이동 Redirect /history.push/Link react에서 페이지이동의 기본적인 세가지 방법으로 Redirect,history,Link 가 있다. 세가지 특성이 헷갈려서 간단하게 요약해보았다. 1.history.push -hitory.push(/해당경로)로 사용된다 -현재 url 기록이 이동후도 남는다. -react-router-dom의 useHistory를 import 해온다 - jsx에서 사용할수 없고, 어떤 event 안의 함수에서 활용한다 -하위 컴퍼넌트에 history 사용시 부모의 props 로 전달받아야 하며, 최상위 컴퍼넌트에 BrowserRouter와 Route 사용시 history 객체가 자동 전달된다. *history.replace : 현재의 url 기록이 이동 후 남지 않게 할 때 사용된다.(Redirect 와 비슷) 2.Re.. redux todolist //reducer.js const initialState = { todos: [], }; const reducer = (state = initialState, action) => { switch (action.type) { case "ADD_TODO": return { ...state, todos: [...state.todos, action.payload], }; case "DELETE_TODO": return { ...state, todos: state.todos.filter((todo) => todo.id !== action.payload), }; default: return state; } }; export default reducer; //index.js import React from "reac.. 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) .. label input 연결하기 ID: PASSWORD: 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.. [Firebase] firebase 설치 1.Firebase 사용 이유: 백엔드 서버를 대신 만들어주어 프론트엔드 개발만 하면 개발하기 용이함 단점은 AWS에 비해 사용량 많아질 수록 이용료 비쌈(db 데이터입출력 등 사용량 많을수록 비쌈) 보안 문제는 Cloud Firestore 규칙에 작성 2.설치방법:npm install firebase로 설치 firebase 프로젝트 만들기 -회원가입기능:authentication 시작하여 이메일 비번 사용설정 켜주기 -데이터베이스:firestore database 시작 >cloud firestore 위치 asia-northeast3으로 변경(서울과 가까울 것이므로 물리적으로 전송 빨라짐) -사진저장소:storage -호스팅업로드:hosting 3.코딩하기 create-react-app 폴더명 설치 메인.. 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.. 이전 1 2 3 4 5 ··· 17 다음