git rebase -i 를 하다 생긴 궁금증

git rebase 를 하다보니까 궁금증이 생겼습니다. git rebase -i [커밋해쉬] 위 명령어를 사용했다고 가정을 하고, pick 이전 커밋 pick 테스트 1 pick 테스트 2 pick 테스트 3 pick 테스트 4 만약에 2,4를 합치고 싶다고 할때 pick 이전 커밋 pick 테스트 1 s 테스트 2 pick 테스트 3 s 테스트 4 위 처럼 하면 될줄 알았는데 결과는 테스트1 + 테스트 2 , 테스트 3 + 테스트 4가 되어 버리더라구요. 그래서 방법을 바꾸어서 pick 이전 커밋 pick 테스트 1 pick 테스트 3 pick 테스트 2 pick 테스트 4 rebase 를 통해서 순서를 바꿔준다음 pick 이전 커밋 pick 테스트 1 pick 테스트 3 pick 테스트 2 s 테스트..

box shadow 를 알려주는 사이트!

https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check, copy and edit CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. getcssscan.com

안드로이드 에뮬레이터 세팅방법

안드로이드 에뮬레이터 세팅방법 안드로이드 스튜디오 설치 https://danu.dev/macos/Mac-OS-settings-4/ M1 맥 개발환경 설정 - (4) 안드로이드 스튜디오 설치 서론 M1 Pro가 탑재된 2021 맥북프로 16’를 구매해서, 환경설정을 다시 할 필요성이 있었다. 이전 M1 맥북에어 환경설정을 할 땐 이리저리 충돌난걸 ‘야매’로 고쳐서 겨우겨우 돌아가게 한 것들 danu.dev 위 글을 통해서 안드로이드 스튜디오를 설치한 후 저는 안드로이드로 작업은 안하고 에뮬레이터만 사용할 것이기 때문에 No Activity를 선택했습니다. 위 과정을 마치고 나면 에뮬레이터를 실행 할 수 있다! 다음과 같이 말이다. 이때 localhost에 접근하고 싶다면 127.0.0.1 이 아닌 10.0..

[반응형] 모바일 환경에서 스크롤 방지, 모바일에서 url 창을 제외한 브라우저 크기의 vw , vh 만들기

문제점은 다음과 같았습니다. 채팅방 목록 페이지는 꽉 찬 화면에 스크롤없이 구현되어야했는데요. 다음 영상을 보면 뭐가 문제점인지 알 수 있습니다. 드래그가 생겨 UX 가 굉장히 안좋다는 것을 알 수 있었습니다.. 우선 문제점을 해결하기 위해서 다음과 같은 방법을 사용했습니다. 블로그에서 다음과 같은 방법을 검색해서 사용하였는데요. 링크는 아래 참고자료 목록 자료1 으로 추가해놓았습니다. const setScreenSize = () => { let vh = window.innerHeight * 0.01; console.log(vh); document.documentElement.style.setProperty('--vh', `${vh}px`); }; 자바스크립트에서 window.innerWidth, win..

local 개발 환경과 내 폰을 연결하는 방법

최근에 모바일 반응형 작업을 시작하게 되었다. 당연히 모바일에서 어떻게 화면이 나오는지가 중요했다. 처음에 나는 어떻게 해야할지를 몰라서 같이 개발하시는 분이 CI/CD 를 구성해놓으셨기때문에 그 CI/CD로 배포된 url를 통해 화면을 확인했다. 배포가 되는 시간이 5분정도 매우 오래걸리기 때문에 너무 불편함을 느꼈다. (css 하나 변경해도 5분을 기다려야했다.) 다른 방법이 없나 찾아보다가 커뮤니티에 도움을 요청드렸다. 2가지 방법을 알아내었다. 1. 같은 와이파이 환경에서 ip를 통하여 내 스마트폰으로 화면을 볼 수 있었다. 2. 에뮬레이터를 통한 방법 우선 에뮬레이터는 지금 설치를 하는중이라 안드로이드 스튜디오와 xcode 환경모두 구성하려면 시간이 걸릴 것 같아 비교적 빠르게 할 수 있는 1번..

반응형 작업하다 간단한 메모.

조금 그림이 이상한데 현재 상황의 문제점은 다음과 같다. 아래에 채팅방 목록에 100vh를 주게되면, 100vh는 브라우저의 높이이기 때문에 화면에 딱 맞게 그리지 못하고 아래의 분홍색 섹션처럼 의미없이 길어지는 영역이 발생했다. 이러한 문제점을 해결하기 위해서, 해당 분홍색 섹션의 높이를 calc를 사용해서 빼주어 문제를 해결할 수 있었다. 간단하지만 또 까먹기 때문에 메모한다. 코드는 다음과 같다. height: calc(100vh - 200px);

git rebase -i

git commit 을 합치고 싶을 때가 있다. 다음 처럼 위 4개중 (위부터 1번) 1번 3번 commit을 합치고 싶을 경우가 있다. 그렇다면 5번째 commit 의 해쉬값을 입력한다. git rebase -i [commit hash] 그러면 다음과 같은 화면이 뜰 것이다. 합치고 싶은 커밋을 pick -> s 로 변경한다. https://meetup.toast.com/posts/39 git squash - 여러개의 커밋로그를 하나로 묶기 : NHN Cloud Meetup git squash - 여러개의 커밋로그를 하나로 묶기 meetup.toast.com reword는 커밋이름을 변경할 수 있게한다.

[Git] 일부코드만 add 하기

[Git] 일부코드만 add 하기 git으로 코드 히스토리를 만들며 작업하고 있다. 하나의 파일에 무아지경으로 작업을 하다보면, 같은 파일에서 일부코드만 add 하고 커밋을 하고 싶을 때가 있다. 오늘은 그 방법을 알게되어서 기록을 해보려고 한다. git graph로 본 코드 변경 사항이다. 나는 그중에서 53 - 62 번 째 라인만 따로 add 하고 커밋을 하고 싶다. 왜냐하면 저 코드는 메타마스크 계정의 변화를 감지하는 event 이기 때문에 '메타마스크 이벤트 추가' 와 같은 식으로 커밋을 하고 싶기 때문이다. Step 1 ) add 할 부분 드래그 하기 Step 2) 1. shift + command + p 2. Git: Stage Selected Ranges 위 두가지 과정을 거치면 해당 코드만..

[Material-UI] sx props style

아 mui 로 된 프로젝트를 보는데 갑자기 다음과 같은 코드를 봤다. 무슨의미인지 정말 몰랐었다. 뭐를 모르는지 모르는 느낌? zIndex: (theme) => theme.zIndex.drawer + 1, https://mui.com/system/the-sx-prop/ The sx prop - MUI System The sx prop is a shortcut for defining custom style that has access to the theme. mui.com 공식문서를 뒤적거리니까 다음과 같은 정보를 얻을 수 있었다. 그래도 모르겠더라.. 삽질해서 조금이나마 이해했다. https://codesandbox.io/s/bold-cori-dt5jg5?file=/src/App.js bold-cori-..

git fork 한 저장소 최신화 하기

https://json.postype.com/post/210431 [Git] Fork 한 repository 최신으로 동기화하기 Fork 한 repository 를 최신으로 동기화시켜야 할 때가 있다. Open Source 에 단발성이 아닌 지속적으로 contribution 하려 할 때수정해서 사용하기 위해 fork 해온 원본 repository 에서 업데이트된 부분을 받아 json.postype.com