Project
-
[공유노트] React Router dom - useLocationProject/모라도 공유노트 2022. 2. 28. 02:15
페이지마다 다른 스타일의 Header 컴포넌트를 보여주고 싶은 경우 Home 페이지 New, ViewPage, NotFound 페이지 01. React Router dom - useLocation Link 태그에 current={location.pathname !== "/"} 속성을 추가한다. useLocation : url 정보 가져오는 함수 pathname : 이동할 페이지 주소 // Header.js import { Link, useLocation } from "react-router-dom"; ... export const Header = () => { const location = useLocation(); // console.log(location); return ( 공유노트 ); }; con..
-
[공유노트] Svg 컴포넌트 사용Project/모라도 공유노트 2022. 2. 27. 23:23
리액트 협업 프로젝트 : 개발 관련 유용한 정보 공유 목적의 웹페이지 URL 아카이빙 서비스 01. svg 이미지 사용방식 Svg.js에 필요한 아이콘을 컴포넌트화해서 사용하는 방식이다. svg 이미지의 크기, 컬러 변경의 여지를 고려했을 때 원하는 대로 커스텀이 가능하기 때문에 컴포넌트화 하는 방식을 사용해보면 좋다. svg 코드에서 바꾸고자 하는 요소를 current로 바꾼 후, 사용하는 컴포넌트에서 props로 내려준 후 수정 가능하다. // Svg.js export const ExternalLink = () => { return ( ... ); }; export const ArrowDown = () => { return ( ... ); }; ... // ViewCard.js import Exter..
-
[🌏어스마켓 프로젝트] input 자동완성 끄기, useForm reset, SVG 효과Project/어스마켓 2022. 2. 17. 02:04
1. input 자동완성 기능 끄기 input 창에 이전에 테스트용으로 작성한 텍스트들이 뜨는 것을 일일이 지우기 귀찮았다... 사용자의 편의를 돕기 위해 브라우저가 기억해두는 고마운 기능이지만 레이아웃, 디자인을 방해하는 요소로 작용하기도 한다. 위에 사진은 프로젝트 post 페이지 안에 댓글 입력창 부분이다. 자동완성 기능을 사용해서 댓글을 입력했고, input 선택 영역이 padding 값을 포함한다는 것을 알게 되었다. 우선 margin 값으로 변경해서 영역 문제는 해결했고, 텍스트가 계속 쌓이면서 UI를 헤치고 있어서 자동완성 기능을 없애는 방향을 선택했다. 📁 autocomplete="off" : 자동 완성 기능을 없애는 방법 input 태그 안에 autocomplete 속성을 off로 설정..