D'story

오늘 한 일

• 요즘 그냥 계속 이유가 있어서든 없어서든 늦게 자고 피곤한 와중에 오늘(어제라고 해야 하나 싶다가도 오늘이 맞지)도 새벽까지 css와 씨름을 했다. 원래 단일 input이었던 걸 4개로 쪼개놓은 거라 css가 제대로 동작해야 무리없이 다음 기능을 확인해 볼 수가 있는데, 4개로 쪼갠 v-text-field 안에 실제로 들어 있는 각 input의 너비가 v-text-field를 초과해서 말도 안 되게 넓게 나오는 상황이었다. 그래서 기껏해야 너비 60px짜리 v-text-field에 입력한 값은 input이 너무 넓어 화면에 나오지를 않았다ㅠㅠ 뭐가 잘못돼서 이렇게 된 건지 selector를 하나하나 타고 들어가서 고쳐보고 v-deep도 붙여보고... 지금 생각해 보니 selector를 일일이 만져보기까지 한 상황에서 v-deep이 안 먹는 건 사실 당연. 잠이 부족해 이성적 판단이 불가했다. ㅋㅋ
• 그러다 어느 순간 깨닫기를, input의 최소 너비가 생각보다 구체적으로 지정되어 있었다. min-width: 143px이던가. 아니, 세상에 어느 시스템이 140도 아니고 145도 아니고 143으로 디폴트 설정을 한단 말인가. 이건 분명 사람 손을 탄 것이렷다. 심지어 !important였다. 그럼 디렉토리 전체에다 대고 검색을 하면 되겠다 싶었다. 그리고 찾았다. 찾았는데...
• 다이얼로그를 sign-in, sign-up 전용으로 띄우기로 해서 일반적으로 내용 보여주고 버튼만 누르는 다이얼로그는 공통 컴포넌트를 활용하고, 휴대폰 번호 인증을 하는 다이얼로그는 다른 페이지에서도 사용 중인 것을 그대로 복붙해서 고쳐 쓰기로 했었다. 그대로 복붙. 복붙하면서 클래스명도 복붙한 거고, 하필 복사 대상이었던 원래의 컴포넌트의 css는 scoped가 아니었다. 복사해서 고치면서 scoped를 넣으면 뭐하나, 이미 scoped가 아닌 상태로 적용된 동일한 클래스명이 있었던 것을.
• 이 문제로 시간을 많이 끌어서 대부분의 작업이 오늘 낮으로 밀려버렸다. 그리고 오늘은 휴대폰 번호 인증을 내 번호로 너무 많이 해서(같은 번호가 인증 코드를 문자로 받았음에도 계속해서 틀린 코드를 넣으면 차단되고 있다는 사실을 새로이 알았다) 밴 당했다...😩  그래서 다른 휴대폰을 급히 빌려 시도하면서 sign-in에서는 어찌저찌 진행했는데, sign-up에서는 sign-up인 만큼 완전히 새로운 번호가 필요하다는 사실을 깨달았다. 머리 터진다 🤯
• 결론: 여러 모로 나는 바보다.

오늘 한 일

• 저녁에 친구를 만나기로 했는데 친구가 퇴근할 때까지 기다려야 했기 때문에 처음으로 카페에서 일을 해봤다. 멋진 경험일 것 같았지만 의외로 카페의 음악과 사람들 대화 소리가 시끄러웠다. 이어폰 노이즈캔슬링 덕에 위기 모면.
• 아침 스크럼 때 얘기했듯이 패스워드 리셋할 때 보여주는 페이지 작업을 진짜_최종_정말로_final.jpg 시작해야 했다. 이제 더 이상 미룰 수 없었다. 남은 것 중에서 그것보다 우선순위가 높은 작업은 딱히 없기 때문이었다.
• 그런데 말입니다... 마치 이 때를 기다리기나 한 것처럼 QA 팀으로부터 피드백이 왔다. 1. 패스워드 입력란 안에 있는 눈 모양 버튼 위치를 바꿔야 했다. 아니 이거 분명 피그마에서 그 위치 아니었는데... 2. 유저가 입력한 이메일과 비밀번호가 없어도 일단 로그인 버튼은 누를 수 있게 해야 했다. 3. 에러 메시지는 유저 입력 시가 아닌, 로그인 버튼을 누른 후에만 띄워야 했다. 
• 카드 만들어준다길래 기다렸다가 카드 넘버 받아서 처리했다. 2, 3번은 간단한 작업이었고, 시간은 1번이 훨씬 오래 걸렸다. 처음부터 버튼이 거기 있었더라면 css 작업도 간단했을 텐데, 어려운 방식으로 만들어 놨다가 다시 쉽게 바꾸려니 오히려 까다로웠다ㅠㅠ흑흑
• 그리고 패스워드 리셋 페이지를 만들고 있다...

오늘 한 일

• 어제 TIL도 안 썼으면서 너무 늦게 잤더니 피곤하다... 잠은 자면서 합시다ㅠㅠ
• 베타 테스트 준비 마무리 작업을 했다. 상황에 맞게 에러 메시지 띄우는 거나 인도네시아어 번역이 필요한 부분이나 아니면 모바일 화면에 대응하는 반응형 작업(페이지가 하나라 다행)이나 간단한 CSS 조정 등등 뭐 자잘한 것들이긴 했는데 이것저것 따지다 보니 생각보다 시간이 걸렸다.
• 테스트 하는 셈치고 빌드 한 번 해보려니까 빌드 해 놓은 URL로 접속이 안 됐다. 한참을 헤매다가 깨달았다. serve -s build 해놓고 도대체 왜 이게 안 되는지 고민하고 있었던 것이었다. serve -s dist 해야 하는데... 나 자신아 정신 차려
• pr 날리기 전 작업이 거의 막바지에 이를 때쯤 세로로 나란히 정렬한 두 div가 브라우저 화면 높이를 줄이면 겹쳐버린다는 것을 알아차렸다. 아래쪽 div는 position: relative를 준 상황이었다. 온갖 삽질 다 하며 시간을 보내다 아래 링크 덕에 양쪽 div 모두에 height: auto로 설정(이미 지정한 높이가 있으면 그건 min-height로 바꿔버렸다)하고 display: block을 주니 겹치지 않고 제 자리를 찾았다. CSS 진 빠져
• 그리고 pr을 올렸다. 물론 이게 끝이 아닐 거라는 걸 나도 안다

오늘 배운 것

• 구글링 할 때 검색어 선택만 잘 해도 원하는 결과는 금방 나오는 것 같다. 처음에는 display, relative, div, height, ... 로 검색해 봤는데, 지금 생각해 보니 핵심 키워드는 overlapping이었던 것 같다.

• 기본 vue.js favicon을 바꾸게 되어서 가지고 있던 svg 파일을 아래 링크에서 변환해서 사용했다.

오늘 한 일

• 2022년 새해가 밝았으니 새로운 마음으로 TIL을 적어본다. 느낌상 내일부터 또 다시 업무가 바빠질 것만 같지만, 일단은 그렇지 않을 것처럼 쓰겠다. 희망사항
• 오늘은 새해 첫 출근이었던 만큼 물론 해야 할 일은 산처럼 쌓여 있지만 급히 작업에 착수하기보다는 지금까지 지난 3개월 간 작업해 둔 코드들을 돌아볼 수 있는 시간을 가졌다. 하지만 실제로 코드들을 처음부터 차근차근 뜯어볼 수 있었던 건 아니었다. 어쩌다 보니 존재조차 몰랐던 오류를 찾아버렸기 때문이었다!
• 한 가지 기능을 아주 약간 개선해보려다 줄줄이 소세지마냥 이어지는 오류들 때문에 시간을 잡아먹었다. 아직 개선된 버전을 배포하지는 않았으므로 순식간에 배포해버릴 깡도 없고.. 완전히 처리한 건 아니지만 잠시나마 꼬리에 꼬리를 물고 나타나던 여러 오류들을 잡아놔서 마음이 조금은 편해졌다.

오늘 배운 것

• 오늘은 가지고 있는 링크들 중 가벼운 걸로 풀어보겠다. 항상 이렇게 시작하곤 했지만 기분 탓이라고 하고 싶다. flex-wrap 속성은 display: flex 속성을 가진 부모 요소 안에 자식 요소들이 나열되어 있을 때 넓이와 상관없이 한 줄에 모두 보여줄 것인지, 나열된 자식 요소들의 총 넓이가 부모의 넓이를 초과할 때 초과한 자식 요소들을 다음 줄로 넘겨서 보여줄 것인지를 결정한다.
• nowrap이면 한 줄에 모두 보여주고, wrap이면 다음 줄로 넘기고, wrap-reverse면 다음 줄로 넘기되 순서를 거꾸로 뒤집는 것이다.

• 정석은 물론 MDN 버전이겠지만, 한글로 된 설명은 이 블로그를 참고하면 좋을 것 같다.

margin

border를 경계로 하는 바깥쪽 여백을 의미한다.

두 개 요소의 margin 속성이 겹쳐지면 둘 중 큰 값이 적용된다(여백 상쇄).

padding

border를 경계로 하는 안쪽 여백을 의미한다.

부모 div에 padding 속성이 적용된 상태에서 콘텐츠 영역 안에 있는 자식 요소에 position: absolute, top: 0을 준다면, padding까지 부모 div의 면적으로 인식하고 padding을 무시하게 된다. 결과적으로 자식 요소는 부모의 padding이고 뭐고 맨 위에 붙어버리게 되는 것이다. 부모 div의 padding을 무시하지 않는 한도 내에서 자식 요소를 맨 위로 붙이고 싶다면, 부모 div에 padding을 주는 대신, 자식 요소에 margin을 주는 것이 낫다.

참고

형식

페이지가 로딩되면 0.1초 후 10초에 걸쳐 opacity: 0에서 opacity: 1로 변해가는 애니메이션을 작성한 코드이다.

animation-name: YOUR_ANIMATION;
animation-duration: 10s;
animation-delay: 100ms;
animation-fill-mode: both;
@keyframes YOUR_ANIMATION {
    from {
    	opacity: 0;
    }
    to {
    	opacity: 1;
    }
}

속성

• animation-name: 키프레임 애니메이션 이름.
• animation-duration: 애니메이션 재생 시간. 기본값은 0. 's', 'ms' 단위로 표현 가능.
• animation-delay: 애니메이션 시작 지연 시간. 's', 'ms' 단위로 표현 가능.
• animation-fill-mode: 애니메이션 전후에 적용할 스타일 지정. 위에서 적용한 both는 애니메이션 전에는 첫 번째 키프레임, 애니메이션 후에는 마지막 키프레임의 CSS 스타일을 유지하게 한다. 상황에 따라 다르겠지만, 위의 코드에서는 반짝거리거나 끊기는 현상 없이 가장 자연스럽게 보일 수 있는 선택인 것 같다.
• 이외에도 재생 속도를 제어하는 animation-timing-function, 재생 방향을 설정하는 animation-direction, 반복 횟수를 지정하는 animation-iteration-count, 웹페이지 로딩 후 자동 실행 여부를 지정하는 animation-play-state가 있다.

여담

• 첫 번째로 걸어놓은 링크가 워낙 잘 되어 있다. animation-timing-function의 그래프나, animation-fill-mode의 애니메이션 등 이해를 돕는 예시가 많다.

참고

display: inline

display: inline이 지정된 요소는 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다.

width, height, 상하의 margin 및 padding은 무시되고, 좌우의 margin 및 padding만 반영된다.

display: block

display: block이 지정된 요소는 앞뒤 줄바꿈이 들어가 한 줄을 모두 차지한다.

width, height, margin, padding 속성이 모두 반영된다.

display: inline-block

display: inline-block이 지정된 요소는 inline 요소처럼 앞뒤 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치되지만,

block 요소처럼 width, height, margin, padding 속성이 모두 반영된다.

참고

CSS 상자 모델(Box Model)

페이지에 띄울 박스를 생성하기 위해 박스의 바깥쪽 여백(margin), 테두리(border), 안쪽 여백(padding), 콘텐츠(contents) 등의 작동 방식을 정의한다.

display 속성이 block인 블록 박스에 적용되며, 인라인 박스에는 일부만 적용된다. 여기에 대해서는 따로 정리하겠다.

표준 CSS 상자 모델(Standard CSS Box Model)

상자의 실제 너비는 CSS에 정의된 width + padding + border-width 이다. width의 값은 border-width와 padding을 제외한, 순수한 콘텐츠 영역의 너비만을 의미한다.

대체 CSS 상자 모델(Alternative CSS Box Model)

box-sizing: border-box를 설정하면 적용된다.

이 모델에서는 width 자체가 padding과 border-width를 모두 포함한 실제 상자의 전체 너비를 의미하므로, 콘텐츠 영역의 너비를 구하려면 width에서 padding + border-width 를 빼야 한다.

여담

• 아래 MDN 페이지에서 제공하는 Interactive Editor 너무 마음에 든다. 코드에 따른 변화를 바로 감지할 수 있다.

참고