rhanziy

서버 : 유저가 요청한 데이터를 보내주는 프로그램. 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 기재 권장!

HTML 삽입 미리보기할 수 없는 소스 Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용한다. 이미 자바스크립트에는 fetch api가 있지만, 프레임워크에서 ajax를 구현할땐 axios를 쓰는 편이라고 보면 된다 출처: https://inpa.tistory.com/entry/AXIOS-📚-설치-사용 [👨‍💻 Dev Scroll:티스토리] axios를 이용해 영화정보 api사이트에서 데이터를 받아오는 hook을 짰다. refetch 버튼 클릭 시 setTrigger가 발동되고 useEffect의 두번째인자에 trigger를 지정해 새로운 데이터를 받아오는 기능도..

const useConfirm = (message = "", onConfirm, onCancel) => { if ( !onConfirm && typeof onConfirm !== "function") { return; } if ( onCancel && typeof onCancel !== "function") { return; } const confirmAction = () => { if (window.confirm(message)) { onConfirm(); } else { onCancel(); } }; return confirmAction; }; export default function App() { const deleteWorld = () => console.log("Deleting the worl..

import "./styles.css"; import React, { useState, useRef, useEffect } from "react"; const useClick = (onClick) => { if (typeof onClick !== "function") { return; } const element = useRef(); useEffect(() => { if (element.current) { element.current.addEventListener("click", onClick); } return () => { if (element.current) { element.current.removeEventListener("click", onClick); } }; }, []); return el..

HTML 삽입 미리보기할 수 없는 소스 Array.isArray(obj) // 배열인지 아닌지 확인하는 함수. true false를 리턴 useState활용법으로 useTabs를 만들어보았다. 버튼에 따라 노출되는 내용을 다르게 지정하는 기능의 함수... 배열의 인덱스 번호를 useState로 넘겨서 return값을 그에 맞는 컨텐츠로 뿌려주기! 파라미터 값을 통해 여기저기 호출하다보니 기존에 하던 방식보다 복잡해서 더 분석이 필요할 것 같다.

리액트로 작업한 결과물을 내 깃허브 레포지토리에 올리는 방법. 1. 콘솔창에 npm i gh-pages 2. npm run build >> 하면 build폴더가 생성된다. 3. pakage.json 파일 "scripts" 에 2줄 추가 4. pakage.json 파일 맨 아래에 깃허브 page url 추가 (여기서 원격저장소 등록을 미리 해야한다.) 5. npm run deploy >> predeploy가 먼저 실행된다. 업로드 완료 추가/수정할때마다 npm run deploy를 하면 된다! ++ React router 6버전이상에서 작업했다면 App.js에서 Route path={`${process.env.PUBLIC_URL}/`} element={} path를 추가해주기.