본문 바로가기

전체 글350

React(55) 겹친 영역에서 자식 이벤트만 발생시키기 (이벤트 버블링) 부모 영역에서는 클릭하면 상세 페이지로 들어가는 이벤트가 있고, 자식 영역에서는 클릭하면 다른 상세 페이지로 들어가는 이벤트가 있다. 이 때는 부모 영역을 클릭하더라도 자식 이벤트 발생 후 부모 이벤트가 발생한다. 이는 부모 영역이 자식의 영역을 덮고 있어 이벤트 버블링이 발생하여 생긴 이슈이다. 이를 해결하기 위해서는 이벤트 객체를 받아 중지시키는 stopPropagation() 함수를 사용하면 된다. 결과화면 미리보기 **이벤트 버블링이란 (더보기클릭) 더보기 자식함수가 부모 내부에 존재하기 때문에 떨어진 물방울이 바깥으로 번지듯이 자식 → 부모 순으로 이벤트가 실행이 된다. React(55) 겹친 영역에서 자식 이벤트만 발생시키기 (이벤트 버블링) Detail.tsx 자식태그의 onClick 함수인.. 2022. 1. 3.
Git(34) 다중 로컬 브랜치 삭제하기 로컬 저장소에 다 쓰고 버린 브랜치가 꽤 쌓였다. 일일이 명령어 치기가 귀찮아 한꺼번에 지워버리고 싶다. 한번 알아놓으면 좋으니, 몽땅 다 쓸어버리자. Git(34) 다중 로컬 브랜치 삭제하기 1. 로컬에 있는 브랜치들 확인하기 $ git branch -a 2. 그룹 검색어로 조건에 맞는 브랜치들만 필터링하기 $ git branch | grep "C-29" 3. 이제 지워보자구요. $ git branch | grep "C-29" | xarg git branch -D **grep 란 전달된 파일의 내용에서 특정 문자열을 찾고자 할 때 사용하는 명령어입니다. **xarg 란 리눅스 명령어로 기본 명령어(find, ls, cat) 뒤에 파이프로 추가하여 사용한다. 앞의 내용을 인자로 받아 명령어를 실행한다. 2021. 12. 13.
React(54) 타입스크립트 - 버튼 클릭시 버튼 색상 변경하기 리액트로 메뉴 버튼들을 만드는 중이다. 버튼을 클릭하면 클릭한 버튼의 색이 변하게 만들고 싶다. 자 그럼 지금 만들러 가보자. 결과 화면 미리보기 [메뉴 1] 을 클릭하면 그 버튼이 파란색이 되고, [메뉴 2]를 클릭하면 마찬가지로 해당 버튼의 색이 변한다. React(54) 타입스크립트 - 메뉴 버튼 클릭시 버튼 색상 변경하기 먼저 useState 를 이용하여 버튼의 색상을 변경해볼 것이다. 토글 버튼일 때는 boolean값을 주어서 스위치처럼 이용했었지만, 메뉴 버튼은 스위치 개념이 아니라 boolean 대신 분기를 쳐줄 string 값을 넣어 줄 것이다. TabComponent.tsx const [tab, setTab] = useState('curr'); setDealTab('curr')} // 클.. 2021. 12. 2.
Windows - AWS Session Manager 설치하기 윈도우에 맥 개발환경과 동일한 세팅을 위해 AWS Session Manager(SSM) 를 설치하려고 한다. 이를 위해 지난 시간에는 AWS CLI 설치를 하였다. 세팅이 반이니 반은 왔다. 차근차근 진행해보자. Windows - AWS Session Manager 설치하기 1. AWS 공식 웹사이트에서 윈도우용 패키지를 다운로드 받자 (옵션) AWS CLI용 Session Manager 플러그인 설치 - AWS Systems Manager (옵션) AWS CLI용 Session Manager 플러그인 설치 AWS Command Line Interface(AWS CLI)를 사용하여 관리형 인스턴스에 연결하는 세션을 시작 및 종료하려는 경우 먼저, 로컬 시스템에 Session Manager 플러그인을 설 .. 2021. 11. 22.
Windows - AWS CLI 설치하기 (AWS Session Manager 구성) 윈도우에 맥 개발환경과 동일한 세팅을 위해 AWS Session Manager(SSM) 를 설치하려고 한다. 그러기 위해서는 AWS CLI 가 설치가 되어있어야 그 위에서 SSM 을 사용할 수 있다. 맥에서는 $ brew install awscli 만 치면 끝났을 일을, 윈도우에서는 번거롭기 그지없었다. 세팅이 반이다. 차근차근 진행해보자 AWS CLI 란 AWS Command Line Interface(AWS CLI)이다. 즉, AWS 용으로만 사용가능한 CLI 란 뜻이다. 쉽게 말해 터미널에서 $ aws 로 시작하는 명령어를 사용가능 하게 해주는 오픈소스이다. Linux - bash, zsh, tcsh 등 일반적인 쉘 프로그램을 사용하여 Linux 또는 macOS 에서 명령을 실행 Windows - .. 2021. 11. 21.
Git - 충돌 에러 This pull request can't be merged Git 으로 협업하면서 개인적으로 제일 난감했던 부분 중 하나는 바로 conflict 해결이였다. 상황에 따라 어디에서 튀어나올지 모르기 때문이었고, 혹시나 잘못만져서 모두의 코드가 망가질까봐 두려움이 앞섰다. 하지만 두려워할 필요는 없다. 비슷한 충돌을 10번 정도 겪어보면 어느순간 손가락이 자동으로 해결 명령어를 치고 있을 것이다. 충돌이 났다면 이유가 뭐든 한 가지만 기억하자. 나의 코드와 마스터 코드가 겹치기 때문이다. 1. 충돌이 난 코드를 찾아보자. 2. 문제가 있는 부분을 수정하자. 3. 수정후에는 저장(commit → push) 까지 해줄 것이다. Git - 충돌 에러 This pull request can't be merged 빗버킷으로 pull request 를 한 뒤 merge 를 하.. 2021. 11. 18.
반응형

티스토리툴바