jaeserrr.log

위 예시를 구현해볼게요! ✨ 우선, 전체 코드를 보고 밑에서 설명을 덧붙이는 식으로 하겠습니다!! 00. 전체 코드 몇몇 컴포넌트는 material design을 바탕으로 구현했다는 점 유의해 주세요! MainPage.js import * as React from "react"; import { Grid, Button, Card, IconButton, Stack } from "@mui/material"; import ClearIcon from "@mui/icons-material/Clear"; export default function MainPage() { // 배열 const [data, setData] = React.useState([]); /** 각 item update */ function on..

아래와 같이 글쓰기 버튼이 안 보여서 글쓰기를 못 할 때가 종종 있습니다!! 해결해봅시다! 01. 크롬 설정에서 인터넷 사용 기록 삭제 1. 크롬 설정에 들어갑니다. 2. 검색창에 "기록"을 입력 후, 인터넷 사용 기록 삭제를 해줍니다. => 이래도 안 될 때는, 기간을 늘려서 기록 삭제 해주면 되더라구요!😁 02. 글쓰기 버튼 단축키 Q Q (Shift + q) 를 누르면 관리자 페이지로 넘어와 집니다 ✨✨ 바로 글쓰기 가능! 🤩🤩🤩

미리보기를 구현하기 위한 방법은 아래와 같이 두 가지가 있습니다. 1. FileReader를 이용하는 방식 2. URL API를 이용하는 방식 🌈 (추천) 구현해봅시다! 00. - 파일 선택 버튼 제거 우선, input type="file"을 사용해서, 이미지를 포함하여 다양한 확장자 파일을 업로드할 수 있습니다! 😁 style={{ display: "none" }} 을 추가하면, 파일 선택 버튼을 제거할 수 있습니다. -> 우리가 따로 버튼을 만들어서 사용합시다! 01. 확장자 설정 이미지만 업로드할 수 있도록 제한하고 싶으면, accept="image/*" 를 추가하면 됩니다.✨ 02. FileReader를 이용하는 방식 - readAsDataURL /** 미리보기 이미지 url */ const [i..

00. input에서 한 글자 입력 후 focus를 잃는 현상 input 태그에서 한 글자를 입력하자마자 input의 focus가 사라지는 현상이 발생합니다... 그러면, 한 글자 치고 다시 입력창 클릭하고,, 치고 클릭하고,,를 반복해야 해서 입력하기 매우 불편하기 때문에 꼭 고쳐야 한다!!! 원인은 state의 변경으로 인해 입력된 Input이 Re-render 되기 때문입니다..!! 문제 코드 export default function InputTest() { const [name, setName] = useState(""); const onChange = (e) => { setName(e.target.value); } /** 이렇게 input이 함수 내의 컴포넌트로 구현되었을 때! */ const..

로컬 스토리지에 객체를 저장하기 위해선, 저장하려는 객체를 string으로 변환 후 저장해야 합니다. 그리고 로컬 스토리지에 저장해놓은 데이터를 사용하기 위해선, string으로 저장해놓은 데이터를 객체로 변환해야 접근 가능합니다. 00. 저장하기 (object -> string) JSON.stringify /** 저장하려는 데이터를 object -> string 으로 변환 */ const stringData = JSON.stringify(저장하려는 오브젝트); /** 로컬 스토리지에 저장 : string */ localStorage.setItem( 키이름 , stringData); 01. 가져오기 (string -> object) JSON.parse /** 가져오려는 로컬 스토리지 데이터 : strin..

https://avoc-o-d.tistory.com/73?category=1069902 [React] useNavigate Hook으로 페이지 이동하기(Hook 직접 만들기) React Hook는 함수형 컴포넌트에서 상태값 접근과 자식 요소에 접근이 가능하게 해줍니다. 리액트는 useState, useEffect 같은 내장 Hook을 제공해주는데, 이 중 useNavigate를 사용해서 페이지를 이동해볼게 avoc-o-d.tistory.com navigate를 효율적으로 사용할 수 있도록 작성한 글입니다. 이를 활용하여 구현해보겠습니다! 만약 A 페이지에서 A 페이지로 갔을 때, 새로고침이 작동되어야 할 때가 있습니다. 예를 들어, ✨메인 페이지로 가는 로고✨가 있겠네요! 로고를 누르면, 새로고침이 되는..

public에 그냥 저장되어 있는 이미지에 src연결을 하면, navigate를 했을 때 새로운 상대경로로 인식을 해서 이미지가 깨지는 현상이 일어나더라구요.. 해결방법은 다음과 같습니다. 00. public > assets assets 폴더 생성 후, 이 안에 이미지 파일을 넣어 img 태그 src에 연결해줍니다. A.jpg A.png 등등... 확장자 꼭 확인해주는 것 잊지마세요!

data.json { "jsonData": [ { "id": "A-001", "name": "A" }, { "id": "B-001", "name": "B" } ] } 이런 로컬 json 파일이 있다고 합시다. 00. 로컬 JSON 파일을 import문으로 불러오기 A.js import data from "./json/data"; export default function A() { console.log("data : ", data); console.log("data.jsonData : ", data.jsonData); ... } import를 하면 JSON.parse 함수가 적용된 것 처럼 접근 가능합니다. => 그러니까, 현재 data.json 안에 "jsonData" 이 jsonData 으로 접근 가..

로그인 - 회원가입 한 유저만 로그인 가능하도록 구현, 구글 최초 로그인을 막아야 함 회원가입 - 이미 회원가입 한 유저는 회원가입 막아야 함, 구글 최초 로그인을 허용 위와 같이 해야 하는 이유를 잠깐 살펴볼게요. https://avoc-o-d.tistory.com/50?category=1069902 [React] Firebase - Authentication으로 로그인 기능 구현하기 https://firebase.google.com/?hl=ko&gclid=CjwKCAjwpqCZBhAbEiwAa7pXeX-_LGJVKKRu3WA1Zbs-awSKivk12siAqSNzd60QEYrX7TKbOp59MxoCHK0QAvD_BwE&gclsrc=aw.ds Firebase Firebase는 고품질 앱을 빠르게 개발하고..

보통, 처음 접속 시엔 "/" 으로 들어오게 되죠! 맨 처음 웹사이트에 접속했을 때, "/main" 으로 들어오도록 구현해볼게요! 00. Route path = "*" Router.js 중... ... {/* 위 route 들 중 매칭 안 되는 곳 있으면 을 렌더 */} Main.js import * as React from "react"; export default function Main() { return ( Main Page ); } 위와 같이, path="*"는 위 들 중 url이 매칭 안 되는 곳이 있으면 main으로 가도록 element에 을 넣어주었습니다. 우리에게 매칭이 안 되는 곳이라함은 "/" 이 있겠죠!! 01. useNavigate()를 이용하여 시작 url을 /main으로 Mai..