리액트 웹앱개발 - select box / 반응형 오류 / 깃 충돌 해결 / 브랜치 / 머지

 

셀렉트 박스 

 

                  <div className="rightselects">

                    <select id="selects" onChange={this.selectChange}>

                      <option value="최신순">최신순</option>

                      <option value="사용자저장순">사용자저장순</option>

                    </select>

 

body는 이렇게 설정했고 

 

#selects {

  cursor: pointer;

  height: 30px;

  width: 110px;

  border-radius: .25rem;

  background-color: rgba(255,255,255, 0);

  border: 1.5px solid white;

  outline: 0;

  font-size: 9pt;

  font-weight: 500;

  color: white;

}

#selects:hover {

  cursor: pointer;

  height: 30px;

  width: 110px;

  border-radius: .25rem;

  background-color: rgba(255,255,255, 0);

  border: 1.5px solid white;

  outline: 0;

  font-size: 10pt;

  font-weight: 500;

  color: white;

}

#selects:focus {

  background-color: lightgray;

  outline: 0;

  border: 1.5px solid white;

}

 

css는 이렇게.. focus에 background를 주니 다행히 선택 박스가 흰색에서 회색으로 바뀌었다.

selects 자체에 준 글씨 색 white는 아래도 지정이 되지만 아래 배경은 흰색이어서 

lightgray를 focus 통해 주었다.(아래 = 셀렉트 누르면 나오는 셀렉 지정영역)

 

  selectChange(e){

    alert(e.target.value);

  }

 

value 겟은 이렇게 해왔다. 그전에 미리 value도 바디에 설정해놓고.

---

 

반응형 오류 수정 

 

-

일단 자바스크립트로 작은 화면 아이콘 눌렀을 때 검색바 나오게 했는데 이상사태 발생 

 

  rightIconClick(e){

    if(e.target.value === "1"){

      document.getElementById("right").style = "display: block; position:absolute; left: calc(100% - 300px); top: 0; z-index: 9;"; 

      document.getElementById("rightIcon").style= "left: calc(100% - 340px);"

      document.getElementById("rightIcon").value="2";

    } else {

      document.getElementById("right").style.display="none";

      document.getElementById("rightIcon").style= "left: calc(100% - 50px);"

      document.getElementById("rightIcon").value="1";

    }

  }

 

이렇게 했더니 작은 화면에서 누르면 다시 커졌다 작아졌을 때 안사라지고 

작은 화면서 눌렀다가 다시 눌러서 꺼지면 다시 커졌을 때 안나타나고

버튼도 한번 눌러서는 안되고 두번 눌러야 돌아간다.. 왜쥬 ?????

 

-

상단

var resizeId = "";

 

window.addEventListener('resize', function(){

    clearTimeout(resizeId);

    resizeId = setTimeout(doneResizing, 250);

});

 

function doneResizing(){

  if(window.innerWidth === "600px"){

    this.rightBarControl();

  }

    console.log('doneResizing Window Width: '+window.innerWidth);

    //반응형 레이아웃 처리

}

 

하단

  rightBarControl(){

    document.getElementById("right").style = "display: inline-block; width: 300px; height: 100%; float: right;";

  }

 

이렇게 설정해도 안됨..

 

-

작은화면서 눌렀을 때 right의 조건을 바꿔버리는게 아니라 right의 바뀌어야 할 조건들을 rightover에 담아 id를 rightover로 바꿨다가 화면이 커지면 rightover가 right가 되도록,,? 

---

 

깃 풀 / 충돌 해결 

 

깃 서브 브랜치 업로드 

vs코드에서  ctrl + shift + p 또는 F1

누르고 Git: Create Branch..

선택하고 branch name 입력하고 Git: Publish Branch

선택하고 fetch / ok 

https://medium.com/@onlytojay/vs%EC%BD%94%EB%93%9C-%EA%B9%83%ED%97%88%EB%B8%8C-%EB%B8%8C%EB%9E%9C%EC%B9%98-%EB%A7%8C%EB%93%A4%EA%B8%B0-8131a850e50b

 

그러면 브랜치 생성되었다 

 

근데 여기서 master 를 어떻게 pull 해오지?

pull 해오는게 아니라 이건 브랜치니까 머지해야한다 

 

일단 수정없이 커밋 푸시 하고 

머지 하면 (VSCode에서 F1 -  Git: Merge Branch - origin/master)

 

여러 충돌사항 뜨는데 거기서 

현재걸로 갈건지 current change

새로 들어온걸로 할건지 incoming change 

정해서 accept 한다 

 

그러고 git push 했는데 … cmd에 git add * 하고 git commit -m “commit” 하니 

내가 아직 jaehee2에 있다… 

 

내거에는 master가 왔는데 

이게 jaehee2에도 올라간거같은데 

master에 병합되지는 않았다… (마스터에 셀렉트박스가 없는것으로 확인. jaehee2에는 있음)

 

지금 내가 브랜치 어디에잇는지

위치전환

git checkout master

 

머지하고 싶은 것과 머지 

git merge issue1

(최종 머지할 곳에 가서 머지하고 싶은 것과 머지 해야 함)

 

일단.. 소스트리에서 원격으로 하게끔 해서.. 

jaehee2 → master 로 옮기는데 성공했다… 

겹치는 소스는 어떻게 한걸까..? 소스트리에서 지웠던거에 빨간색 뜨길래 뭉치 버리기 눌렀었는데…

다음에 또 기존 소스 삭제 및 새 소스 추가 했을 때 

머지 어떻게 해야되는지 잘 봐야겠다...