저번시간에 만들었던 포트폴리오로 방명록사이트를 만들어보았는데
지금 내가 듣고 가장 좋아하는 코딩애플 선생님에게 코칭도 받아보았는데 다른 사람들과 비슷한 수준이라 하셨다. 그리고 다른 사이트들을 보면 CRUD 이외의 다양한 기능들이있는데 그런건 한번 찾아보면서 시도해보려한다.
코칭받아보고 이번에 시도해야할 것
코칭에서 내가 이건 정말 좋은 팁이다 라고 느낀걸로 이번에 시도를해보아야할것같다.
- 방명록사이트 가 아닌 실제 작동하는 서비스처럼 만들어볼것
- 저번에 만든 방명록사이트는 실제 작동하는건 좋으나 디자인이 좀 떨어진다는것
- 방명록사이트에서 마무리에 최적화를 제대로 못해준것에 대한 피드백을 받았으니 이번엔 최적화를 제대로해볼 것
위를 토대로 이번에는 커뮤니티 느낌의 웹앱을 만들어보려한다.
실제 서비스처럼 보이게끔 하기위해 디자인도 수정을해야고
작동되는 기능또한 조금 더 추가를 해주어야할것같다.
방명록에서 그칠게 아닌 그냥 커뮤니티의 느낌으로
글쓰기, 글수정, 글삭제, 댓글, 1:1 채팅기능, 로그인 로그아웃, 회원가입, 등 이번에도 파이어베이스를 사용할 것이고
저번에 만들어 본 방명록보다는 퀄리티를 좀 더 끌어올려야할 것 같다.
(타입스크립트를 사용할 줄 알면 사용할 줄 아는걸 어필하는것이 많이 도움이 될거라고 하셨지만 아직 나는 타입스크립트는 많이 미흡하다. 아마 이 포트폴리오 후에 타입스크립트를 배운 뒤 가벼운 포폴을 하나 더 만들어볼것같다.)
그리고 내 포트폴리오에서 어떤 기능이 있는지와 어떤 기술을 사용하였는지를 어딘가에 소개해주는것이 좋다하였다.
이것도 되게 좋은 팁 같았다.
(아마 마지막에 나를 소개하는 페이지에서 추가해주지않을까 싶다.)
이제 다시한번 시작!
이번에는 커뮤니티 느낌으로 시작을해볼것이다.
디자인 또한 좀 더 공들여야할것이고 애니메이션 효과도 좀 더 넣어서 그럴싸하게 만들어주고자한다.
리액트 폴더를 하나 새로 생성하고 시작해보자.
- 시작하기 전 내가 사용할 것 같은건 미리 설치해두자
나는 항상 리액트라우터와 리덕스툴킷 등 내가 사용하는 라이브러리들이 있기에 이걸 먼저 설치해두고 시작할것이다.
(파이어베이스도 미리 설치를 해두어야하기때문)
설치는 내 벨로그의 저장해둔 모든걸 설치할것같다. (생략)
- 첫번째로 로그인과 회원가입을 만들어보자
이번엔 실제 작동하는 서비스처럼 만들기위해 첫 화면을 그냥 로그인 또는 회원가입을 보여주는 화면을 만들어볼것이다.
그리고 로그인하지않아도 안에 내용물은 확인해 볼 수 있게 둘러보기 버튼도 만들지않을까싶다.
첫 화면을 내가 생각하는건
이러한 화면이다 포토샵이없어 그림판으로 그려놓긴했는데,
구글로그인을 사용할거고 구글로그인이 싫다면 이메일로 회원가입을 할 수 있게도 만들고싶은데 파이어베이스에서 둘 다 사용이 가능한지는 아직 모른다.
리액트 라우터로 이 화면을 첫화면으로 해야하나? 라는 생각이 들긴하는데 그냥 일단 그러기로했다.
그래서 로그인을
첫화면으로 이렇게 설정해뒀다. 로그인과 회원가입부터 끝내고 내부페이지를 만들어보자.
일단 모바일에서 잘 작동하게끔 작은화면부터 만들고 마지막에 CSS를 손보면서 컴퓨터사이즈도 맞춰줄것이기에 모바일사이즈부터 해보자.
디자인을 어떻게 할지 찾아보다 야후 사이트의 로그인화면을 봤는데 꽤 예뻐서 좀 비슷하게 사용해봐도 되지않을까싶다.
일단 기본 틀로 디자인을 대충 이리 잡아두고 기능부터 구현 후에 맨 마지막 최적화단계에서 CSS를 싹 갈아엎던가 해야겠다.
(디자인하면서 만들기는 꽤 어렵더라,, 디자인에는 소질이없는듯)
일단 처음으로 구현해볼건 구글로그인이다.
파이어베이스에서 제공해주는 구글로그인이 있기에 이것도 이번에 사용해보려한다.
파이어베이스의 구글로그인 코드는
파이어베이스를 불러온 index에서 작성을해주었는데 파이어베이스의 문법과함수인듯하여 이렇게 사용하는구나 하고만 넘어가겠다. export로 내보내주어서
로그인에 구글로그인 버튼에 클릭이벤트에 넣어주고 끝냈다.
결과는 뭐 정상적으로 잘 작동했다. 만족스러웠다,
그리고 회원가입페이지도 만들어줘야한다.
이곳은 나중에 로그인을 만들어주도록하고 회원가입으로가보자.
전에했던 방명록과 흡사해서 디자인만 바꿔줬다 라고 생각해도 될정도의 비슷함이다.
물론 안에 작성된 코드도 거기서 거기라고 봐도된다.
이번에는 이미지 업로드를 다른곳에서도 사용할거기때문에
중복적으로 작성될 코드는 이렇게 따로 분리해줬다. 그리고 인자로 경로 이름 사진파일 을 받아와서 작동할 예정이다.
그리고 그 StorageUpload를 가져와 위 처럼 사용해줬다. 정상작동하니 이것도 넘어가도록하자
이번에는 전에 만든것보다 퀄리티를 높히는게 목표이기에 에러검사를 좀 더 열심히 만들어봤다.
회원가입 시 이메일이 아닐때 비밀번호가 6자리 이하일때 파이어베이스에서는 어떤 검사를하는지 어떤걸 콘솔에 알려주는지 모두 찍어본 다음 어떤걸로 검사를해서 에러를 확인할지 찾았다.
콘솔창에 이러한것이 나타나더라. 위는 이메일이 이메일형식이 아닐때고 아래는 비밀번호가 6자리 이하일때다
그래서 나는 이곳에서 저 code를 사용하기로했다.
에러가 났을 때 에러코드가 password인지 email인지 확인하고 에러가났다면
에러메시지를 띄워주게끔 만들어줬다.
저 에러메시지는
이곳에서 false값을 가지고있다가 유저가 이메일을 잘못썼거나 비밀번호가 6자리 이하라면 true로 변경해주면서 display속성을 변경해준다.
되게 간단하다.
그리고 에러가났을 시 에러가 난 부분에 포커스를 넣어주기 필요할듯하여 포커스도 넣어줬는데 포커스를 넣기위해서는 useRef()를 사용해야한다했다
useRef()를 사용해 어떻게 포커스를줬는지는
각각의 포커스가 필요하기에 세개를 만들어두었고
각각의 인풋에 ref속성으로 달아주었다.
그 뒤 그 에러를 검사해줄 if문에서
포커스가 되게끔 만들어줬다.
잘 작동하여 회원가입기능은 이렇게 마무리해주도록했다.
또한 파이어베이스는 회원가입시 자동로그인이 되어있어서
메인 게시판페이지로 넘어가게해줬다.
회원가입은 여기서 마무리짓도록 하겠다!
