[TIL] 23.10.10

seaStamp·2023년 10월 10일

목록 보기

3/33

오늘 한일

🐾 개발자국 팀소개페이지 제작 프로젝트

메인페이지 프로필 이미지 찌그러짐 해결

전체 페이지 헤더 레이아웃 수정

관리자 페이지 bootstrap 사용하여 html, css 수정

프로젝트 시연영상 촬영

(+) git fork와, branch생성, PR을 해봤다!

⚠️ 마주한 문제

Incorrect use of <label for=FORM_ELEMENT>

동작에는 문제가 없었으나 개발자 검사도구를 돌렸을 때 위와 같은 콘솔오류 문구가 나왔다. 확인해보니 label for와 input id가 일치하지 않아서였다. label태그는 설명하는 문자를 삽입할 때 사용하는 태그로, for라는 속성의 삽입해 input태그의 id값과 일치시키면 클릭범위를 증가 시킬 수 있다. 우리 프로젝트는 부트스트랩의 floating-box를 사용하여 클릭범위에 영향이 미치진 않지만, 권장되는 사용법은 둘을 일치시키는 것이란걸 배웠다.

팀원간의 작업하는 파일이 겹치지 않도록 html에서 script를 분리하고자 시도해봤다. 그런 와중 CORS policy 에러가 발생했다. 문제는 script의 type이 module이기 때문이었다. 이러한 상황을 해결하려면 로컬이 아니라 서버를 통해 테스트 해야한다고 한다. 프로젝트가 거의 마무리 단계였기에 분리는 보류하고 우선 다른 작업을 했다. 지금 프로젝트는 규모가 작은 미니 프로젝트지만, 이 부분에 대해서 좀 더 공부해봐야할 것 같다.

📚 Today I Learned

git fork부터 PR하는 방법 (나중에 정리해볼까?)
키보드 enter을 눌렀을때 작동하게 하는 방법(keydown, keyup), enter의 keycode는 13!
input 태그에서 엔터키 눌렀을 때 submit 동작막기 >> 아래 속성 input 태그에 추가

onsubmit="return false;"
style="object-fit : cover" >> 종횡비 유지하면서 가득채움
textarea의 개행문자를 db에 저장하는 법