3주차_TIL
09 Nov 2020 -
4 minute read
- 201109 DAY11: JS 고차함수
- 201110 DAY12: JS 코드 작성법
- 201111 DAY13: DOM의 이해, 조작
- 201112 DAY14: 유효성 검사
- 201113 DAY15: DOM을 이용한 웹 구현, 이벤트 객체
201109 DAY11: JS 고차함수
고차 함수
- 일급 객체(first-class citizen): 특별한 대우를 받는 함수
- 변수에 할당(assignment) 가능 / 다른 함수의 인자(argument)로 전달될 수 있다 / 다른 함수의 결과로서 return 될 수 있다
- 함수를 데이터 다루듯이 다룰 수 있고, 변수에 저장할 수 있기 때문에 배열의 요소나 객체의 속성값으로 저장하는 것도 가능하다.
- 함수 표현식(function expression)으로 함수를 변수에 저장: 표현식은 hoising이 적용되지 않아 할당 전에는 사용할 수 없다.
- 고차 함수(higher order function): 함수를 인자(argument)로 받거나 함수를 return하는 함수
- 콜백 함수(callback function): 다른 함수(caller)의 인자로 전달되는 함수. caller는 콜백 함수를 호출(invoke)하고 조건에 따라 실행하거나 여러 번 실행할 수 있다.
- 커리 함수(curry functon): 함수를 리턴하는 함수
배열 내장 고차함수
- filter, forEach, find, map, reduce, sort, some, every
- 함수를 인자로 취한다.
- filter: 배열의 요소 중 특정 조건(함수)을 만족하는 요소들만 갖는 배열을 리턴하는 메소드
- map: 배열의 요소에 전달받은 함수의 결과를 요소로 갖는 배열을 리턴하는 메소드
- reduce: 배열의 요소에 전달받은 함수의 각 결과를 두 번째 인자로 전달받은 초기값에 누적한 결과를 리턴하는 메소드
추상화
- 추상화(abstraction) === ‘요약’
- 효율적인 사고를 위해 복잡한 사고(함수)를 압축해 핵심만 추출함
- 생산성의 향상
201110 DAY12: JS 코드 작성법
Indentation(들여쓰기)
- 탭보다는 스페이스 두 번
- 탭과 스페이스를 혼용해서 쓰지 말 것.
Naming
- 데이터의 모음(숫자들, 문자들)이 할당된 변수 이름은 복수 명사로 짓는 게 좋다.
- boolean이 할당된 변수는 is 혹은 are을 붙인다. (isDog, areEqual)
- 변수 할당 값이 class일 경우 변수 첫글자를 대문자로(Animal)
- 상수 할당할 경우 모두 대문자로 (MAX_ITEMS_IN_QUEUE)
puctuation(구두 및 기호점)
- 중괄호는 작동범위가 눈에 보이게끔 해야 하기 때문에 생략이 가능해도 생략하지 않는다.
- javascript의 문자열 표시는 html에서 사용하는 큰 따옴표와 구분하기 위해 작은 따옴표가 권장된다.
- 줄바꿈 필요한 문자열 정의할 때는 backtick(`)의 사용이 권장된다.
- 코드 실행의 가장 작은 단위인 statement(문)의 끝에 세미콜론(;)을 사용한다.
- if/for/while 문 같이 중괄호로 끝나는 statement는 세미콜론을 사용하지 않는다.
- 함수 표현식의 끝에는 세미콜론을 사용한다.
연산자와 키워드
- 엄격한 비교 연산자 사용하기(===, !==)
- not 연산자는 바로 앞에 붙여 사용한다.
짧게 쓰기
- boolean으로 평가되는 표현문은 바로 리턴해준다.
- 부정의 의미가 명확한 곳에만 not 연산자를 사용한다.
camelCase vs. snake_case
- javascript에서 변수 이름은 ‘Camel Casing’으로 지정
- javascript에서 ‘Snake Casing’은 상수 이름을 지을 때
201111 DAY13: DOM의 이해, 조작
DOM
- Document Object Model: html(문서)에 접근하여 object(객체)처럼 html을 조작할 수 있는 모델
- 브라우저 환경에서 JavaScript를 이용해 조작할 수 있다.
자식 엘리먼트, 부모 엘리먼트 찾기
- document.body : body 찾기
- document.body.children : body의 children을 조회
- document.body.children[1] : body의 children의 첫 번째 엘리먼트를 조회
DOM - Create
- document.createElement(‘div’) : div element를 생성. 아직 dom에 연결되지 않은 node 상태
- 변수에 넣어준다. // const newDiv = document.createElement(‘div’)
DOM - Append
- document.body.append(newDiv) : 새로 만든 div element를 append 메소드를 이용해 body에 연결
DOM - Read
- document.querySelector(‘.nameOfClass’) : 하나의 element만 조회
- document.querySelector(‘.nameOfClass’) : 모든 element 조회
- document.getElementById(‘idName’) : 이전 브라우저 호환성에 대응하기 위한 오래된 방식 // querySelector(‘#idName’)과 동일
DOM - Update
- newEl.textContent = ‘텍스트 수정’; // <div>텍스트 수정</div>
- newEl.classList.add(‘addClass’); // <div class = "addClass">텍스트 수정</div>
DOM - Delete
- innerHTML : 모든 자식 엘리먼트를 삭제
- document.querySelector(‘#idName’).innerHTML = ‘’; // 보안상 취약한 방식
- removeChild: 자식 엘리먼트를 지정하여 삭제
- remove
201112 DAY14: 유효성 검사
유효성 검사(form validation)
- 요구사항을 확인하는 기능
- 웹사이트 회원가입 시 특정 값은 반드시 입력해야 되거나, 비밀번호는 특정 자릿수 이상이거나 하는 것 처럼, ‘회원가입’이라는 핵심 기능에 대해 작동이 가능한 MVP(Most Viable Product)를 만들어 내는 것
Step1: UI구성
- 사용자에게 보이는 최종 결과물의 모형
- CSS를 구조적으로 짜기: 유효한 상태(valid)와 유효하지 않은 상태(invalid)를 설정 후 display(none/block)나 스타일링(배경을 붉은색으로)을 조정할 수 있다.
Step2: 유효성 검증 함수 구현
- 유효성 검증 함수: 요구사항에 대한 검사를 담당하는 함수
- 최대한 DOM과 아무런 상관이 없도록 작성하는 것이 좋다.
- 하나의 함수가 한 가지 기능씩 담당하도록 작성한 후 필요할 때 재사용하는 것이 좋다.
- 검증을 위한 함수이기 때문에 boolean 값을 리턴하도록 한다.
- 정규 표현식 찾기 키워드: regex
Step3: UI 구성요소에 이벤트 연결
- html의 요소를 JavaScript에서 사용할 수 있도록 querySelector를 통해 연결한다.
- html에서 필요한 UI 구성요소 만들기 -> JavaScript에서 이벤트 핸들러 만들어 요소가 기능하게 하기
- 이벤트가 작동하는 시점을 기준으로 다양한 이벤트를 만들 수 있다.
- onkeydown / onkeyup / onchange / onclick / onmousedown / onmouseup
Step4: 시각적 피드백 함수 구현
- 특정 엘리먼트가 유효한지 여부에 따라 시각적 피드백을 제공하는 함수
- 에러 메세지, 아이콘 등
- 에러 메시지를 담는 span은 CSS를 통해 기본적으로 표시되지 않도록 한다. // display: none
- DOM을 통해 유효하거나 유효하지 않은 form에 valid/invalid 클래스를 추가할 수 있다. => CSS로 각 클래스에 맞는 스타일링을 할 수 있다.
Step5: Wrap up(마무리)
- MVP의 요구사항 정리하기: 조건 -> 검사 -> 시각 피드백
201113 DAY15: DOM을 이용한 웹 구현, 이벤트 객체
이벤트 객체
- 이벤트 객체: 사용자 입력(onclick, onkeyup, onscroll)등의 트리거에 의해 발생한 이벤트 정보가 담긴 객체
- 이벤트 핸들러(eventHandler)의 첫 번째 인자
- eventHandler 함수를 onclick에 직접 할당할 수 있지만 addEventListener(‘click’, 함수)로 호출할 수 있다.
- addEventlistener(): 여러 개의 이벤트를 overwrite할 수 있으며, 순서대로 모두 작동한다.