리액트
-
[🌏어스마켓 프로젝트] input 자동완성 끄기, useForm reset, SVG 효과Project/어스마켓 2022. 2. 17. 02:04
1. input 자동완성 기능 끄기 input 창에 이전에 테스트용으로 작성한 텍스트들이 뜨는 것을 일일이 지우기 귀찮았다... 사용자의 편의를 돕기 위해 브라우저가 기억해두는 고마운 기능이지만 레이아웃, 디자인을 방해하는 요소로 작용하기도 한다. 위에 사진은 프로젝트 post 페이지 안에 댓글 입력창 부분이다. 자동완성 기능을 사용해서 댓글을 입력했고, input 선택 영역이 padding 값을 포함한다는 것을 알게 되었다. 우선 margin 값으로 변경해서 영역 문제는 해결했고, 텍스트가 계속 쌓이면서 UI를 헤치고 있어서 자동완성 기능을 없애는 방향을 선택했다. 📁 autocomplete="off" : 자동 완성 기능을 없애는 방법 input 태그 안에 autocomplete 속성을 off로 설정..
-
React - 이미지 태그 추가Front-end Dev./React 2022. 2. 4. 01:45
React에서 이미지 태그를 넣는 방법 React에서 이미지 태그를 추가할 경우, scr 속성에 HTML에서 사용하듯 파일 경로를 넣으면 작동하지 않는다. 그렇다면 리액트에서는 이미지를 어떻게 넣을 수 있을까? 어스 프로젝트를 리액트로 진행하면서 이에 관련해서 알게 된 부분, 고민을 해결한 부분을 정리해보려고 한다. 방법 1. 이미지를 import 한 후, 해당 변수를 img 태그 src에 넣어준다. 선언한 변수를 JSX에서 {}로 감싸서 사용한다. import cover from "이미지 경로/cover.jpg"; ... ; ... Navigation 컴포넌트 내에 아이콘 이미지를 import로 불러오면서 코드가 지저분해졌다. ( action 속성에 들어가는 아이콘 이미지도 있어서 더 길어짐) 이렇게 ..