이번에는 기존 구현된 페이지를 보수하는 작업을 이어가려고 합니다.
🎉 Done
1. 메인 페이지 헤더 영역 추가 수정
skeleton 상태일 때 너비값이 잘 계산되지 않는 문제가 있었어요
-
정상적인 메인 페이지 모습
-
skeleton 상태의 메인 페이지 모습
구데기로 나오는 모습을 확인할 수 있네요..
1-1. 원인
skeleton과 실제 PostCard를 구성하는 컴포넌트가 달라서 발생하는 문제였습니다.
- 로딩 여부에 따라 두 개로 구분된 컴포넌트
로딩 여부에 따라 PostCardGrid와 PostCardGridSkeleton 컴포넌트를 사용한다는 것을 꼼꼼히 체크하지 못한 저의 잘못이었습니다.
1-2. 해결
skeleton에도 id를 부여하여 로딩 여부에 따라 너비값을 계산하는 주체를 다르게 할 수 있도록 변경하였습니다.
-
기존 코드
-
변경 코드
1-3. 결과
- skeleton 상태에서도 정상 동작하도록 수정
2. DB 커넥션 문제
어느 날 갑자기 DB 접속이 안 된다는 청천벽력과 같은 소식이 들려왔어요..
- 메신저 화면
제가 잘 모르는 분야이기도 하고 작업한지도 오래 돼서 또 날라간 것은 아닌가 덜컥 겁이 났어요;
일단 부리나케 메일함을 달려가봤습니다.
- 공포의 빨간딱지
뭔가 문제가 발생했나봐요..
자세히 읽어보니 '무슨 문제가 있어서 재부팅을 했다..' 이런 내용이네요.
-
인스턴스 ip 주소 확인
reboot 하면서 ip가 바뀌었나? 하고 확인해봤는데 아니었어요! -
ssh 접속을 통한 확인
그래서 ssh로 접속 후 DB 생존 여부를 체크했는데... 정상이었습니다. -
방화벽 확인
$ iptables -L
명령어를 통해 확인해보니 재부팅하면서 방화벽 설정이 날아갔네요..
- 방화벽 설정 추가
$ iptables -I INPUT 1 -p tcp --dport 5432 -j ACCEPT
$ iptables -I OUTPUT 1 -p tcp --dport 5432 -j ACCEPT
위 명령어를 통해 5432 포트를 열어줬습니다!
- 동작 확인
짠! 기쁘게도 pgAdmin 클라이언트가 정상 동작하게 됐습니다.
📝 To-Do
1. 출간하기 후 포스팅 view 페이지 연결
2. 기존 포스팅에서 수정하기 클릭 시 시나리오 구현
3. 이미지 업로드 API 연결
Front-end Developer