끄적끄적 🐯
현재 리액트를 공부하면서 자바스크립트도 더 깊게 공부하고 있는 중이다.
리액트를 이용하면 html의 기본적인 코드를 하드코딩하지 않아도 되지만, 기본적인 것은 만들 수 있어야 되기 때문에 자바스크립트와 html 구조를 짜는것에 많은 시간을 투자하고 있는중이다.
💻 실력있는 프론트엔드 개발자가 되기 위해서 매일매일 꾸준히 공부중이다!
얼른 리액트, 리덕스, db, aws, TypeScript를 공부해서 프로젝트를 버전별로 리팩토링하고 싶다!
Shopping List project를 진행하면서 생각지 못했던 점!
쇼핑 리스트 프로젝트를 1차적으로 생각해뒀던 기능들을 만들고 코드를 다시 보았는데 interactive한 부분이 조금 부족한 것 같다.
예를 들어서
1. 휴지통 버튼이나 장바구니 버튼에 사용자가 마우스를 올릴 때, 시각적인 효과를 줘서 더 강조하는 기능
2. 사용자가 리스트를 입력한 뒤 인풋 박스를 지우는 처리는 했지만
다시 포커스를 위치하게해서 바로 또 다른 리스트를 입력할 수 있게 처리하는 부분이 부족한 것 같다.
3. 사용자가 아무것도 입력하지 않았을 때의 처리가 없다!
4. 리스트를 많이 입력해서 스크롤이 일어났을 때 가장 마지막에 추가한 리스트를 보여줘야 되는데 맨 처음 추가한 부분에 화면이 보여지는 점도 수정할 필요가 있다. --> 자동으로 가장 밑으로 스크롤링 되게 만들기
평소 웹서핑을 하다가 쇼핑몰에 마음에 드는 제품이나 옷이 있으면 해당 사이트로 들어가는 편인데 내가 보고 있던 상품을 보려고 들어가면, 다른 화면이 뜬다던지 내가 보던 것을 찾기 위해 마우스 스크롤을 많이 내리면서 물건을 찾았었는데 오늘 한 홈페이지는 메인 상품 바로 옆에 내가 클릭해서 들어간 상품을 바로 띄워주는 것을 보고, 이게 바로 사용자 입장에서 만든 것이구나!를 바로 느낄 수 있었다.
리팩토링
1.css에서 transform: scale과 transition을 이용해서 1.1배 확대되면서 컬러를 변경해주는 로직을 추가해주었다.
.delete-btn { font-size: 16px; transition: all 300ms ease-in; } .delete-btn:hover { color: red; transform: scale(1.1); }
- 자동 포커스를 주는 것은 HTMLElement의 메소드인 focus( )를 이용했다.
포커스 된 요소는 기본적으로 키보드 및 유사한 이벤트를 수신 할 요소이기 때문에 input 박스를 요소로 지정한 뒤 포커스 설정을 했다.input.focus();--> 사용자 측면에서 너무 편리하게 잘 처리한 것 같다.
- 사용자가 input 안에 아무내용도 입력하지 않았을 때, 즉
''일 때를 조건으로 줘서 아무일도 실행되지 않도록 처리하였다.if(input.value === '') { return; }그런데 여기서도 한 가지 문제점이 발생한다.
바로, 이렇게 되면 포커스가 또 사라지게 된다. 😿그래서 return을 하기전에 다시 focus( )를 지정해줘야 된다.
if(input.value === '') { input.focus(); return; }위에 코드처럼 해줘야하는 이유는 input에 포커스가 있다가 그 포커스가 버튼으로 옮겨오기 때문이다.
- 두가지 방법으로 스크롤 이벤트를 처리해보았다.
target.scrollTop = target.scrollHeight; target.scrollIntoView({ block: 'center' });
