본문 바로가기

전체 글26

GitHub - 보안성 취약 해결 및 gitignore 최근 Node.js를 활용하여 Chatting 하는 웹 앱을 만들어보기 위해서 Socket.io의 예시 코드를 공부하고 있었습니다. 이제 코드들을 한번씩 따라 쳐보면서 익혔다고 생각했고, 이 코드를 기본으로 하여 Chatting App을 만들어보자는 생각에 GitHub에 올리게 되었습니다. 하지만 GitHub에 올려보니 처음보는 경고 알림이 와있었습니다. 또한 GitHub 가입시 사용했던 메일 주소로도 메일이 도착했습니다. 어떤 것 때문에 경고가 왔는지 View security alerts를 눌러 내용을 확인해보았습니다. 모두 패키지들을 dependencies에 관한 문제들이었습니다. 버전이 낮다는 소리 같았습니다. 해결방법 또한 알려주고 있었고, 최소 권장 버전을 알려주었습니다. 패키지들만 업데이트해주.. 2020. 3. 31.
React - To Do Item의 hover 의사클래스와 word-break, scrollbar 오늘은 ToDoItem의 CSS를 마무리 지은 것 같습니다. 처음에는 오늘 진행할 작업들을 JavaScript를 사용해서 class를 추가하고 빼는 방법밖에 몰라 CSS 작업에서 다루지 않았습니다. 하지만 작업을 진행하며 hover라는 CSS의 의사 클래스(psuedo-class)를 알게 됐고 간단히 처리할 수 있어 어제와 같이 기분 좋게 작업을 진행했습니다. 먼저 오늘의 작업 결과 화면 입니다. 보시는 것과 같이 이제 ToDoItem들은 마우스가 해당 Component위에 있을 시에만 배경색이 흰색이 되며, 삭제와 완료 버튼이 등장하게 됩니다. 또한 오늘 작업을 하면서 발견한 부분인데, Input의 길이가 길면 저는 할당된 길이를 유지하며 문장이 아래로 나 위어 보일 줄 알았지만 그렇지 않았습니다. 그.. 2020. 3. 17.
React - ToDoItem Check 기능 추가 이번 글에선 ToDoList에서 필수적인 기능인 Check기능을 추가해 보았습니다. ToDo Item 각각마다 있는 ✔을 누르면 check의 상태가 false인 경우, Text의 색은 회색이 되며 가운데 줄이 쳐지게 됩니다.또한 저장소의 내용은 false에서 true로 변경됩니다. true인경우에는 본래 아이템을 추가할 때의 상태처럼 되돌아 갑니다. 바로 기능이 적용된 모습을 보여드리겠습니다. localStorage의 상태와 같이 비교하신다면 Work1,3,4는 checked라는 키값이 true인걸 볼 수 있습니다. 그에 따라 글씨의 색은 회색, 그리고 가운데에 취소선이 추가된 것을 볼 수 있습니다. # 오늘의 작업 ToDoItem.css .checked { color: grey; text-decorat.. 2020. 3. 16.
React - CSS작업 오늘은 기존에 작업을 하던 ToDo List React App에 CSS작업을 해보았습니다. 바로 결과 화면을 보여드리겠습니다. 디자인 센스가 없어 일단 색 테마는 인스타그램의 AwesomeColor 님 게시물에서 가져와서 나름대로 채도 조절을 하여 진행해보았습니다. CSS를 적용하면서 추후에 넣을 기능들을 고려하여 추가하기도 하고, 변경하기도 한 부분이 많아졌습니다. 제 GitHub에 모두 올려 두었으니 시간을 절약하고자 하신다면 참고하셔서 본인의 기호대로 재정의 하시는 것도 좋을 것 같습니다. 기능적으로 추가한 것은 ToDoTemplate에서 할 일을 입력받기 위해서 input tag를 사용하였는데, '오늘의 할 일'이라는 placeholder가 입력이 있기 전까진 사라지지 않았습니다. 그래서 저는 i.. 2020. 3. 16.

티스토리툴바