주말 잘 쉬고 다시 월요일
저번주에 EC2로 웹 서버를 옮기고 켜둔 김에 핸드폰이랑 아이패드로 접속 해봤는데
개발자 도구로 화면 크기를 맞춰서 봤을 때랑 달리 css가 이상한 부분이 많아서
이번주는 반응형 CSS를 손보는 작업을 주로 하려고 한다.
해야할 일
- 다크모드 마무리
- 반응형 CSS 수정
5월 22일 월
아침운동을 갔다가 아르바이트를 갔다오니 너무 피곤하다..
DB 백업
컴퓨터를 키면서 깨달았는데 저번 주에 데이터베이스를 EC2 속으로 옮기면서 데스크탑에서도 해당 EC2의 데이터베이스에 연결해서 개발을 진행중이였는데 아차차 싶었다.
만약 EC2 관련 문제가 생겨서 접속을 못하게 되면?
만들어둔 DB 스키마가 다 날라가겠구나 싶어서
주기적으로 데이터베이스의 스키마를 백업해야 되겠다고 생각했다.
mysqldump -d -u 사용자명 -p 데이터베이스명 > 백업명.sql윈도우에서 리눅스로 DB를 옮길 때랑 같은 방식이여서 금방 작업했다.
반응형 CSS 수정
반응형 CSS에 대한 공부와 해당 프로젝트 개발을 병행해서 진행했기 때문에
확실히 초반에 만든 컴포넌트들이 다른 기기에서 확인했을 때 어긋나는 경우가 많았다.
safari에서 svg
윈도우나 갤럭시 핸드폰으로 접속했을 때는 svg 아이콘들이 정상적으로 보였는데
아이폰이나 아이패드로 접속 했을 때는 가로 길이가 이상하게 보였다.
어느 부분이 safari에서 다르게 동작하는지 모르겠어서 이것저것 시도해보니
<svg viewBox = "0 0 24 24"/>svg의 크기를 viewBox 속성을 이용 해서 24px로 맞춰두고 사용했었는데 이게 사파리에서는 적용이 안된건지 css로 width : 24px , height : 24px 로 전달하니 잘 적용이 되었다.
아직 svg 태그에 대한 이해가 많이 부족한 편이라 이번주 내로 svg태그의 속성들과 특징에 대해서 공부해보면 좋을 것 같다.
5월 23일 화
해킹 당했다.
EC2로 웹 서버를 열어놓고 인스턴스를 종료하지 않고 있었는데
오늘 평소처럼 웹 서버 실행시켜서 EC2 속의 데이터를 불러오려는데 해당 테이블이 없다는 에러가 떳다.
확인해보니 테이블이 전부 없어지고 README 테이블이 생겼다.
db를 살리고 싶으면 비트코인을 입금하라는 메세지가 담겨있었고
서버가 공격받았다는 것을 확인했다.
공격받은 원인 추측
서버의 로그를 읽어보니 내 사이트로 여러 공격 시도가 있었던 것을 확인했다.
아마도 원인은
- git에 인스턴스 ip와 mysql 비밀번호를 그대로 입력해둔것
- EC2 인바운드 규칙을
0.0.0.0으로 열어둔 것- 아이패드, 아이폰으로 접속 테스트를 해본다고 잠시 열어놓고 잊었다.
- sql 인젝션에 대한 방어조치를 미흡하게 해놓은것
- 범용 포트들을 그대로 사용한 것
이들 중에 있거나 이들 전부가 아닐까 싶다.
결과 (오히려 좋아)
어차피 백업은 해두었으니 문제는 없다.
서버 세팅을 다시하는 것이 좀 귀찮지만 어차피 보안 설정을 대충한 내 업보다.
해킹을 깨닫고 오히려 잘되었다는 기분이 들었다.
이번 기회에 보안 설정에 대해서 더 공부할수 있지 않은가? ㅋㅋ
인스턴스를 새로 파서 서버를 다시 처음부터 설정하면서 다음 이런일이 발생하면 빠르게 조치할 수 있도록 서버 가동에 필요한 명령어들을 기록해 뒀다.
( 전에 도커 특강을 들은 적이 있는데 도커를 사용하면 이런 것들이 쉽게 해결되지 않을까 싶다. 나중에 도커도 공부해보자)
조치 - 보안
-
git에 mysql root 계정 패스워드를 그대로 입력되어 있는데
해당 내용을 .gitignore에 추가해서 git에 올라가지 않도록 수정하였다.https://poiemaweb.com/nodejs-keeping-secrets 추후 참고해서 비밀정보 관리 -
mysql 포트 번호 변경하기
범용 mysql포트인 3306을 변경하는 것이 더 안전하다고 해서 변경하는 작업 진행
5월 24일 수요일
아마존에서 메일을 하나 받았는데 프리티어 limit의 85%를 사용했다는 알림이였다.
탄력적IP(ElasticIP)를 사용할때 인스턴스에 연결되지 않은 IP는 프리 티어적용이 안된다고 들었었는데 이게 중지된 인스턴스에 연결되어 있는 경우에도 해당하는지 몰랐다.
어제 인스턴스를 종료하고 자서 이렇게 된 것 같다.
새로 알게된 사실!
오늘 작업내용
- 다크모드 마무리
- 다크모드 로컬 스토리지 저장, 유저 설정에 다크모드 추가
- 로그인 시 설정 기준으로 다크모드 적용, 미로그인 시 로컬 스토리지 값 기준으로 다크모드 적용
- 모바일 글 작성 부분 CSS 수정작업
5월 25일 목요일
오늘은 자잘한 수정 사항들 위주로 개발하고, 알라딘 전자책으로 책 하나 산 것을 읽으려고 한다.
자잘한 수정사항
- 로그인 하지 않은 사용자에게 구독 버튼이 나오지 않도록 수정
컴포넌트 역할 분리
자잘한 수정들을 하다 보니 최근에 작성하는 컴포넌트들은 역할 분리를 하면서 작성했는데 프로젝트 초기에 만든 컴포넌트들은 역할 분리가 거의 안되어있어서 코드 가독성도 별로고 재사용성도 거의 없었다.
그래서 수정하는 김에 역할 분리를 진행했다.
포스트 뷰어컴포넌트 로직, UI 분리 작업 진행포스트 뷰어내 포스트댓글 컴포넌트분리 작업 수행- 수정 전 (코드가 개판..;)
- 수정 후
컴포넌트 역할 분리 - 느낀점
전에 만들어서 수정을 몇번 한 코드를 역할 분리를 하면서 어떻게 컴포넌트를 분해해야 재사용성이 좋고 추후에 로직이 변경되더라도 리팩터링 하기에 좋을까 생각을 해보면서
컴포넌트를 나누는 기준에 대한 시야가 조금 더 트인 것 같다.
책 - 개발자의 글쓰기
전에 추천받은 적 있는 책인데 요즘 변수(함수)명 짓기도 어렵고, 블로그도 꾸준히 작성할 생각이니깐 읽어보고 싶어서 알라딘 전자책으로 구매했다!
할인 해서 만원 조금 넘게 산 책인데 이동할때나 자기전에 조금씩 읽어볼 생각이다.
5월 26일 금요일
오늘도 시간이 많지 않아서 자잘한것들 위주로 개발했다.
- 모바일 화면 스크롤 버튼
- 댓글 작성자 링크
... 작성중
