에러사항 및 해결법 기록

github깃허브에 있는 브랜치에서 새로운 브랜치로 pull 했으나 기존에 merge병합했던 커밋들이 unpublished 상태로 계속해서 중복적으로 뜰 때.. 분명 push 하고 병합한 커밋들인데 push 할때마다 이미 병합된 커밋들이 중복되어 올라갈때

= 로컬에서 지금 사용중인 브랜치를 삭제. 이미 커밋한 것들이 있다면 이번까지만..커밋 중복을 견디고 push 후 병합. 그리고 브랜치를 삭제한 뒤 git branch 브랜치명 origin/깃허브브랜치명

 

text-overflow:ellipsis not working. "..." 안들어갈때

= 일단 한 줄이라면, 부모태그의 display가 flex거나 grid 인지 확인. 맞다면 min-width:0; 을 기입해준다.

그냥 block 이거나 min-width:0; 을 넣어도 해결이 안된다면? 부모태그에게 width, height 를 준다.

"..."을 적용하고자 하는 텍스트가 들어간 태그에는 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 

그래도 안된다면... 해당 컨텐츠 영역의 모든 태그에게 일단  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;  를 적용해보고 하나씩 지워보는게 좋다. 가끔 잘못된 태그에게 저 속성을 주고서 외안되지를 외치는 경우가 있음...ㅠ

 

next.js styled-components google font import 넥스트 js styled components 에 글로벌하지 않게 구글 폰트 링크로 적용하는 법..은 없는듯. 누군가 이걸 찾아왔다면...  걍 <style jsx>{'@import"구글웹폰트링크"'}</style> 를 사용하자... 위치는 jsx 위치에.

이 문제의 경우 외주업체측에서 작성한 코드와 style jsx 내에서 global 하게 css 적는게 문제가 되어 styled-components를 사용하니 웹폰트가 적용되지 않아서... 낑낑거리다가 style jsx 내에서 웹폰트만 불러온것.

물론 global한 css 파일에 작성할 수도 있지만? 내 경우에는 여러 탬플릿들 각각에게 불러주는게 나은듯하여..이렇게 진행함.

 

next js 에서 <Image> 태그 크기 말 안들을때.. css 로 안만져질때..

이거 검색해봤는데... 아직 제대로 된 답 없는듯..?? 이걸 쓰면 이미지가 겁나 빨리 불러와지긴 하는데 css로 조정이 안됨..! 그래서 진짜..진짜진짜 최후의 방법으로... important쓰기.... 범위 제대로 잡아놓으면 다른거에 영향 안주니까... 

<div className="어쩌구">

<Image src={} width="100%" height="100%" objectFit="cover"/>

</div>


//style
.어쩌구 {

overflow:hidden;

}

.어쩌구 > span {

width: 100% !important;

height: 100% !important;

}