Day 18 - ReactJS로 TodoList 만들기 #5

https://studywithzpqmdh.tistory.com/95

Day 17 - ReactJS로 TodoList 만들기 #4

구현 한 것

1. localstorage 추가

2. padding 추가

3. 하트 이모티콘 수정

4. 추가, 삭제 버튼 수정

 

먼저 localstorage는 useEffect를 사용하여 구현하였다.

처음 렌더링될 때 localstorage에서 가져오기 때문이다.

코드는 https://github.com/Hayeon-Lee/my-todo-list 를 참고하여 구현하였다. (감사합니다 ><)

 

그리고 컨테이너에 text가 너무 붙어있어서 조금 답답해보여서 padding으로 여유공간도 확보해주었다.

훨씬 깔끔해보인다. 여유도 있어보이고

추가로 margin 값을 조정하여 컨테이너가 화면 중앙에 위치하도록 하였다. 

그러자 margin과 padding의 차이를 더 짚어볼 필요를 느꼈다.

출처: http://www.tcpschool.com/css/css_boxmodel_padding

margin이 padding보다 더 큰 범위이다.

이를 내가 만든 Todo App에 적용해보면 margin의 값을 조정하여 컨테이너 위치를 조정하였고, padding의 값을 조정하여 컨테이너 안에 속한 컴포넌트의 위치를 조정하였다.

 

하트 이모티콘을 하트 이미지로 교체하였다.

윈도우의 이모지를 사용하니 여는 환경에 따라 다른 하트로 보였다.

통일성을 위하여 이미지를 사용하였다.

구한 하트 이미지가 픽셀 하트라 오락실 느낌도 나서 css 공부도 더 할겸 오락실 느낌의 TodoList를 만들어보고자 한다!

 

마지막으로 추가 버튼과 삭제 버튼의 이모티콘을 통일성 있게 수정하였다.

추가버튼이 키보드 + 버튼을 연상하게 하여 마음에 들었다 :)