D'story

오늘 한 일

• 어제 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 파일을 아래 링크에서 변환해서 사용했다.

오늘 한 일

• 회사 웹사이트 디자인이 다시 한 번 대변동을 일으켰다. 이번엔 싹 다 갈아엎는 수준까지는 아니어도, 세세한 부분까지 많은 변화가 있어서 하나하나 체크하면서 작업하려니 여간 수고롭지가 않다.
• 형태는 똑같은 이미지인데 색상이 서로 묘하게 달리 적용된 것들도 꽤 있었다. 똑같은 알파벳으로 된 단어가 여기서는 옅은 연두색인데, 저기서는 좀 진한 초록색인 식. 일일이 svg로 저장하며 이미지 파일이 늘어나는 현상에 환멸을 느끼려던 찰나, 또 우연한 기회에 유용한 링크를 찾아냈다.
• 방법인즉슨 이렇다. 해당 svg 파일을 열어서 fill='none'이나 fill='#000000' 같이 색상 코드가 들어간 부분을 fill='current'로 변경해준다.
• 그리고 아래처럼 임포트하면 svg 파일일지라도 리액트 컴포넌트로서 가져와서 보통의 컴포넌트처럼 사용할 수 있다. 이렇게 가져온 컴포넌트에 fill 속성을 원하는 색상 코드로 넣어준다. 그러면 내가 원하는 색을 넣은 이미지로 바뀐다. 또, 마찬가지로 컴포넌트이기 때문에 일반적인 방식으로 style 속성을 넣으면 CSS의 인라인 적용도 가능하다.

import { ReactComponent as Blahblah } from '../your_directory/blahblah.svg';

...

  return (
      <Blahblah fill='#ffffff' style={{ margin: '10px' }} />
  )

오늘 배운 것

• 어쩌다 찾게 됐는지는 기억이 잘 나지 않는다. 뭔가 다른 걸 찾으려고 시작한 구글링이었던 것 같은데 제목에 끌려서 그만..