👉 CSS 이벤트 제어 속성을 사용하자 pointer-events : none; ... .select-group { position: relative; } .select-group .ic-caret { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); ... } ic-caret(아이콘)는 position: absoulute를 줬지만 select 태그는 positon 속성을 주지 않아서 static 상태이다. ic-caret이 select 태그를 덮어버린 상황이여서 아이콘을 아무리 클릭해도 select를 인식하지 않았다. pointer-events : none; cursor 포인터의 pointer 누르는 것과 관계없는 아이콘에 적..
페이지마다 다른 스타일의 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..
리액트 협업 프로젝트 : 개발 관련 유용한 정보 공유 목적의 웹페이지 URL 아카이빙 서비스 01. svg 이미지 사용방식 Svg.js에 필요한 아이콘을 컴포넌트화해서 사용하는 방식이다. svg 이미지의 크기, 컬러 변경의 여지를 고려했을 때 원하는 대로 커스텀이 가능하기 때문에 컴포넌트화 하는 방식을 사용해보면 좋다. svg 코드에서 바꾸고자 하는 요소를 current로 바꾼 후, 사용하는 컴포넌트에서 props로 내려준 후 수정 가능하다. // Svg.js export const ExternalLink = () => { return ( ... ); }; export const ArrowDown = () => { return ( ... ); }; ... // ViewCard.js import Exter..
1. input 자동완성 기능 끄기 input 창에 이전에 테스트용으로 작성한 텍스트들이 뜨는 것을 일일이 지우기 귀찮았다... 사용자의 편의를 돕기 위해 브라우저가 기억해두는 고마운 기능이지만 레이아웃, 디자인을 방해하는 요소로 작용하기도 한다. 위에 사진은 프로젝트 post 페이지 안에 댓글 입력창 부분이다. 자동완성 기능을 사용해서 댓글을 입력했고, input 선택 영역이 padding 값을 포함한다는 것을 알게 되었다. 우선 margin 값으로 변경해서 영역 문제는 해결했고, 텍스트가 계속 쌓이면서 UI를 헤치고 있어서 자동완성 기능을 없애는 방향을 선택했다. 📁 autocomplete="off" : 자동 완성 기능을 없애는 방법 input 태그 안에 autocomplete 속성을 off로 설정..
commit 하면 안 되는 브랜치에서 실수로 잘못 commit을 했다. 바로 이전 커밋을 취소하는 방법을 아래 명령어로 해결했다. 앞으로 commit을 잘못 push 한 경우에 유용하게 사용할 수 있을 것 같다. 주의할 점은 되돌아간 commit 이후의 모든 commit 정보가 사라진다는 것이다! 협업 시에 이런 상황이 온다면 팀원과 상의 후에 진행하기! 가장 최근 커밋 되돌리기 git reset Head^ 커밋 n개 되돌리기 git reset "HEAD~n" 참고 사이트 [Git] 커밋 취소하기 : git reset HEAD Git add, commit, push 취소하기
-
Select 태그 내 아이콘 선택이 안될 때
👉 CSS 이벤트 제어 속성을 사용하자 pointer-events : none; ... .select-group { position: relative; } .select-group .ic-caret { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); ... } ic-caret(아이콘)는 position: absoulute를 줬지만 select 태그는 positon 속성을 주지 않아서 static 상태이다. ic-caret이 select 태그를 덮어버린 상황이여서 아이콘을 아무리 클릭해도 select를 인식하지 않았다. pointer-events : none; cursor 포인터의 pointer 누르는 것과 관계없는 아이콘에 적..
-
[공유노트] React Router dom - useLocation
페이지마다 다른 스타일의 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 컴포넌트 사용
리액트 협업 프로젝트 : 개발 관련 유용한 정보 공유 목적의 웹페이지 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 효과
1. input 자동완성 기능 끄기 input 창에 이전에 테스트용으로 작성한 텍스트들이 뜨는 것을 일일이 지우기 귀찮았다... 사용자의 편의를 돕기 위해 브라우저가 기억해두는 고마운 기능이지만 레이아웃, 디자인을 방해하는 요소로 작용하기도 한다. 위에 사진은 프로젝트 post 페이지 안에 댓글 입력창 부분이다. 자동완성 기능을 사용해서 댓글을 입력했고, input 선택 영역이 padding 값을 포함한다는 것을 알게 되었다. 우선 margin 값으로 변경해서 영역 문제는 해결했고, 텍스트가 계속 쌓이면서 UI를 헤치고 있어서 자동완성 기능을 없애는 방향을 선택했다. 📁 autocomplete="off" : 자동 완성 기능을 없애는 방법 input 태그 안에 autocomplete 속성을 off로 설정..
-
🔧해결 - git commit 취소하기
commit 하면 안 되는 브랜치에서 실수로 잘못 commit을 했다. 바로 이전 커밋을 취소하는 방법을 아래 명령어로 해결했다. 앞으로 commit을 잘못 push 한 경우에 유용하게 사용할 수 있을 것 같다. 주의할 점은 되돌아간 commit 이후의 모든 commit 정보가 사라진다는 것이다! 협업 시에 이런 상황이 온다면 팀원과 상의 후에 진행하기! 가장 최근 커밋 되돌리기 git reset Head^ 커밋 n개 되돌리기 git reset "HEAD~n" 참고 사이트 [Git] 커밋 취소하기 : git reset HEAD Git add, commit, push 취소하기