[1人 프로젝트] 트위터 클론코딩 6회차

글자 크기를 손보면 더 예쁠거 같긴하다.

1. 🎉 성과

1.1. 완성한 부분

로그인 페이지 CSS파일 초안 완성

 

 

---

 

 

2. ✨ 느낀점

2.1. 👍 알게 된 점

2.1.1. 모듈을 이용하여 CSS파일 적용할때, className 2개 이상 적용시키기

`${...} ${...}`JAVASCRIPT

자바스크립트에서 문자열에 변수 사용할때처럼 사용하면 된다. 특이한점은 ,(콤마)로 구분짓지 않고, 띄어쓰기로 한다는 점이 특이하다.

 

2.1.2. 에러 해결

배포하기 전에는 어느곳에도 에러 메시지가 없었는데, 깃페이지로 배포 후에 콘솔창에 에러메시지가 적혀있었다.

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanupHTML

이러한 경고가 나오는 원인은 내가 작성한 코드가 실행(mount)되어 어떤 데이터를 불러오고 있는데, 데이터를 전부 불러오기 전에 페이지를 이동하는 행동으로 실행이 취소(unmount)되었을 경우에, 데이터를 불러오는 작업이 강제로 중단되었을때 발생하는 에러이다.

해석해보면 내 메모리가 누출되고 있으니, useEffect의 cleanup함수를 사용해서 해결해라!라는 뜻이다.

내가 큰 데이터를 불러오고있는 코드는, 로그인한 유저의 데이터를 불러오는게 데이터크기가 크므로, return코드를 작성하였다. 데이터가 다 불러오기 전에, unmount되었을경우 메소드 실행을 취소한다는 코드를 작성했다.

 

2.2. ❗  보완할 점

1. 추후 보완

1. 처음부터 내가 작업한 것이 아니라, 강의를 보며 따라한 것이기 때문에 아직 익숙하지 않아 덜 깔끔하다. 전체적인 초안작업을 한 이후에 보완을 해야겠다.