🏁 Goal: 매거진 사이트 제작!

• step 3. 완성된 백엔드와 실제로 연결해보기 -> 연결 성공!

step 1 완성 : 파이어베이스로 구현한 매거진 사이트

firebase + github actions hosting : Click!

step 2 성공! <-- axios 레파지토리는 여기! 배포 전입니다.

백엔드와 로그인, 회원가입, CRUD, 좋아요 기능을 연결하는데 성공!

백엔드로 가입하는 아이디/비밀번호는 파이어베이스와 양식이 조금 달라서 레파지토리를 따로 팠어요!

사용기술 : Axios, dotenv, http-proxy-middleware

step 3 성공!

LCP 4.2초 -> 1.8 ~ 2.0초 (크롬 플러그인으로 돌렸을 때) 이 사이트에서 돌리면 0.9초 https://pagespeed.web.dev/ 여기서 돌리세여

• 시도한 방법 1. 스피너 의무적으로 3초 띄웠던거 삭제하고 랜딩페이지(App.js랑 PostList.js, Header.js)에 리액트 내장 플러그인인 lazy, Suspense 사용!

• 시도한 방법 2. 사용하지 않는 import된 모듈들 제거하고 쓰지 않는 것들은 package.json에서 yarn remove로 다 삭제

• 시도한 방법 3. 헤더 컴포넌트에서 비로그인 유저부분만 간소화 (그냥 모양만 만들어두었던 유저프로필 부분 주석처리라던지..)

• 시도한 방법 4. 여기까지 해도 2.5초여서 LCP부분을 뜯어봤더니 발견한 사실... 크롬 개발자도구로 라이트하우스를 돌리면 내 크롬브라우저에서 돌아가는 중인 플러그인도 로딩에 포함된다고 함. 걔들이 0.5 - 0.7초를 먹고 있었던 것! 확장프로그램 사용안하는 것들 전부 끄고 다시 돌리자 1.8 - 2초대 까지는 나왔는데 LCP를 측정할 수 있는 사이트에 주소를 줘서 돌리면 더 낫지 않을까 하는 생각이 들어 사이트를 찾아보았습니다. 있었습니다.

시도하지 않은 방법 : 웹팩을 뜯어서 번들 압축설정도 바꿀 수 있다고 하던데 이미 충분한 성능이 나왔으므로 멈췄습니다.

회원가입 기능

- 아이디는 영문과 숫자로만 ✅

- 중복아이디 x ✅ 

- 비밀번호와 비밀번호 확인은 일치해야 함 ✅ 

- 비밀번호에 아이디와 같은 문자가 들어가서는 안됨 ✅ 

- 백엔드 DB와 연결 성공! ✅ 

로그인 기능

- 아이디와 비밀번호를 입력하면 jwt token이 발급됨! ✅  

- 새로고침해도 페이지가 유지될 수 있게 jwt token이 존재하면 is_login을 true로 바꿔줌 ✅ 

- 로그아웃 시 토큰 삭제 기능 ✅ 

- 백엔드 DB와 연결 성공! ✅ 

POST CRUD 기능

- 모든 포스트 불러오기! ✅  

- 내 포스트만 삭제하기 ✅ 

- 내 포스트만 수정하기 ✅ 

- 로그인한 유저에게만 포스트 작성 버튼 보이게 ✅  

- 로그인하지 않은 유저가 포스트 작성버튼을 누를 경우 실패하게 ✅  

- 백엔드 DB와 연결 성공! ✅ 

좋아요 기능

- 좋아요 버튼을 누르면 카운트가 변하면서 하트 색깔도  ✅  

- 로그인한 유저만 좋아요 가능 ✅ 

- 좋아요는 중복되지 않게 ✅ 

- 좋아요 취소 기능 ✅ 

- 백엔드 DB와 연결 성공! ✅