3주차 피드백

1. html lang="en"

웹 접근성에 관한 내용

사용이유

화면 낭독 프로그램 (스크린 리더) 이 언어를 인식하여 자동으로 음성을 변환하거나, 해당 언어에 적합한 발음을 제공할 수 있도록 한다.

• 따라서 가능하면 한글이 자주 쓰이면 html lang="ko" 로 작성해야한다.

2. parseInt / Number

• parseInt : 가장 왼쪽의 문자로 되어있는 숫자만 숫자형태로 바꾼다.

parseInt('1번')	//1
parseInt('1')	//1
parseInt('1번3') //1

• Number : 해당 문자 전부가 숫자라면 숫자형태를 아니라면 NaN을 리턴

Number('1')	//1
Number('1번')	//NaN

3. forEach / map

사용하는 때

• map : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하고 싶을 때
• forEach : 주어진 함수를 배열 요소 각각에 대해 실행

4. 글자 형식 Case

1) CamelCase : 변수명, 함수명에 사용

맨앞만 소문자

• camel case var is camelCaseVar.

2) SnakeCase : 변수명, 함수명, 데이터 타입, 네임스페이스 등에 사용

각각을 _로 나눈다

• snake case var is snake_case_var.

3) PascalCase : 클래스명에 사용, 가끔 함수에도 사용

전부 대문자

• pascal case var is PascalCaseVar

4) UpperCase : 지역변수와 상수 구분위해 상수로 사용하기도함

전부 대문자 + _로 나눈다

• upper case snake case var is UPPER_CASE_SNAKE_CASE_VAR.

5. 공백처리 및 자릿수 확인

if($('#todoInput').value.match(/\s/g) || $('#todoInput').value.length < 2)
{
  에러언급
}

ex)
1) 한글자 입력
2) 한글자 + 공백
3) 공백만
4) 여러글자

null || 1  < 2
[" ", " ", " ", " "] || 5 < 2 
[" ", " ", " ", " ", " ", " "] || 6 < 2
null || 11 < 2

true
true
true
false -> 공백도 아니고 2자리 이상이다

6. form 태그와 그안의 input button 태그

1. 제출의 역할을 하는 form의 기본동작을 막기 위해서는
   e.preventDefault()를 이벤트핸들러 코드에 걸어야한다.
2. form 태그를 진행하기 위해서는 이벤트 핸들러는 submit을 통해 적용되게 진행한다.
3. form 태그내에 keypress로 input태그에 'Enter'시 이벤트를 걸어도 button태그에 따로 걸어둔 이벤트가 같이 실행된다.
   (좀 문제가 발생하는듯하다. )

TIL

1. Favicon

인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이다.

사용법

웹사이트중 Favicon을 만드는 사이트에 들어가 ~.ico 형태의 파일을 만들고
아래 코드를 추가한다.

    <link rel="shortcut icon" type="image/x-icon" href="url" />
    <link rel="icon" type="image/x-icon" href="url" />

2. option 태그 select 태그

option을 기준으로 select에 원하는 상품을 놓는 기능을 한다.

ex)

<select id="select">
  <option>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
  <option>Option E</option>
</select>

Option A Option B Option C Option D Option E

문제점

• 원하는 option을 선택했을때 해당 option 태그를 얻으려할 때

<select id="select">
  <option>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
  <option>Option E</option>
</select>
<script>
	const selectElem = document.getElementById('select')
		selectElem.addEventListener('change', function(e) {
  		console.log(e.target)
	})
</script>

기존 코드로는 option 선택시 e.target이 해당 option이 아닌 select를 가르키고 있다.

해결방법

• selectedIndex

select 태그의 특징인 selectedIndex를 통해 대상의 index 번호를 알 수 있다.
이를 사용하면 select태그를 기준으로 index번호 대상의 태그를 찾아 낼 수 있다.

<select id="select">
  <option>Option A</option>
  <option>Option B</option>
  <option>Option C</option>
  <option>Option D</option>
  <option>Option E</option>
</select>
<script>
	const selectElem = document.getElementById('select')
	selectElem.addEventListener('change', function(e) {
  		let index = selectElem.selectedIndex;
  		const {target} = e;
  		console.log(target.children[index])
	})
</script>

target인 select태그를 기준으로 children을 통해 자식 배열을 얻고
자식 배열에서 selectedIndex를 통한 index를 적용시켜 원하는 선택된 태그를 고를 수 있다.