[220506] TIL

릿·2022년 5월 6일
0

TIL

목록 보기
16/28

📃 삽질 일지

1. 어제의 코드리뷰 이후

1. a태그

리액트에서 a태그를 쓰지 않는다는 걸 이제서야 알았다. 얘기해주셔서 참 감사했다ㅠ... 라우터를 배웠고, a태그 대신 Link와 NavLink를 쓴다는 걸 배우긴 했지만 한 귀로 듣고 한 귀로 흘렸나 보다. 이래서 배우면 바로바로 써먹어야 해ㅠ...

2. button태그

분명 집에서 작업할 때 button태그 사이에 컴포넌트화 했던 svg를 넣으니 에러가 떠서 빈칸으로 비워놓고 position:absolute로 얹었는데 코드리뷰할 때 다시 button태그 안에 넣고 저장해보니까 에러가 안 뜸... useState에 console.log를 해도 안되더니 어젠 뭘 해도 안 될 날이었나보다ㅠ

3. 스스로의 부족함을 절실히 깨닫고 자괴감...

코드리뷰 하는데 다들 scss도 잘 쓰시고, 리액트 강의에서 배우기만 했던 portal/useEffect, 리액트 강의 어느 부분에서 봤던 함수 앞에 export default쓰는 부분이라던지 모르는 부분이 너무 많아서 코드리뷰할 때 PR에 코멘트를 달거나 질문하는 분들이 부러웠다. 한편으로는 내가 실력자들과 같이 공부를 하고 있구나 싶어서 자괴감도 들고, 열심히 해야겠다는 생각도 드는데 실천으로 옮겨지지 않는 것도 문제ㅋㅋ... 원래의 나였다면 쫄아서 당장 탈출했을 것 같은데 50만원이 참 이런 순기능(?)을ㅋㅋㅋ 열심히 하는 수 밖에... 그래도 코드보면 어떤 내용인지는 아니까 그나마 다행인걸까?

............암튼 땅 그만파고 할 거 하자!

2. 팀 과제

내가 맡은 부분은 To Do List의 글 부분이 길어지면 ...으로 바뀌게 되어있는 앱을 툴팁으로 전체내용을 표시하는 기능구현이다.

1-1. css만 수정해서 hover했을 경우, 글이 길 경우 리스트 박스가 늘어나도록 하기!

그걸 하려면 일단 white-space와 text-overflow에 대해서 알아보자.

1. white-space : 요소가 공백문자를 처리하는 법을 지정

normal : 기본값, 연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿈.
nowrap : 줄 바꿈 없음.
pre : 연속 공백 유지.
pre-wrap : 연속 공백 유지. 한 줄이 너무 길어서 넘칠 경우 자동으로 줄을 바꿉니다.
pre-line : 연속 공백을 하나로 합침.
break-spaces : 다음 차이점을 제외하면 pre-wrap과 동일함.
-연속 공백이 줄의 끝에 위치하더라도 공간을 차지.
-연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있음.
-유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기(min-content, max-content)에 영향을 줌.

현재는 white-space가 nowrap상태니 normal로 바꿀 필요가 있음.

2. text-overflow : 박스 안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성

적용조건 : overflow속성값이 hidden, scroll, auto이고 white-space:nowrap이거나 텍스트가 다음 줄로 이동하지 않는 경우
clip: 기본값, 텍스트를 자름.
ellipsis : 잘린 텍스트를 생략부호(...)로 표시함

text-overflow는 clip으로 바꿔주면 될 것 같다.

글을 hover했을 시, white-space만 바꿔주니까 생각보다 쉽게 끝났다...

p:hover {
  color: color.$RED;
  white-space: normal;
  line-height: 20px;
}

하지만 문제 발생, 새로 만든 To Do의 경우, 윗부분이 잘림, 글씨 크기에 맞게 To Do 박스가 늘어나지 않음. 현재 부모태그인 div태그에 height가 40px로 픽스되어 있고, p태그에 line-height가 40px로 되어있다. 최대한 건드리지 않고 바꾸는게 두 번째 목표.

3. p태그 문단의 세로정렬을 바꿀 수 있는 태그가 있는지 찾아보자.

vertical-align:top은 아니었다ㅠ

4. p태그의 글이 늘어나면 부모값을 변경할 수 있는지 찾아보자.

focus-within이라는 선택자가 있다고 한다.
자식요소에 focus를 하면 부모요소를 변경할 수 있는 선택자라고 하는데 p태그는 focus가 안되니까 패스ㅠ

5. 틈새 scss공부

scss의 &기호
Ampersand (상위 선택자 참조)
중첩 안에서 & 키워드는 상위(부모) 선택자를 참조하여 치환한다.

p {
  max-width: 170px;
  overflow: hidden;
  line-height: 40px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p:hover {
  color: color.$RED;
  white-space: normal;
  line-height: 20px;  
}

-가 아닌

p {
  max-width: 170px;
  overflow: hidden;
  line-height: 40px;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:hover {
    color: color.$RED;
    white-space: normal;
    line-height: 20px;  
}

-라고 쓰는 거란다. 오홍!

그리고 어떻게 해도 position:absolute로 띄우는 편이 낫다고 생각...
코드를 작성하자ㅠ

1-2. hover했을 때 말풍선처럼 뿅 띄우는 기능 구현하기!

우선 생각했을 때는 useState를 사용하여 p태그에 hover했을 때 상태를 저장해서 툴팁을 띄우고 hover가 해제되면 사라지게 만드는 부분이 필요할 것 같았다. 근데...useState에 hover상태는 어떻게 저장하지?...

1. 태그에 onMouseEnter/onMouseLeave속성 사용하기

p태그에 onMouseEnter, onMouseLeave속성을 넣고, console에 메시지를 띄우게 해보았다.

오! 잘 작동한다ㅎ

state에 p태그에 mouseEnter가 되면 true값을, mouseLeave가 되면 false값으로 바꾸게 했는데 p태그 자체에 누르는 공간이 너무 좁다보니 나타났다 사라졌다 하는게 당황스러울 정도의 속도였다...
그래서 부모태그인 div에 onMouseEnter, onMouseLeave속성을 넣었더니 만족스럽게 되었다.

2. setInterval을 써서 1초 뒤에 tooltip이 나타나게 하기

작성해두었던 mouseEnter함수에 setInterval을 적어서 체크박스나 본문에 1초 이상 mouseEnter가 일어나면 툴팁이 나타나도록 설정.

const handleTodoItemMouseEnter = () => {
  setInterval (() => {
    setHoverItem(true)
  }, 1000)
}

근데 사라지질 않네...ㅠ 생각보다 까다로운 것 같아서 나중에 css로 시도해보자!

3. 말줄임기능이 적용되어있는 애들만 tooltip이 나타나게 하기

(이 부분이 제일 걱정이다ㅠ)
text의 글자수를 세는 건 좀 아닌 것 같다.
한글이 10자 일때랑 영어나 숫자가 10자 일때의 너비는 다르기 때문!
white-space가 normal일 때 width가 170px이 넘어가면 툴팁이 나타나게 할 수 있다면 좋으련만...

그럼 한글은 2byte고 영어는 1byte, 공백은 1byte니까 바이트로 제한하면 되지 않을까?

인터넷 검색으로 한글을 2byte로, 영어는 1byte로 세는 함수가 있길래 갖다 붙여넣어봤다.
그러니까 eslint 에러가 어마무시하게 났다.

그 중 기록해야할만한 에러는

  • eslint에서는 ++을 허용하지 않는단다. i++이 아닌 i+=1로 써야함.
  • escape함수가 안 써짐...

escape함수는 이번에 처음봤다. 해당 문자가 아스키문자가 아니라면 유니코드로 변환하는 역할을 한단다. 음...모르겠다ㅎ

다른 분 코드를 사용해보았다.

const getTextLength = str => {
  let byte = 0
  const code = str.charCodeAt(0)

  for (let i=0; i<str.length; i+=1) {
    if (code > 127) byte+=2
    else if (code > 64 && code < 91) byte +=2
    else byte+=1
  }      
  return byte
}

const handleTodoItemMouseEnter = () => { console.log(getTextLength(text)) }

뭔가 미묘한 숫자가 찍혀서 나오기 시작한다...
방청소하기 : 예상수=10 실제수=10
Typescript 강의 듣기 : 예상수=20 실제수=32
경주 여행 계획 세우기 : 예상수=21 실제수=24

...일단 아침에 다시 시도해보는걸로ㅠ!

profile
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자

0개의 댓글