해민

일반적으로 프론트에서 데이터를 입력받아서 저장하게 될 경우 백엔드를 통하여 DB안에 저장하게 된다. 하지만 백엔드와 DB없이 프론트 안에서만 데이터를 저장하고 관리하는 것도 번거롭지만 가능하다. 오늘은 프론트엔드만 사용하여 데이터들을 관리하고 저장하는것을 회원과 게시물을 예시로 들어서 만들어 보겠다. 🔴 생성할 파일Join.jsx : 회원의 정보를 입력 받아 저장Login.jsx : 아이디와 비밀번호를 입력받아 일치하는 계정으로 로그인하고 로그인 유저의 정보 저장 🤔 데이터는 어디에서 관리하는 것이 좋을까?일반적으로 프론트에서 데이터를 임시 저장할 때는 localStorage 나 sessionStorage를 사용한다. 그러나 회원들의 정보나 대량의 데이터들을 모두 저장하기에는 사실 적합한 방법은 아니..

❓useEffect란리액트 컴포넌트의 생명주기와 관련된 작업을 수행한다.컴포넌트가 마운트(호출) 될 때와 언마운트(종료) 될 때의 특정한 작업을 실행하도록 할 수 있으며의존성 배열을 통해 특정한 상태 변수가 변경될 때 useEffect가 호출할 수 있게하여 호출 시점을 설정할 수 있다. 🔍 useEffect 예제◾ 의존성 배열이 비어있는 경우useEffect(()=> {// *** 실행할 코드 ***},[])👉 빈 배열 ( [] ) 로 설정할 경우 컴포넌트가 처음 마운트 될 때 한번 실행되고 다시 실행되지 않는다.      화면이 처음 출력될 때 초기 데이터를 가져오거나 다시 실행될 필요 없을 경우 사용된다.◾ 의존성 배열에 상태 변수를 넣을 경우const [number,setNumber] = use..

오늘은 useEffect를 배워보면서 클린업 함수라는 것을 처음 접해봤다. useEffect 는 어느정도 개념이 있었으나 클린업은 처음 접해보는 개념이라 이해를 해가며 포스팅을 작성하려고한다.  🔷 클린업 함수❓ useEffect란먼저 useEffect란 컴포넌트의 생명주기를 제어하는 함수로 컴포넌트가 생성되거나 업데이트 될 때 또는 종료 될 때 실행할 코드를 설정할 수 있다. ❓ 클린업이란특정 함수가 언마운트(함수 종료)되고 난 후 미처 정리하지 못한 상황을 정리하는 함수이다.즉 함수 내부의 실행 동작이 함수가 종료되고 나서도 같이 종료되지않고 잔여물로 남아 실행되는 것이다.   ❓이럴 경우의 문제점남아있는 동작들의 의해 메모리에 쌓이며 메모리 낭비를 초래 하거나 성능저하또는 원하지 않던 결과를 만나..

현재 내가 만들고있는 미니게임이 있다.   🔴 게임 설명게임 시작 버튼을 누르면 3초 카운트 다운을 한 뒤 10초 동안 랜덤으로 공격이 들어오고 타이밍에 맞춰 방어를 하면 성공 못하면 실패이다. 결과 판정을 위한 시간 계산을 요약해서 설명하자면 🕛 시작 버튼 클릭 시간 + 공격 타이밍 시간(1~10초) + 카운트다운 시간(3초)  =  통과 시간만약 현재시각 10초쯤에 클릭을 하였고 공격 타이밍은 랜덤으로 3초가 나왔다고 가정한다면카운트 다운 3초  까지 합산하면 통과시간은 16초 가 된다. 그리고 난 뒤 방어 버튼 클릭한 시간을 구하여 비교를 하여 결과를 구하는 방식이다. ❓현재 시간의 초 단위를 구하는 방법const date = new Date();date.getseconds();  🤔 하지만 ..

오늘은 리액트를 사용하여 START 버튼을 누르면 3 2 1 카운트가 울리고0이되면 사라지는 카운트 다운을 구현해볼것이다. style 요소는 빼고 오로지 기능을 구현한 코드만 예제로 쓸것이다.1️⃣ 이벤트를 실행 시킬 버튼 생성Main 컴포넌트 onClickStart} play={play} /> Button style 컴포넌트 Button 컴포넌트는 Main에서 props로 clickEvt 와 visible을 전달 받아온다.clickEvt는 클릭 시 이벤트를 발생 시키는 함수이고, visible은 버튼의 표시 여부를 클래스이름에 담는 용도이다. play는 시작(true) 일 경우 버튼을 hide 하고 종료(false) 일 경우 버튼을 show 한다.import styled from "styled-comp..

오늘은 버튼 클릭 시 버튼요소가 사라지게 하는 코드를 짜볼것이다.   📘 방법 간단 설명버튼을 클릭하면 이벤트가 발생하여 useState로 지정한 visible의 상태값이 false로 변환한다.Button 컴포넌트에 visible의 상태값이 props로 전달된다.Button에서 visible이 false(숨김) 일 경우 className을 hide로 한다.css로 className="hide" 는 display:none; 하여 요소를 없앤다.1️⃣ Button 컴포넌트와  메인 컴포넌트를 준비한다.MainHome.jsconst MainHome = () => { return ( onClickStart} visible={visible}> );};export default MainHome; Butto..