[220329] 프로젝트 진행 D+1
팀빌딩은 진즉에 끝났지만 오늘에서야 프로젝트를 시작했다. 다른 프론트 개발자님과 업무분장을 하고 나는 제일 쉬워보이는(?) 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를 하니까 사라진다. 근데 이렇게까지 할 일?;
Author And Source
이 문제에 관하여([220329] 프로젝트 진행 D+1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@saiani1/220329-프로젝트-진행-D1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)