jaeserrr.log

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

캐릭터 움직이기 MovingObject.cs using System.Collections; using System.Collections.Generic; using UnityEngine; public class MovingObject : MonoBehaviour { public float speed;// 속도 private Vector3 vector; //x,y,z 축 // Start is called before the first frame update void Start() { } // Update is called once per frame void Update() { // "Horizontal" : 우 방향키 : 1, 좌 방향키 : -1 리턴 // "Vertical" : 상 방향키 : 1, 하 방향..

http://bobbyryu.blogspot.com/2006/12/rc.html 알파 버전, 베타 버전, 그리고 RC 티스토리로 인한 베타 버전 논란의 글 을 보았는데, 기본 전제에서 알파 버전과 베타 버전에 대한 정의가 잘못 되어 있군요. 20년 이상 개발을 해왔고 또한 소프트웨어 공학을 전공한 사람으로서 bobbyryu.blogspot.com 소프트웨어 생명 주기 컴퓨터 소프트웨어의 개발 단계의 총체 초기 개발 단계부터 마지막 출시 단계까지 소프트웨어 개선에 도움이 되는 업데이트 버전과 소프트웨어에 내재된 버그 수정을 포함 단계 : 프리알파 > 알파 > 베타 > 출시 소프트웨어 개발 수명 주기(Software Development Life Cycle, SDLC) 시스템 엔지니어링, 정보 시스템, 또는..

00. Masonry https://mui.com/material-ui/react-masonry/ React Masonry component - Material UI Masonry lays out contents of varying dimensions as blocks of the same width and different height with configurable gaps. mui.com 높이가 제각각인 컴포넌트를 개성있게, 에쁘게 구현가능한 컴포넌트입니다. 높이가 달라도, 서로의 높이에 구애받지 않고 쫘라락 나열됩니다. 기본적인 코드는 아래와 같습니다.🌈 import * as React from 'react'; import Box from '@mui/material/Box'; import Maso..

필터(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..

모~~~든 정보를 한번에 가져와버리면, 비효율적이겠죠. 꽤나 많은 사이트에서 무한 스크롤로 이를 해결하는 것을 볼 수 있어요!😁😁 구현해봅시다!!! 우선, 최종적인 코드는 아래와 같습니다. 아래 예시는 영화 이름을 가져오는 API를 이용했습니다.🔥 import * as React from "react"; import { Select, MenuItem, FormControl, InputLabel } from "@mui/material"; export default function App() { const PANEL_HEIGHT = 240; // 패널 높이 /** 선택한 item */ const [selectItem, setSelectItem] = React.useState(""); /** 총 menu it..

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를 활용하여 데이터를 보내기로 합시다!..