jaeserrr.log

arrow function 에 대한 글을 첨부합니다. Arrow function expressions - JavaScript | MDN An arrow function expression is a compact alternative to a traditional function expression, with some semantic differences and deliberate limitations in usage: developer.mozilla.org 🤔 문제 상황 아래와 같은 코드를 실행하려니 제대로 작동되지 않았습니다. const setIsActive = (open) => (event) => { setCategoryState(open); }; function onClickLeaf() { setI..

기존에 텍스트 복사를 구현하려면 document.execCommand("copy") 을 이용했습니다. 그러나 execCommand() 는 더 이상 쓰지 않으며 훨씬 쉽고 강력한 Clipboard API 가 나왔습니다. window.navigator.clipboard.writeText() 를 사용하면, 텍스트를 클립보드에 복사해둘 수 있습니다. ✨✨ 아래는 이를 이용하여 현재 페이지 URL을 복사하는 코드입니다. function handleUrlShare() { const currUrl = window.location.href; // 현재 url navigator.clipboard.writeText(currUrl).then(() => { alert("링크를 복사하였습니다."); }); }

Firebase에서 사용자 관리 Google은 흑인 공동체를 위한 인종적 평등을 추구하기 위해 노력하고 있습니다. 자세히 알아보기 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 Firebase에서 사용 firebase.google.com 보안을 위해 비밀번호 변경은 주기적으로 해야 합니다. 😁 그럼 비밀번호 변경을 구현하겠습니다! 01. 컴포넌트 구현 여러 개의 input 구현을 작성한 글입니다. [React/JS] useState - 여러 개의 input 상태 관리하기 저는 비밀번호 변경을 예시로 구현하겠습니다! 우선 최종 코드입니다. 😊 import * as React from "react"; export default func..

저는 비밀번호 변경을 예시로 구현하겠습니다! 우선 최종 코드입니다. 😊 import * as React from "react"; export default function PasswordChange() { // input 컴포넌트의 id 선언 // 현재 비밀번호 const CURRENT_PASSWORD = "currentPassword"; // 새 비밀번호 const NEW_PASSWORD = "newPassword"; // 새 비밀번호 확인 const NEW_PASSWORD_CONFIRM = "newPasswordConfirm"; // input 컴포넌트에 맞는 id변수 들 const [inputs, setInputs] = React.useState({ currentPassword: "", newPas..

로그인 화면에선 비밀번호를 까먹었을 때 비밀번호 찾기를 통해 비밀번호를 재설정 하도록 돕는 서비스를 제공해주어야 합니다. 00. sendPasswordResetEmail( auth, email ) /** 비밀번호 찾기(비밀번호 재설정) */ async function handleFindPassword() { await sendPasswordResetEmail(auth, emailValue) .then((res) => { // 이메일 보내기 성공! }) .catch((error) => { // 이메일 보내기 실패... }); } 사용자가 입력한 본인의 이메일 주소인 emailValue을 해당 함수의 인자에 넣어 요청합니다. 01. 결과 해당 이메일 주소로 비밀번호를 재설정하라는 메일이 도착했습니다! 변경할..

필터(Filter) 01. 기본 const data = ["A", "B", "C", "D", "A", "C"]; const result = data.filter((value, index) => { return data.indexOf(value) === index; // 처음으로 나오는 값의 인덱스와 현재 인덱스가 같을 시, 포함 }); 특정 문자 위치를 찾는 indexOf 함수를 사용합니다.✨ 02. 요소가 Object const data = [ { name: "A", age: "20" }, { name: "B", age: "24" }, { name: "C", age: "20" }, { name: "A", age: "20" }, { name: "D", age: "24" } ]; const result =..

useRef를 통해 input을 제어하려고 합니다! 그런데, 이런 input이 5개라면? useRef이 5개 필요하겠죠! 5개 정도는.. 하나하나 선언해줄 수 있겠지만... 비효율적인데다가 심지어는 input이 1000개라면?!? 하나하나 선언해줄 수 없겠죠..!!🤔🤔🤔 효율적으로 구현해봅시다!! 결론적으론 아래와 같이 정리할 수 있습니다. Ref를 배열로 관리하고, (item, index) => ( { Ref배열.current[index] = element; }} onChange={(e) => Ref이벤트함수(e, index)} /> ) 00. 문제.. import * as React from "react"; export default function App() { /** 파일이 추가될 input의 r..

https://velog.io/@zero-black/CORS-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-Reverse-Proxy-server-%EA%B5%AC%EC%B6%95-with-Nginx CORS 에러 해결하기 + Reverse Proxy server 구축 with Nginx 위와 같이 React에서 외부 api로 요청을 보내는 경우, CORS 에러가 뜬다.CORS는 Cross Origin Resource Sharing로, 서로 다른 출처 간에 자원을 공유하는 것을 말한다. 기본적으로 브라우져는 동일 velog.io 위 블로그를 참고했습니다!! ☺️☺️ https://avoc-o-d.tistory.com/90 [React/JS] Image ..

https://avoc-o-d.tistory.com/91 [React/JS] CORS 에러 해결하기(이미지 URL을 API 요청, 이미지 URL로 Blob, Blob로 File 생성) https://velog.io/@zero-black/CORS-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0-Reverse-Proxy-server-%EA%B5%AC%EC%B6%95-with-Nginx CORS 에러 해결하기 + Reverse Proxy server 구축 with Nginx 위와 같이 React에서 외부 api로 요청을 avoc-o-d.tistory.com fetch하실 때, CORS 에러가 날 시 참고해주세요! const convertUrlToFile = ..

https://avoc-o-d.tistory.com/85 [React/JS] 버튼 클릭 시 이미지 업로드, 미리보기 구현하기 (파일 선택 버튼 제거, 커스텀하기) 미리보기를 구현하기 위한 방법은 아래와 같이 두 가지가 있습니다. 1. FileReader를 이용하는 방식 2. URL API를 이용하는 방식 🌈 (추천) 구현해봅시다! 00. - 파일 선택 버튼 제거 우선, input type="file" avoc-o-d.tistory.com 위는 파일 업로드에 관해 작성한 글입니다. 지금 쓰고 있는 글은, API 요청을 할 때 Request body에 파일 객체를 보내줘야 하는 상황을 위해 작성한 글입니다! json으로는 파일 객체를 읽을 수 없기 때문에 FormData를 활용하여 데이터를 보내기로 합시다!..