팀빌딩은 진즉에 끝났지만 오늘에서야 프로젝트를 시작했다. 다른 프론트 개발자님과 업무분장을 하고 나는 제일 쉬워보이는(?) Header 만들기 시작!

오후: Header컴포넌트 만들기!

react로는 뭔가를 혼자서 만들어보는게 처음이니까 벌써부터 난관 발생!

1) 컴포넌트 생성하고 css작성할 때, 태그 선택자가 안 먹히는 걸 확인했다...

내가 styled-component를 써서 그런건지 어쩐건지는 확인이 필요함. 근데 태그 기본스타일 리셋하려는데도 styled-component를 쓰는 건 좀 이상하지 않나?

2) figma이미지 내려받는 거 때문에 혼자 고민중.

=> 해결!!

인터넷 검색도 해보고 개발자도구로 따볼까 생각도 했고, 캡쳐해서 받을까 생각까지 했는데 figma 들어가봤더니 마침 디자이너님이 레이아웃 수정중이시길래 디스코드 메시지로 SOS요청!

와...근데 이 툴 뭐죠? 사이즈 지정, 폰트 지정, 색깔 지정까지 다 되있는거 보고도 놀랐는데 이미지 내려받는 기능까지 있었다니, 어디가서 디자인 전공이라는 거 알리지 말아야지. 웹디자인 자체를 만만하게 봤던 내가 너무 부끄럽다... 우리 팀은 디자인 능력자를 모셔와서 올해 받을 복을 다 쓴 것 같다ㅋㅋㅋ

3) 이미지를 넣으려면 import를 써서 컴포넌트 넣어야할 때처럼 해야하는 건 알겠는데 The above error occurred in the img component에러가 자꾸 뜬다ㅜㅜ...

import logo from '경로';
<img src={logo}></img>

-가 정석인 것 같은데 안됨.

<img src={require("경로")};

-도 안됨.
현재 구글신의 도움을 받는 중.

=> 해결!!

img태그에 자식태그가 있어서 그랬음... img태그쓸 때 웹접근성 지킨답시고 span태그에 blind속성을 써놨는데 그게 화근일줄이야 ㅠㅠ...

4) a태그에 항상 임시링크로 #을 썼었는데 왜인지 warning이 엄청떴다.

=> 해결!!
임시링크를 /로 쓰면 된다. 그냥 warning인데 초록글씨가 안보이면 매우 불안하니까...;

5) a태그 스타일리셋? img태그 스타일리셋?

로고 이미지가 미묘하게 가운데정렬이 안되서 보니까 img높이랑 wrap해놓은 a태그 높이랑 다르다. 9px이나 차이가 남!!! 둘다 각각 리셋해봤는데 안 먹힘!!ㅠ

=> 해결!!
부모태그인 h1태그에 margin: 0, 자식태그인 a태그에 display: inline-block, height: 34px, 그 자식태그에 img태그에 height: 34px를 하니까 사라진다. 근데 이렇게까지 할 일?;