React

useState 와 Hook > Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태값과 여러 React의 기능을 사용할 수 있게된다. -> Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수, 함수형 컴포넌트에서 상태값을 사용할 수 있고

이번에 React로 만드는 게시판 기능을 구현해보고 싶어 어떤 사이트를 만들까 고민하다가그냥 커뮤니티 사이트보다 특정 타겟을 삼은 커뮤니티를 만들어보고 싶어서 내 원래 전공 이었던음악하는 사람들을 위한 커뮤니티를 만들기로 했다. (음악하는 사람이 아니여도 음악을 좋아하

오늘은 회원정보와 게시물 관리 등을 위하여 Firebase를 이용한 인증 기능을 구현 해 볼 것이다. Firebase 프로젝트 생성 및 로그인 설정 프로젝트 추가하기 >firebase 콘솔로 이동하면 보이는 메인페이지다. 프로젝트 추가 버튼을 눌러서 새로운 프로젝트를

로그인 페이지를 만들 던 중 label을 placeholder 처럼 쓰면서 애니메이션을 주고 싶어 어떻게 할 지 생각하다 본게 밑에 보이는 애니메이션이다.간단하게 설명하자면 input에 focus되면 label 글자가 왼쪽 위 방향으로 올라가고 인풋이 아닌 다른 부분을

Firebase 셋업을 완료하고 이번에 Firebase 회원가입 기능을 구현 해 보려한다. 이메일로 회원가입 하는 기능을 만들기 전에 회원가입 페이지를 간단하게 구현 하였다. > #### 구현 내용 사용자가 form에 이름 , 이메일 ,비밀번호를 입력한다. 비밀번호

이전에 올린 포스팅에서의 인풋 애니메이션에는 문제가 2가지가 있었다.일단 이전에는 onFocus 와 onBlur 를 사용해 거기에 True / False 값으로각각에 따른 스타일을 주었는데첫번째 문제는 같은 useState를 사용하면 이메일 부분이Focus 되어도 다른

login 됐을때 logout으로 버튼변경login이 성공한다면 Home으로 돌아가기login된 유저의 정보를 받아 화면상에 띄우기logout 기능유저가 로그인 했다는 정보를 전역에서 사용할 것이기 때문에 context 를 만들어줬다.src/context/AuthCon