알고리즘

나는 수도코드를 잘 작성하고 있을까?

• 요구사항이 하나 이상인 문제를 여러개로 쪼개서 생각할 수 있다.
• 문제를 일상적인 문장으로 표현할 수 있다. (해당 위치에 바르게 주석을 적을 수 있다.)
• 잘게 쪼갠 특정 문제가 이미 배운 JavaScript의 어떤 개념과 연관되는지 생각해낼 수 있다.

Achievement Goals

• 코플릿 Algorithm Basic 문제를 풀면서 Checklist를 참고하며 수도코드를 작성해본다.
• 코드 스타일링 가이드를 참고하여, 나 뿐만이 아닌, 남들도 읽기 쉬운 코드를 작성할 수 있다.
• 문제 해결을 위해 자주 등장하는 자바스크립트 문법 응용법을 숙지한다.
  • 작성한 수도코드를 자바스크립트로 능숙하게 바꿀 수 있다.
  • 타입 확인과 변환을 능숙하게 할 수 있다.
  • 이중 반복문을 능숙하게 사용할 수 있다.
  • 반복문 내에 여러개의 if문을 능숙하게 사용할 수 있다.
  • for문과 while문이 필요한 때를 쉽게 파악할 수 있다.

고차함수 더 생각해보기

• MapReduce 학습하기 (MapReduce Model)
• 자바스크립트에서 커링(currying)과 클로져(closure)의 차이 이해하기 (js closure vs curry)
• 선언형 프로그래밍(declarative programming)과 절차형 프로그래밍(imperative programming)의 차이를 배열 메소드를 통해 이해하기 (js imperative vs declarative)
• 함수의 조합(function composition)에 대해 학습하기 (javascript function composition)

DOM

Achievement Goals

• DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
• createElement - CREATE
• querySelector, querySelectorAll - READ
• textContent, id, classList, setAttribute - UPDATE
• remove, removeChild, innerHTML = "" , textContent = "" - DELETE
• appendChild - APPEND
• innerHTML과 textContent의 차이

Advanced Challenge

• DOM의 더 깊은 내용에 대해서 이해할 수 있다.
• createDocumentFragment를 활용하여, 더 효율적으로 DOM을 제어할 수 있다.
• HTML5 template tag 사용법을 이해할 수 있다.
• element와 node의 차이를 이해할 수 있다.
• children과 childNodes의 차이를 이해할 수 있다.
• remove와 removeChild의 차이를 이해할 수 있다.
• 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까?
• 좌표 정보 조회를 할 수 있다. - offsetTop...
• 크기 정보 조회를 할 수 있다. - offsetWidth...

Further Study

• https://developer.mozilla.org/ko/docs/Web/API/Document/createDocumentFragment
• MDN에서 append와 prepend에 대해서 검색하고, 차이에 대해서 공부하세요. (difference between append and prepend in javascript dom)
• MDN에서 appendChild와 append에 대해서 검색하고, 차이에 대해서 공부하세요. (difference between appendChild and append in javascript dom)
• 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할지 고민해보세요
• MDN에서 querySelector를 검색하여, 하기 정보에 대해서 공부합니다.
  • querySelector의 첫번째 인자에 'div'를 넣으면 어떻게 될까?
  • querySelector를 통해서 더 복잡한 작업을 할 수 있을까?
  • querySelector의 부모는 꼭 document 객체여야만 할까?
• textContent와 innerHTML의 차이 (difference between textContent and innerHTML)
• innerHTML의 보안상 단점 (mdn innerHTML security issue)
• element와 node의 차이 (difference between element and node in javascript dom)
• children과 childNodes의 차이 (difference between children and childNodes in javascript dom)
• removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)
• tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)
• tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)

DOM 기초 실습

• DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다.

  • querySelector를 활용하여 HTML 엘리먼트 정보를 가져올 수 있다.
  • oncilck 속성이나 addEventListener 메소드로 이벤트 핸들러 함수를 HTML 엘리먼트에 적용할 수있다.
  • 이벤트 핸들러 함수에서 이벤트 발생 지점의 정보를 확인할 수 있다.
  • 이벤트 핸들러 함수에서 유효성 검사를 할 수 있다.

• 유효성 검사에 필요한 기술 요소를 익힐 수 있다.

  • 유효성 검사에 필요한 HTML 엘리먼트, CSS 속성이 무엇인지 알 수 있다.
    • HTML input 엘리먼트, CSS variable
  • 유효성 검사에서 활용할 수 있는 정규표현식 사용법 기초에 대해서 익힐 수 있다.

• 중첩된 CSS를 표현하기 위해 CSS preprocessor를 사용할 수 있습니다.

  • .input-form과 관련된 자식 스타일을 설정하기 위해 매번 .input-form을 써줘야 하는게 썩 보기에 좋지 않다고 느끼시는 분이 계신가요? 중첩된 CSS 구조를 제대로 표현하지 못하는 CSS의 한계를 뛰어넘기 위해 현업에서는 CSS preprocessor라는 것을 사용하기도 합니다. 추후 프론트엔드를 꿈꾸시는 분들은 한번쯤 공부해봐도 좋은 주제입니다. 이 링크는, CSS preprocessor의 한 종류인 Sass(SCSS) 문법을 사용해서 guide.css 를 구조적으로 만든 예제입니다.

• 코드가 무슨 의미인지는 정규 표현식 이라는 것을 검색해보면 알 수 있습니다.

  • 사실 저 정규 표현식은 구글에서 다음과 같이 검색하면 쉽게 얻어낼 수 있는 코드입니다. 정규 표현식이 다소 어렵게만 보일 수 있지만, 나름의 규칙을 이해하면 어느정도는 스스로 작성할 수 있습니다.
    • regex english number only
    • regex password validation

• 원하시면 여러분이 원하는 유효성 검증 함수를 만들 수 있습니다. 다음에 도전해보세요.

  • 전화번호 형식에 맞는 입력값인지
  • 주민등록번호 형식에 맞는 입력값인지
  • 입력한 값이 Visa 카드인지, MasterCard 인지 (이 경우는 리턴이 반드시 boolean은 아니겠네요)