리액트 포트폴리오 사이트 제작기 5편

728x90

로컬 스토리지 - 테마 변경시 로컬스토리지로 값 저장해두어 새로고침 시에도 유지하기
조건부 렌더링 - 모바일과 데스크톱 환경에 따라 다른 홈 화면 렌더링하기
Framer-motion - 스크롤 시 컴포넌트에 애니메이션 추가
코드 성능 개선 - 함수 중복실행되는 것들 확인하고 줄이기, 컴포넌트 성능 최적화
CRUD - Firebase Cloud FireStore 연동
CRUD - 게시글 수정, 삭제는 작성되어 화면에 반영된 개별 게시글에서 호버 시 수정, 삭제 아이콘이 나오고 클릭시 동작하도록 하기 → 본인이 작성한 글만 수정/삭제가 가능하도록 하려면 로그인시 받은 정보로 비교해서 필터링. uid로 비교해야 할까?
nodemailer 붙이기

1. 추천사 CRUD

고칠 부분

[x] 데이터 추가 시 정렬의 어긋남 문제
[x] 배포 환경에서 발생하는 crbug/1173575, non-JS module files deprecated. 에러 해결

1.1 깃허브 로그인 기능 non-JS module files deprecated 에러 해결하기

참고:

nodemailer를 사용하기 위해 express 서버를 만들면서 helmet 미들웨어를 사용하였다. helmet은 HTTP 응답 헤더를 설정해주는 미들웨어 패키지 모듈(여러 미들웨어 모듈을 합친 것)이다.

현재 index.js(API 서버)에서 응답 헤더에 CSP(contentSecurityPolicy)를 추가해두었기 때문에 배포 환경에서 CSP 헤더에 언급되지 않은 리소스들을 로드하는 것을 block하므로 깃허브 로그인 버튼 클릭시 파이어베이스 코드가 제대로 동작하지 않는 것으로 생각된다.

개발자 도구의 네트워크 탭에서 응답 헤더를 보니 cors 허용이 적용되지 않아 생긴 문제로 생각된다.

임시 조치: cors의 origin도 설정하고 csp 옵션도 helmet.js 미들웨어로 열심히 줘 봤지만 도저히 해결이 안되서 팀프로젝트 기간 시작이 임박해서 시간상 어쩔수 없이 익스프레스 서버 자체를 빼버리고 다시 배포해서 파이어베이스 관련 cors는 일단 해결..

2. Contact 컴포넌트 완성

3일동안 매달렸는데 배포 환경에서의 cors 문제를 해결하지 못해 우선 보류함..

파이어베이스를 쓰기로 했으면 끝까지 파이어베이스를 쓰는게 낫겠다.. nodemailer를 위한 서버 따로 추천사 crud를 위한 파이어베이스 OAuth로그인, cloud firestore 연동을 병행하는데서 문제가 있는것 같다.

1. express 서버 연동해서 nodemailer 사용하기 (보류)

→ 해당 기능만 분리해서 배포하고 웹뷰로 넣어서 시도중.

참고: https://velog.io/@nemo/nodemailer

기존 client 폴더에서 프론트엔드와 파이어베이스 관련 코드만 작성하고 있었던 파일 구조를 nodemailer를 사용하기 위해 client-server 구조로 변경하였다.
클라이언트의 contact 컴포넌트에서 axios로 요청, 요청에 대한 응답 처리는 서버에서 처리.
~~firebase나 구글클라우드의 기능을 이용해서 사용해볼수도 있겠는데 아직 잘 모르는 부분이 많아 우선 생략.~~ → 시도해보았으나 gmail 계정 사용 시 인증문제 해결 못하여 롤백.

1.0 버젼 배포 완료: https://ryan-kim-portfolio.herokuapp.com/

남은 부분: nodemailer 정상작동 시키기, 모바일 레이아웃 구현, framer-motion 사용하기