[웹개발] 4주차 학습 후기

유자·2020년 10월 11일
1

프론트엔드 워크플로우

HTML과 CSS를 학습했다.
id와 class를 잘 나누어야 CSS를 사용하기 편하다는 것을 알게되었다.
그에 앞서 HTML을 보기좋게 최대한 간단하게 구성하는 것이 중요하다.

  1. 화면을 구상한다.
  2. 쓰기 영역, 읽기 영역 등 각종 영역을 나눈다.
  3. 각 영역을 HTML로 작성한다.
  4. 적절한 id 또는 class를 부여한다.
  5. CSS로 원하는 화면을 연출한다.
  6. 화면 구성이 완료된 후에 자바스크립트를 사용해 기능을 구현한다.
  7. 이때 자바스크립트로 HTML의 각종 목록과 영역에 접근하여 기능을 구현하기 위해서는 DOM이라는 웹 API의 힘이 필요하다.

DOM reference :https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C



프로그래밍 언어 관련 지식

1. 고차함수(callback 함수의 이해)

map, filter, reduce를 학습하며 callback 함수에 대해 이해했다.
위 고차함수들은 반복문의 심화라고 보면 된다. 일단 주어지는 배열의 요소 하나 하나를 다 순회해가며 주어진 일을 수행한다.

  • arr.map(function(element){~})
    배열의 요소마다 주어진 함수를 적용시켜 새로운 배열을 리턴한다.
    기존 배열과 리턴된 새로운 배열의 길이는 동일하다.

  • arr.filter(function(element){~})
    주어진 함수를 통과하는 배열의 요소만 모아 새로운 배열을 리턴한다.
    기존 배열과 리턴된 새로운 배열의 길이는 달라질 수 있다.

  • arr. reduce(function(accumulator, currentIndex){~}, initialValue)
    배열의 각 요소를 순회하며 함수를 적용한 결과값을 accumulator에 저장하여 계산하도록 한다. initalValueaccumulator의 초기값을 뜻하며, 따로 설정하지 않으면 배열의 첫번째 인덱스 값이 자동으로 배정된다. 본 함수의 리턴되는 값은 accumulator이다.


세 함수의 차이점을 쉽게 잘 나타낸 그림을 첨부한다😎

2. 재귀함수

함수내에서 자기 자신의 함수를 또 불러내는 알고리즘이다. 이 재귀함수를 통해서 기존 내장 함수 구현을 시도해보았다.

stringifyJSON
function stringifyJSON(obj) {

  if(typeof(obj) === 'boolean' || typeof(obj) === 'number' || obj === null ) {
    return String(obj);
  }
  
  else if(typeof(obj) === 'string') {
    return `"${obj}"`
  }

  else if(typeof(obj) === 'undefined' || typeof(obj) === 'function') {
    return undefined;
  }
   
  else if(Array.isArray(obj)) {
    return `[${obj.map(stringifyJSON).join(',')}]` ;
  }

  else if(typeof obj === 'object') {
    return `{${Object.entries(obj)
      .filter(function([key, value]) {
        if(stringifyJSON(value) !== undefined) {
          return [key, value];
        }
      })
      .map(function([key, value]) {
      return `"${key}":${stringifyJSON(value)}`})
      .join(",")}}`;
  }
};

reference : https://wani.kr/posts/2020/02/11/make-parser-1/

getElementsByClassName
function getElementsByClassName(className) {
  let parents = document.body;
  let result = [];

  function check(parents) {
    if (parents.classList && parents.classList.contains(className)) {
      result.push(parents);
    }

    if (parents.hasChildNodes()) {
      for (let i = 0; i < parents.childNodes.length; i++) {
        check(parents.childNodes[i]);
      }
    }
  }

  check(parents);
  return result;

};

reference : https://medium.com/@cheonmyung0217/document-getelementsbyclassname-classname-%EC%9D%84-%EC%9E%AC%EA%B7%80%ED%95%A8%EC%88%98%EB%A1%9C-%EA%B5%AC%ED%98%84-4f8a5018dd1

profile
No one left behind

0개의 댓글