본문 바로가기

분류 전체보기346

Git(35) remotes/origin/HEAD -> origin/master 헤드 삭제하기 우리 팀은 빗 버킷에서 rebase 로 관리를 한다. 어느 날부터 한 줄이었던 브랜치가 여러 갈레로 꼬이기 시작했다. 꼬이기 시작한 순간부터 push 할 때마다 이런 메시지가 뜨기 시작했다. Merge branch 'master' of bitbucket.org: 이를 해결하고자 브랜치 리스트를 살펴보다 원격 HEAD 가 원격 master 를 보고 있다는 것을 알게 되었다 🤔 remotes/origin/HEAD -> origin/master (결론적으로 말하면 이 방법으로 해결이 되지는 않았다. 해결방법을 보시려면 포스팅 하단 링크를 참고해주세요 (업로드예정)) Git(35) remotes/origin/HEAD -> origin/master 헤드 삭제하기 왜 나에게 이런 일이 원격 브랜치의 HEAD가 or.. 2022. 1. 25.
Styled-components(4) 배열로 된 div를 2열로 나열하기 배열로 된 데이터를 map()를 이용해 동적으로 가져오면, div가 한 영역 안에 길게 나열된다. 하지만 테이블처럼 2열로 레이아웃해야한다면? (한시간 정도 구글링으로 뒤지면서 어려운 길로 빠지려다 가까스로 구원받았다... 흑흑) 자, 그럼 2줄로 나누러 가보자. (딱 2줄의 코드면 해결되더라 ... 허무쓰) 결과화면 미리보기 매핑된 데이터라 로 영역을 나눌 수 없는 상태에서 column을 2줄로 나누어야 한다. Styled-components(4) 배열로 된 div를 2열로 나열하기 사실 정말 심플하다. 1열 만큼의 width 를 잡아 고정시키고, flex-wrap 속성을 사용하는 것이다. {items.map(item => item)} // 매핑한 데이터 가져왔다고 가정하고 const DIV_Box =.. 2022. 1. 17.
Styled-components(3) 자식 컴포넌트에 커스텀 css props로 전달하기 styled-components 로 개발하며 첫 난관은 자식 컴포넌트에 스타일을 적용하는 것이었다. pure css 로는 필요한 div 태그에 클래스를 만들었는데, 이제 이 방식은 통하지 않는다. 부모 컴포넌트에서 자식에만 있는 속성을 변경하고자 한다. 하지만 자식은 공통컴포넌트라 그 안에서 직접적인 수정이 어렵다. 결국 자식을 건들지 않고, 부모 쪽에서 구체적인 속성 값을 줘서 해결해야 하는 것이다. (나의 경우, 간단하게도 자식컴포넌트의 패딩값을 변경하는 거였는데, 이 쉬운 것을 styled-components 초짜가 하려니 한참 뱅뱅 돌았다.) 자, 그럼 css 를 물려주러 떠나보자. Styled-components(3) 자식 컴포넌트에 커스텀 css props로 전달하기 자식 컴포넌트에 스타일을 .. 2022. 1. 7.
VScode - extension 으로 MySQL DB 연결하기 프론트도 DB를 확인하며 작업을 하기 때문에 지금까지는 터미널에서 직접 들어가 확인하였다. (허나 가시성이 전 ~혀 없어 매우 불편했는데... 🥲 ) 왜 이걸 몰랐을까 mysql 용 vscode extension 이 있다는 사실을 알게 되었다. 이로써 아주 간편하게 DB를 확인할 수 있게 되었다. VScode extension 으로 MySQL DB 연결하기 자, 그렇다면 visual studio code 에서 MySql DB 를 연결해서 사용해보자 1. extension tab을 열어 MySQL을 install 한다. 2. 설치 후 왼쪽 메뉴바에서 mySQL 아이콘 클릭하면 아래와 같은 화면이 펼쳐진다. 상단의 [+] 버튼을 누른 후 빨간박스 안의 정보를 임력해주자. [connect] 버튼을 누르면 DB.. 2022. 1. 5.
Styled-components(2) global 스타일 세팅하기 styled-components 를 사용하여 css 를 컴포넌트화 하여 배경색을 변경하는 실습을 해보자. Styled-components(2) global 스타일 세팅하기 src/typings/theme.d.ts global에 원하는 css 를 작성하기 전에, type을 선언하자. import 'styled-components' import { theme } from '../styles' type Theme = typeof theme declare module 'styled-components' { export interface DefaultTheme extends Theme {} } src/styles/theme.ts 그리고 theme 이라는 css 컴포넌트를 만들어주자. 나중에 여기서 필요한 속성을 .. 2022. 1. 4.
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.
반응형

티스토리툴바