2021-11-19 TIL

🦁 Day16

💻 오늘 보고 듣고 배운 것

1. 면접관이 코드리뷰 시에 중점적으로 보는 것

1) JS 효율적인 코딩을 했는지 충분히 고민하고 짰는지
2) 서비스가 되고 있는지
- 서비스를 운영하면서 느끼는 점이 개발할때 느끼는 점보다 많다.

2. CSS 스타일링할 때, 요소의 높이를 지정하지 말 것

• 요소 안에 다른 추가 요소가 더 들어올 것을 고려해야 한다. 특수한 경우를 제외하고는 높이를 지정하지 않는 것이 좋다.
• 부모 요소의 높이 = 자식들의 높이의 합

3. inline 요소의 display 속성이 자동으로 바뀌는 경우

position이나 float 속성을 주면 자동으로 display: block 으로 변경된다.

4. javascript:void(0)

<a href="javascript:void(0)">클릭</a>

void(0)는 결과값으로 undefined를 반환하는 연산자이다. 앵커 태그를 링크 이동 없이 버튼처럼 사용할 때 쓸 수 있다. 이전까지는 #none을 많이 썼는데 (희박하지만)혹시라도 none이라는 id가 문서 내에 있을 수도 있으니까 그것보다는 void(0) 쓰면 링크 이동, 문서 내 스크롤 이동 없이 버튼처럼 사용할 수 있다.
그런데 이 방법은 (자주 있는 경우는 아니지만) XSS 공격 방지 보안툴에 의해서 경고가 출력될 수도 있다고 한다.(출처:https://reiphiel.tistory.com/entry/href-javascript-void-or-hash)

<a href="#" onclick="return false;">클릭</a>

대안으로 onclick 속성에 return false를 주는 방법을 사용할 수 있다.

5. border와 outline의 차이

box model에 영향을 끼치느냐의 차이가 있다. outline은 box model에 영향을 주지 않는다. 요소 콘텐츠의 밖에 그려진다.

💭 오늘 하루 느낀 점

벌써 금요일이라니 믿기지 않는다. 과정 시작하고 벌써 3주차가 마무리되었다.
선생님 라이브 코딩 보면서 지난 2주간 배웠던 CSS 속성들을 제대로 복습하지 않았다는게 크게 느껴졌다. 헷갈리는 속성들이 있으면 수업 끝나고 복습하면서 체화시켜야 되는데 제대로 시간 들여서 공부하지 않았던 거다. 이번 주 주말은 반드시 그런 것들을 최대한 이해하고 스타일링할 때 자유자재로 잘 사용할 수 있도록 연습을 해야겠다.
그리고 주요 과제들 중 직접 끝까지 만들어 보지 않은 게 많다. 스스로 만들어보지 않고서 수업 때 선생님 라이브 코딩 보면서 따라치기만 한 게 도대체 몇개인지... 그 과제들만 제대로 만들어도 작은 토이 프로젝트로 포폴에 쓸 수 있는데 제대로 하지 않은게 너무 많다. 제대로 정신 차리고 시간 들여서 꼭 스스로 만들어보자. 다음주에는 반드시 코드 끝까지 짜서 멘토님한테 코드리뷰 받아야지.

---

참고자료

https://reiphiel.tistory.com/entry/href-javascript-void-or-hash
https://minimal-dev.tistory.com/28
https://stackoverflow.com/questions/1291942/what-does-javascriptvoid0-mean