TIL | 2월 셋째 주

2021.02.15. 월요일

체크된 부분을 누르면 아래 팝업 리스트가 뜨는 것을 구현 중이다. 저 부분의 html 구조는 아래와 같다.

<nav class="header__navbar">
  <button class="navbar__join-host">호스트 되기</button>
  <button class="navbar__languages">
    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 16px; width: 16px; fill: white;"><path d="m8.002.25a7.77 7.77 0 0 1 7.748 7.776 7.75 7.75 0 0 1 -7.521 7.72l-.246.004a7.75 7.75 0 0 1 -7.73-7.513l-.003-.245a7.75 7.75 0 0 1 7.752-7.742zm1.949 8.5h-3.903c.155 2.897 1.176 5.343 1.886 5.493l.068.007c.68-.002 1.72-2.365 1.932-5.23zm4.255 0h-2.752c-.091 1.96-.53 3.783-1.188 5.076a6.257 6.257 0 0 0 3.905-4.829zm-9.661 0h-2.75a6.257 6.257 0 0 0 3.934 5.075c-.615-1.208-1.036-2.875-1.162-4.686l-.022-.39zm1.188-6.576-.115.046a6.257 6.257 0 0 0 -3.823 5.03h2.75c.085-1.83.471-3.54 1.059-4.81zm2.262-.424c-.702.002-1.784 2.512-1.947 5.5h3.904c-.156-2.903-1.178-5.343-1.892-5.494l-.065-.007zm2.28.432.023.05c.643 1.288 1.069 3.084 1.157 5.018h2.748a6.275 6.275 0 0 0 -3.929-5.068z"></path></svg>
  </button>
  <button class="navbar__mypage">
    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" focusable="false" style="display: block; fill: black; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 3; overflow: visible;"><g fill="none" fill-rule="nonzero"><path d="m2 16h28"></path><path d="m2 24h28"></path><path d="m2 8h28"></path></g></svg>
    <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 28px; width: 28px; fill: #717171;"><path d="m16 .7c-8.437 0-15.3 6.863-15.3 15.3s6.863 15.3 15.3 15.3 15.3-6.863 15.3-15.3-6.863-15.3-15.3-15.3zm0 28c-4.021 0-7.605-1.884-9.933-4.81a12.425 12.425 0 0 1 6.451-4.4 6.507 6.507 0 0 1 -3.018-5.49c0-3.584 2.916-6.5 6.5-6.5s6.5 2.916 6.5 6.5a6.513 6.513 0 0 1 -3.019 5.491 12.42 12.42 0 0 1 6.452 4.4c-2.328 2.925-5.912 4.809-9.933 4.809z"></path></svg>
  </button>
</nav>

저 버튼을 클릭하면 리스트가 보였다 사라졌다 해야되고, 리스트 영역의 바깥 부분을 클릭하면 리스트가 사라져야 한다. 이것을 구현하기 위해 document에 클릭 이벤트를 달았고, event.target이 누구냐에 따라 class에 display-none을 추가해주는 방식으로 짜봤다.

그래서 발생한 문제! event.target이 .navbar__mypage 인지 여부로 나눴더니, 버튼의 하얀 부분에서는 생각대로 잘 동작하지만 아이콘(svg 태그 부분)을 클릭했을 때는 아무 일이 일어나지 않았다. 이것을 해결하기 위해 이벤트 캡쳐링, 버블링, stopPropagation에 대해서 확실히 짚고 넘어가야겠다는 생각이 들었다.

2021.02.16. 화요일

• git stash를 사용해보았다. 어떤 문제를 해결하고 있는 중에 다양한 버전을 저장해놓을 수 있어서 왕 편리!!! 그리고 아직 커밋에 북마크까지 달아보진 않았지만 피어세션하면서 커밋 해시코드 이용해서 checkout도 해봤다. 조금은 git이 익숙해진듯~~?

• css의 before, after 속성에 대해서 조금 알아봤다. html에 쓰지 않고도 이미 있는 element 앞이나 뒤에 끼워넣어 css만으로 요소를 추가할 수 있는 방법이다.

• align-self: center;

• button 태그 안에 button 태그를 쓸 수 없다. 이런 태그들이 몇 개 있음 - 관련 글

• label은 input 태그와 같이 쓰는데, 두 태그를 연관시키려면 label의 for 속성과 input의 id 속성에 같은 값을 넣으면 된다. 혹은 더 간단하게, 그냥 label 태그 안에 input 태그를 쓰면 된다. - MDN

• fieldset은 여러개의 input들을 묶을 때 사용하는 것 같은데 아직 form - fieldset - input 사이의 관계는 모르겠음 - MDN

• css로 mouseleave 효과 주는 법 : div:not(:hover){ ... } not이라는 게 있었다니 ㅋㅋㅋ 역쉬 신기한 거 많아 ~

2021.02.19. 금요일

• 실행하는 함수를 생성자 안에 넣어줘도 괜찮다. 구디가 클래스 밖에 querySelector 쓴거를 차라리 캘린더의 생성자 파라미터로 넣어주던가 캘린더 클래스 안에 넣어버리는게 낫다. 다른 사람이 코드를 봤을 때 이건 뭔데 실행해줘야해? 이런 생각이 들 수 있어서.

• 반환을 할 때 복잡한 로직을 넣는 경우 (map, reduce 등) 있는데, 변수에 담겨 있지 않으면 디버깅할 때 조금 어려울 수 있다.

• 클래스 이름. 변경이 되는 경우를 고려해서 변수에 담아놓는 게 좋다.

• 변경 사항을 좁히기 위해서라도 함수를 잘게 쪼개는 게 좋다. 뭐가 바뀌면 그 함수를 테스트해야되는데 함수 크기가 크면 아주 약간만 바꿔도 테스트해야될 게 많아지니까...

• 파라미터를 적절히 전달해주면 init 함수만 보고도 어떤 흐름으로 진행되는지 알 수 있다.

• 파라미터가 많을 때 순서를 다 고려해서 넣어야 하니까.. 그냥 객체로 넣어주는 게 좋다. key-value로 잘 알기도 쉽고 순서 다 고려하지 않아도 되기 때문에.

• 통신에서 필요한 것은 파라미터로 전달해주면 되고, 어떤 변수가 어떤 함수에서만 쓰인다면 최대한 지역변수로 넣기.

• event deligation으로 많이 쓰는데 그럴 때 target.closest가 유용하게 쓰인다.

• e.target 계속 접근하면 그만큼 탐색비용이 든다. document도 마찬가지. 그래서 변수화시키면 좋다. 변수에 담아두면 디버깅할 때도 편하고!

사람마다 달력을 조금씩은 다 다르게 구현한 게 재밌었다. 수요일에는 하루종일 너~무 졸려서 아무것도 못 하고, 목요일부터 달력을 슬슬 시작해볼까 했는데 어떻게 구현을 해야할지 막막해서 하기 싫어지고 그러다보니 집중력과 의욕도 떨어져버려서 목요일도 날렸다. ㅠㅠ 생각이라는 걸 하기가 싫어서 다른 친구들 코드만 조금 들여다보면서 시간을 보냈었다.

오늘 피어세션을 하면서 동료들이 달력을 어떻게 구현했는지 자세한 과정을 들어볼 수 있었는데 들어보니까 더 시작할 엄두가 안나기도 했다. ㅋㅋㅋ 그런데 구디 왈 일단 어떻게라도 화면에 나타나도록 코드를 대충 짜놓으니까 점점 진행이 됐다고 했다. 그리고 제니는 의욕이 안생길때 그냥 코드에는 손 대지 않고 책을 읽었더니 그 후에 코드가 쫘좌작 잘 써졌다고.. 역시 동료들에게 배울 점이 많다.

하여튼 그래서 미용 끝난 뿌꾸를 데리고 8시 좀 넘어서 집에 도착했는데, PR 마감 시간까지 한 2시간동안 그냥 막 생각나는대로, 함수로도 안만들고 그냥 코드를 써내려갔더니 이번 달의 달력은 화면에 표시할 수 있었다. 이게 뭐라고 이거 하나 성공하고 나니까 다른 기능들도 구현해낼 수 있을 것 같은 자신감이 1 정도 생겼다.

문제를 잘게 쪼개서 해결하는 게 좋다고 크롱이 늘 말씀하셨는데 생각만큼 잘 되지는 않는 것 같다. 이번 주에 너무 손놓아버려서 스스로에게 자괴감이 들어서 주절주절 써버렸는뎋ㅎㅎㅎ 방법이 잘 안떠오른다고 마냥 멍하게 있지 말고, 처음부터 너무 완벽하게 짜내려고 하지 말고 (어쨌거나 저쨌거나 리팩토링은 해야한다 😀), 문제를 쪼갠 뒤에 하나씩 차근차근 해결해나갈 수 있도록 연습을 많이 해야겠다.

2021.02.20. 토요일

2021 카카오 블라인드 테스트 - 신규 아이디 추천

이번 주 언젠가 아침에 풀어보려다가 실패한 문제를 다시 풀어봤다. 정규표현식을 사용하는 방법밖에 안 떠올라서 step마다 다 함수로 만들었는데 구글에 검색해보니까 대박. 문자열 메서드도 체이닝이 된다는 걸 왜 생각 못했는지! 왜 배열만 체이닝된다고 생각했을까 ㅎㅎㅎ 그리고 padStart, padEnd라는 메서드도 있다는 걸 알게 됐다.

너무 지저분하게 짰고 심지어 테스트케이스 몇 개 틀려가지고 나중에 다시 풀어봐야겠다.