CSS
bottom-up
개념
자식 태그에 속성을 먼저 부여하고 그에 따라 부모 태그의 속성이 결정되게 하는 방식이다. 예를 들어, 부모 태그에 고정된 크기를 주는 게 아니라, 그 안의 자식 요소들의 크기를 부여하여 부모 요소의 크기가 결정되게 한다. 그럼 내부의 자식 요소에 변동이 있을 때 부모 요소도 알아서 조절되기 때문에 변화에 유연하다는 장점이 있다.
하지만 무조건 bottom-up 방식을 쓰는 것은 아니다. 예를 들어, 부모 요소의 정해진 크기(영역)을 초과하도록 자식 요소가 추가될 경우 스크롤해서 확인할 수 있게 할 때가 있다.
.boxComponent {
height: 200px;
padding: 10px;
margin: 10px 0;
overflow: scroll;
background-color: white;
border: 2px solid #efefef;
}- overflow : 해당 속성의 값을 "scroll"로 해두면 요소의 영역을 초과하는 내용은 스크롤해서 확인할 수 있게 스크롤바가 생긴다.
flex 컨테이너의 width/height
개념
자식 요소를 가운데 정렬하기 위해 부모 요소를 flex로 했을 때(부모 요소=flex 컨테이너), flex 컨테이너가 자식 요소보다 큰 너비/높이를 갖지 않으면 정렬의 효과가 없다. 보통 가운데 정렬을 할 때는 기준이 되는 영역의 너비를 flex 컨테이너가 꽉 채우고 있어야 한다. 따라서 flex 컨테이너와 그 부모의 부모를 모두 width/height = 100%로 해주어야 한다. 혹은 flex 컨테이너에 width/height = 100vw/vh로 해주어도 된다. 하지만 %와 viewport 기준 너비/높이는 다르기 때문에 상황에 따라 선택한다.
.loginMain {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #fbfafb;
}
Javascript
<button> 태그의 type="submit"
개념
<form> 태그 안의 <button> 태그는 기본적으로 type="submit" 속성을 갖고 있다. 이 버튼을 클릭하면 submit이 동작하면서 페이지가 새로고침된다. 새로고침되면 버튼 클릭 이후에 해당 페이지에서 더 실행하고 싶은 코드를 진행할 수 없다. 그래서 새로고침을 원치 않으면 속성값을 type="button"으로 바꾸어주면 된다. 혹은 클릭 이벤트 발생 시, event.preventDefault() 메서드로 기본값인 새로고침이 동작하는 것을 막을 수 있다.
[관련] <form> 태그 : 시맨틱 웹 & 이벤트 위임
<input>과 <button>을 <form> 안에 넣는 이유는 <div>로 감싸도 되지만, 보다 semantic한 웹을 구현하기 위함이다.
<form> 태그 안에 여러 <input> 태그들이 있을 때, <form> 태그에 addEventListener()를 사용하면 하위 태그에 모두 해당 이벤트가 위임되므로 한번에 처리할 수 있다. 예를 들어, 여러 <input> 태그들에 값이 입력될 때 발생하는 keyboard 이벤트를 감지하려면 이 <input>들을 감싸고 있는 <form> 태그 하나에만 키보드 이벤트 발생에 대한 addEventListener()를 붙여주면 된다.
loginForm.addEventListener("keyup", () => {
inputId.value && inputPw.value ? activeBtn() : inactiveBtn();
});
"input" 이벤트
개념
<input>에 값이 입력되는 것을 감지하려면, keyboard 이벤트를 이용할 수도 있지만 마우스로 문자열을 복사-붙여넣기 할 경우에 알아챌 수 없다. 그래서 "input" 이벤트를 사용하면 키보드로 입력하든 마우스로 입력하든 모두 감지할 수 있다.
loginForm.addEventListener("input", () => {
inputId.value && inputPw.value ? activeBtn() : inactiveBtn();
});
<script src=".js"></script>
개념
자바스크립트 파일을 html 파일에 연결할 때, html <body>의 맨 마지막에 <script> 태그를 이용해서 담아야 한다. html 코드 전에 쓰면 그 뒤에 적힌 html 내용을 읽어올 수 없어서 DOM을 이용하여 태그에 접근하고 event를 listen할 수 없다.
이때 <script> 태그에 defer 속성을 쓰면 자바스크립트 파일을 연결하는 <script> 태그를 어디에 쓰든지 DOM으로 html을 읽어올 수 있다.
event.code
개념
키보드를 눌렀을 때 어떤 키가 눌렸는지 받아올 수 있다. event.keycode는 곧 지원되지 않을 수 있기 때문에 event.code를 쓰는 게 좋다.
querySelector()
개념
DOM 모델을 이용하여 태그의 태그명/클래스명/id명을 통해 자바스크립트에서 html 태그에 접근할 수 있게 해준다. getElementById나 getElementsByClassName 등은 document.getElementById("")로 document 전체에서만 검색할 수 있는 반면, htmlTag.querySelector의 형태로 태그 안에서도 검색할 수 있다. 그럼 document 전체에서 검색하는 것보다 빠르다.
function init() { addEventListener }
개념
function init()으로 선언한 함수 안에 addEventListener()들을 모아놓고, init()하여 실행한다. 이렇게 하면 init() 함수는 entry point로 분리하는 기능을 한다. addEventListener는 어떤 요소에서 특정 이벤트가 발생할 때 원하는 동작 실행시키는 코드다. 따라서 변수와 함수를 선언하는 코드와 구분하여 두는 것이 코드의 길이가 길 때 가독성이 좋다. 그렇지 않으면 수많은 변수와 함수들 사이에서 어떤 코드가 실제로 함수를 동작시키는지 찾기 힘들 수 있다.
indexOf() 메서드 대체
오답노트
function getFind(filter, sentence) {
const arr = sentence.split("");
let space = 0;
for(let i = 0; i < sentence.length; i++) {
if (arr[i] === " ") {
space++;
} else if (arr[i] === filter) {
return i - space + 1;
}
}
return -1;
}- 찾는 값이 없을 때 반환할 값을 정해주지 않았다.
- 원한 건 공백도 포함하여 위치를 계산한 값인데 공백을 제외하고 세서 틀렸다.
- 위치는 인덱스 값으로 돌려주면 되는데 1을 더해서 반환했다.
버튼을 활성화할 때 disabled 속성을 이용할지, 조건을 충족할 때만 작동할 코드를 부여할지
'TIL' 카테고리의 다른 글
| [TIL-122] 위코드 22일차: ReactJS / 코드 카타 (0) | 2022.02.14 |
|---|---|
| [TIL-121] 노마드코더 ReactJS #1.0~#3.0 (0) | 2022.02.12 |
| [TIL-119] 위코드 18일차: 위스타그램 - 메인 페이지 (0) | 2022.02.10 |
| [TIL-118] 위코드 17일차: 깃과 깃헙 (0) | 2022.02.09 |
| [TIL-117] 위코드 16일차: 위스타그램 - 로그인 페이지 JS (0) | 2022.02.08 |