mimii
-
Select 태그 내 아이콘 선택이 안될 때Front-end Dev./HTML_CSS 2022. 4. 4. 22:09
👉 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 - 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로 설정..
-
🔧해결 - git commit 취소하기Front-end Dev./문제 해결 2022. 2. 5. 02:45
commit 하면 안 되는 브랜치에서 실수로 잘못 commit을 했다. 바로 이전 커밋을 취소하는 방법을 아래 명령어로 해결했다. 앞으로 commit을 잘못 push 한 경우에 유용하게 사용할 수 있을 것 같다. 주의할 점은 되돌아간 commit 이후의 모든 commit 정보가 사라진다는 것이다! 협업 시에 이런 상황이 온다면 팀원과 상의 후에 진행하기! 가장 최근 커밋 되돌리기 git reset Head^ 커밋 n개 되돌리기 git reset "HEAD~n" 참고 사이트 [Git] 커밋 취소하기 : git reset HEAD Git add, commit, push 취소하기
-
코드팟 리액트 - 퀴즈 앱 만들기(1)Front-end Dev./React 2022. 2. 4. 14:32
코드팟 리액트 - 간단한 퀴즈 앱 만들기 1. 퀴즈 컴포넌트 만들기 App 컴포넌트 만들기 Class 추가 CSS 입히기 2. 버튼 컴포넌트 만들기 + 이벤트 다루는 법 이벤트 명에 캐멀케이스(camelCase)를 사용 함수 자체를 이벤트 핸들러에 전달해줘야 함 HTML에서 이벤트 처리 Hello World 리액트에서 이벤트 처리 Hello World 2-1. 퀴즈에 이벤트 연결하기 App 컴포넌트 내부에 handleClick 함수 만듦 handleClick 함수를 button에 연결 발생한 이벤트 값 가져오기 ( 정답 오답 기능 추가) value 값 추가 Hello World 이벤트 핸들링 함수에서 event 받기 : 리액트에서 이벤트 핸들러에 함수를 연결하면 함수의 첫 번째 인자로 event 객체를 ..
-
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 속성에 들어가는 아이콘 이미지도 있어서 더 길어짐) 이렇게 ..
-
🔧해결 - 깃허브 폴더 클릭 안되는 경우Front-end Dev./문제 해결 2022. 2. 3. 00:25
디렉토리를 추가한 후 깃허브를 확인해보니 접근이 불가한 상황.. ( 폴더 아이콘 안에 화살표가 생기고 클릭이 안된다. ) .git 폴더가 생겨서 발생하는 문제였다. 상위 폴더에 .git 파일이 이미 생성되었는데, 하위 폴더에도 .git 파일이 존재하기 때문에 이러한 오류가 발생했다. 해결 방법! 1. 폴더 내 .git 파일을 지운다. $ cd 폴더명 $ ls -al (.git 파일이 있는지 확인) $ rm -rf .git (.git 파일 제거) 2. 스테이지에 존재하는 파일 제거한다. : 이 명령어로 변경 사항을 정상적으로 뜨는 것 확인했다. $ git rm --cached . -rf 3. add, commit, push 한다. git add . git commit -m "remove .git files..